miguelzakharia/aurelia-google-analytics

grab clicks on svg elements

Opened this issue · 4 comments

miromarchi commented

Hi and thanks for this plugin!
I am successfully using this to track events on buttons and anchors.
I wish also to grab links on SVGElement with nodeName: image which do not trigger a pageview. Basically elements of a d3js based data visualization.
I'm using this code

.plugin('aurelia-google-analytics', config => {
      config.init('xxxxxx');
      config.attach({
        logging: {
          enabled: true, // Set to `true` to have some log messages appear in the browser console.
        },
        pageTracking: {
          enabled: true, // Set to `false` to disable in non-production environments.
          // Optional. By default it tracks clicks on anchors and buttons.
          filter: (element) => {
            return (element instanceof HTMLElement &&
              (element.nodeName.toLowerCase() === 'a' ||
                element.nodeName.toLowerCase() === 'button')) ||
              (element instanceof SVGElement && 
                (element.nodeName.toLowerCase() === 'image' ||
                element.nodeName.toLowerCase() === 'circle' ||
                element.nodeName.toLowerCase() === 'line'));
          },
        },
        clickTracking: {
          enabled: true, // Set to `false` to disable in non-production environments.
        },
      });
    });

I added the proper analytics attributes with

nodes.selectAll('.node__image')
        .attr('xlink:href', d => d.media)
        .attr('data-analytics-category', THAT.id)
        .attr('data-analytics-action', 'node')
        .attr('data-analytics-label', d => d.id)
        .on('click', nodeClick)

I also tried the same with svg:line and svg:circle elements.
But I can't manage to generate any of those events yet.

miguelzakharia commented
  • 👍1
miromarchi commented

Sure, thanks.
This is a simplified version of a one-node visualization. Node is a group containing circle, text and image with mask.

<svg id="EcosystemSvg" width="804" height="733">
    <rect opacity="0" height="733" width="804"></rect>
    <g id="main-group" width="804" height="733">
        <g id="graph-group" transform="translate(-509.2254622382578,-451.4287720825889) scale(2.24388696106097)">
            <g class="links-group"></g>
            <g class="nodes-group">
                <g id="node_1" transform="translate(402, 366)">
                    <circle class="node__circle" id="node_1_circle" r="31" style="fill: url(#radial-gradient_4);"></circle>
                    <defs>
                        <clipPath id="node_1_clip" class="node-clip" r="31">
                            <circle r="31"></circle>
                        </clipPath>
                    </defs>
                    <text id="node_1_label" class="node-label" text-anchor="middle" dy="0" clip-path="url(#node_1_clip)" fill="#4f4c4d" y="0.6em" style="font-size: 7.83394px;">
                        <tspan x="0" dy="0em">Node title </tspan>
                    </text>
                    <image id="node_1_image" class="node__image" preserveAspectRatio="xMidYMid slice" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="media/20171122_122050_daffodil-2-wallpaper-3840x2160_sm.jpg" clip-path="url(#node_1_clip)" data-analytics-category="graph" data-analytics-action="bubble" data-analytics-label="node_1" width="68" height="68" x="-34" y="-34"></image>
                </g>
            </g>
        </g>
    </g>
</svg>
miguelzakharia commented

Ok, I think I know what the problem is. The criteria object needs to be expanded to include an isSvgElement property and hasTrackingInfo needs to be modified to take into consideration an SVG. Once that is complete, you will be able to override the filter property in clickTracking to include svg in addition to a and button.

I probably will not have a chance to complete the changes tonight, but I should have something by the end of this week.

  • 👍1
  • ❤️1
miguelzakharia commented

A few days turned into several months 😞

I have the code written (branch issue-28) and preliminary tests look good. I ran into problems linking the plugin and I'm still working those out.

  • ❤️2