grab clicks on svg elements

[miromarchi]

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]

Hi, would you mind providing sample HTML?

On Nov 21, 2017 6:19 PM, "Miro Marchi" notifications@github.com wrote:

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 data visualization. I'm using this code

.plugin('aurelia-google-analytics', config => { config.init('UA-92351657-1'); 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 || SVGElement && (element.nodeName.toLowerCase() === 'a' || element.nodeName.toLowerCase() === 'button' || element.nodeName.toLowerCase() === 'image'); }, }, clickTracking: { enabled: true, // Set to false to disable in non-production environments. }, }); });

But I can't manage to generate the event yet.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/miguelzakharia/aurelia-google-analytics/issues/28, or mute the thread https://github.com/notifications/unsubscribe-auth/AApp7BbfwqlJnG5eBHS7TNBRbfvgOXe5ks5s41pogaJpZM4Qmohd .

[miromarchi]

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]

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.

[miguelzakharia]

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.