@superherocheesecake/tracking
v2.0.14
Published
Implement Tracking - Google Tag Manager or Google Analytics
Downloads
21
Maintainers
Keywords
Readme
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 -->