2

I have a problem with a site I'm developing in which I have a US map with each state as a polygon defined in an svg. Each of those polygons is wrapped in a link so users can click on a state to be taken to information about that state.

Code layout: <svg...> <a xlink:href="..."> <polygon ...><title>{stateName}</title></polygon> </a> </svg>

The problem I'm having is when someone clicks one of these links I get several errors: TypeError: this.href.match is not a function in googleanalytics.js line 36, col 66 ...rupal.settings.googleanalytics.trackOutbound && this.href.match(/^\w+:///i)) TypeError: target.protocol is undefined in overlay-parent.js line 575 if (href != undefined && href != '' && target.protocol.match(/^https?:/)) {

After some experimentation I narrowed it down to those functions having undefined events.

The googleanalytics.js function is: ... $(document.body).bind("mousedown keyup touchstart", function(event) { ...

The overlay-parent.js function is: ... Drupal.overlay.eventhandlerOverrideLink = function (event) { ...

I assume this has something to do with the links being nested in the svg for some reason but I can't find any good information on why or how to get around that.

I tried using a jquery.svg.js plugin but that had no impact.

Using: Drupal 7.34 jQuery 1.10.2 (via ajax.googleapis.com) Google Analytics 7.x-2.1 (googleanalytics.js) jQuery Update 7.x-2.4 (replace/misc/1.9/overlay-parent.js)

If any other info is needed to help figure this out let me know.

Thanks in advance for any help you can provide!

Improve this question
3
  • Did you find a solution to this?
    – cherouvim
    Commented Jul 22, 2015 at 11:28
  • drupal.org/node/2537656
    – cherouvim
    Commented Jul 22, 2015 at 11:51
  • Unfortunately no. I had to revert to using a static image with an image map and custom jQuery logic to make the whole thing responsive. The SVG would have been the more elegant solution.
    – Jason Gray
    Commented Jul 23, 2015 at 12:37

1 Answer 1

Reset to default
1
+50

The issue is the way the google analytics module tracks clicks. It adds mousedown, keyup, and touchstart events to the body and tries to match the clicked position the the closest anchor. When it encounters a click on an SVG element it gets confused and is not able to properly match the closest anchor.

There are a couple options to remedy this:

  1. Using :after on your anchors to create a block that covers up the SVG elements.
  2. Using pointer-events: none on all SVG elements inside your anchor.
  3. Turn off click tracking in your Google Analytics settings.
  4. Unbind click tracking on your map page only with something like $('body.mymappage').unbind()
  5. Manually patch the GA module:

Change the line (googleanalytics.js):

$(event.target).closest("a,area").each(function() {

to: 

$(event.target).closest("a,area").not(".svg-anchor").each(function() {

The first 2 options are documented here, and a codepen example fix is here.

Improve this answer
3
  • Couldn't that be solved by modifying/patching the module instead of having to change the SVG?
    – cherouvim
    Commented Jul 27, 2015 at 4:47
  • Yes, only issue is that updating the GA module would break your fix. I'll add an option #5 for patching the GA module.
    – Patrick Ryan
    Commented Jul 27, 2015 at 15:02
  • Patching and probably contributing the patch back to the module's codebase.
    – cherouvim
    Commented Jul 29, 2015 at 11:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.