-
Notifications
You must be signed in to change notification settings - Fork 2
/
start-google-analytics-tracker.html
79 lines (70 loc) · 3.2 KB
/
start-google-analytics-tracker.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-signals/iron-signals.html">
<!--
Polymer Element for Google Analytics Universal Web Tracking, supports page and event tracking.
Initialise:
<start-google-analytics-tracker code="UA-XXXXX-Y"></start-google-analytics-tracker>
Track an Event:
this.fire('iron-signal', {name: 'track-event',data: {category: "messages",action: "send_text_message",label: "group",value: 1}});
Track a page Change:
this.fire('iron-signal', {name: 'track-page', data: { path: "/about.html" } });
To use Google Analytics user id attribution https://developers.google.com/analytics/devguides/collection/analyticsjs/user-id set the user id property on the element:
document.querySelector("start-google-analytics-tracker").userId = loggedInUserId;
-->
<dom-module id="start-google-analytics-tracker">
<template>
<iron-signals on-iron-signal-track-page="trackPage" on-iron-signal-track-event="trackEvent"></iron-signals>
</template>
</dom-module>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName('link')[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','scripts/analytics.js','ga');
(function() {
Polymer({
is: 'start-google-analytics-tracker',
properties: {
/**
* The Google analytics property id
*/
code: {
type: String
},
/**
* Optional user id, set this for a use authenticated with your service
* https://developers.google.com/analytics/devguides/collection/analyticsjs/user-id
*/
userId: {
type: String,
notify: true
}
},
listeners: {
'track-event': 'trackEvent',
'track-page': 'trackPage',
'user-id-changed': 'userIDChanged'
},
ready: function() {
//console.log("setup GS for "+this.code);
ga('create', this.code, 'auto');
this.trackPage();
},
trackEvent: function(e) {
//Add support for a non-interactin even that does not effect bounce rates - eg things that happen after a timeout
//ga('send', 'event', 'category', 'action', {'nonInteraction': 1});
ga('send', 'event', e.detail.category, e.detail.action, e.detail.label, e.detail.value);
},
trackPage: function(e) {
//Use set param, this way if we then send a subsequent event on the page it will be correctly associated with the same page
if (e != undefined && e.detail.path !== undefined) {
ga('set', 'page', e.detail.path);
}
ga('send', 'pageview');
},
userIDChanged: function(e) {
ga('set', '&uid', this.userId);
}
});
})();
</script>