@superherocheesecake/tracking

Implement Tracking - Google Tag Manager or Google Analytics

NPM installation

npm i --save @superherocheesecake/tracking

Require the module

import { gTag } from '@superherocheesecake/tracking';
// or
import { googleTagManager } from '@superherocheesecake/tracking';

Basic usage in superherojs

events: {
    'click [data-measure]' : '_analyticsClickHandler'
},

onInitialized() {
    gTag.debug = true;
    gTag.delimiter = ':';
    gTag.ua = 'UA-xxxxxxxx-x';
    gTag.buttonAttribute = 'data-measure';
    gTag.pathPrefix = '/virtual/';
},

_analyticsClickHandler(e) {
    gTag.trackButton(e.delegateTarget);
}

Methods

trackButton(event)

Usualy called form within the ApplicationView. Just pass the event, most of the times this method is all you need.

<button data-measure="[category]:[action]:[label]"></button>

Tracking.trackButton(e.delegateTarget);

trackClick(event)

Usualy called from within Javascript to track JS click Events

Tracking.trackClick({category: 'category', action: 'action', label: 'label'});

trackEvent(event)

Usualy called from within Javascript to track custom Events (ie: Flow / Errors / Form validation) or just when you need more control over the GoogleTagManager.

Tracking.trackEvent({category: 'category', action: 'action', label: 'label'});

trackPageView(string [, bool])

Usualy called form within the ApplicationRouter

Tracking.trackPageView('pathName' [, allowSameView]);

Script references

GTag

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{tracking_id}}"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '{{tracking_id}}', {'anonymize_ip': true, 'send_page_view': false});
</script>

Google Tag Manager

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{tracking_id}}');</script>
<!-- End Google Tag Manager -->

Testing Tools

• Dataslayer Chrome Plugin
• Google Analytics Debugger Chrome Plugin
• Facebook Pixel Helper Chrome Plugin