in aurelia ~ read.

Aurelia - New Click Tracking Feature for Google Analytics Plugin

aurelia-google-analytics has just been updated with a new feature that enables tracking of clicks. The latest version is 1.0.1.

To install: jspm install aurelia-google-analytics

Then do the following to configure it in your Aurelia app:

// main.js

export function configure(aurelia) {  
    aurelia.use
        //...
        .plugin('aurelia-google-analytics', config => {
          config.init('<Your Tracking ID>');
          config.attach({
            logging: {
              enabled: true
            },
            pageTracking: {
              enabled: true
            },
            clickTracking: {
              enabled: true,
              filter: (element) => {
                return element instanceof HTMLElement && 
                  (element.nodeName.toLowerCase() === 'a' ||
                  element.nodeName.toLowerCase() === 'button');
              }
            }
        });

    aurelia.start().then(a => a.setRoot());
}

The way to configure the plugin has changed since the first version. The configuration object was restructured to allow more flexibility and granular control. And, of course, to add the filter function for the click tracking feature.

The filter function can be anything you like. The idea is that it receives an HTML element and determines whether you are interested in tracking clicks on it. This is one part of the equation. It only filters to the proper elements, but that doesn't guarantee that a click event will be sent to GA.

The other part of this feature is adding the following data attributes in your markup: data-analytics-category, data-analytics-action and data-analytics-label. The first two are required. If either is missing, the click event will not be sent to GA. Those attributes can be used to categorize the information on GA to make reporting easier. For more information, please refer to Google's documentation.

For example:
<a href="#" data-analytics-category="menu" data-analytics-action="navigate" data-analytics-label="accounts">Accounts</a>

As always, any feedback is welcome. If you find any issues or have suggestions, please add them to the Issues tracker.

comments powered by Disqus