-
Notifications
You must be signed in to change notification settings - Fork 6
/
analytics.js
144 lines (125 loc) 路 4.05 KB
/
analytics.js
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import ReactGA from 'react-ga';
import Router from 'next/router';
import throttle from 'lodash.throttle';
type AnalyticsCategory = 'collections' | 'editorial' | 'public-programme';
type Props = {|
category: AnalyticsCategory,
contentType: ?string,
pageState: ?Object,
featuresCohort: ?string,
|}
function testLocalStorage() { // Test localStorage i/o
const test = 'test';
try {
window.localStorage.setItem(test, test);
window.localStorage.removeItem(test);
return true;
} catch (e) {
return false;
}
};
const hasWorkingLocalStorage = testLocalStorage();
export default ({ category, contentType, pageState, featuresCohort }: Props) => {
const referringComponentListString = hasWorkingLocalStorage && window.localStorage.getItem('wc_referring_component_list');
window.localStorage.removeItem('wc_referring_component_list');
if (!window.GA_INITIALIZED) {
// We will have two trackers, one that has been used on the v1 site, and v2 site (UA-55614-6)
// The other is just for the v2 site UA-55614-24
// The v1 site was setup with a lot of configuration, which feels like it would be out of sync with
// the new questions we would like ask of our analytics, so this was for a clean slate.
ReactGA.initialize([{
trackingId: 'UA-55614-6',
titleCase: false
}, {
trackingId: 'UA-55614-24',
titleCase: false,
gaOptions: {
name: 'v2'
}
}]);
window.GA_INITIALIZED = true;
}
ReactGA.set({'dimension1': '2'});
if (category) {
ReactGA.set({'dimension2': category});
};
if (featuresCohort && featuresCohort !== 'default') {
ReactGA.set({'dimension5': featuresCohort});
}
if (contentType) {
ReactGA.set({'dimension6': contentType});
}
if (referringComponentListString) {
ReactGA.set({'dimension7': referringComponentListString});
}
if (pageState && Object.keys(pageState).length > 0) {
ReactGA.set({'dimension8': JSON.stringify(pageState)});
};
ReactGA.plugin.require('GTM-NXMJ6D9');
const pageview = `${window.location.pathname}${window.location.search}`;
ReactGA.pageview(pageview);
Router.onRouteChangeStart = url => {
window.performance.mark('onRouteChangeStart');
};
Router.onRouteChangeComplete = url => {
window.performance.mark('onRouteChangeEnd');
window.performance.measure(
'onRouteChange',
'onRouteChangeStart',
'onRouteChangeEnd'
);
const measure = window.performance.getEntriesByName('onRouteChange')[0];
ReactGA.timing({
category: 'Navigation',
variable: 'routeChange',
value: Math.round(measure.duration),
label: url
});
window.performance.clearMarks();
window.performance.clearMeasures();
};
setTimeout(() => {
ReactGA.event({
category: 'Engagement',
action: 'Time on page >=',
label: '10 seconds'
});
}, 10000);
// Setup scroll tracking
const startTime = new Date().getTime();
const scrollCache = [];
window.addEventListener('scroll', throttle(() => {
const el = document.getElementById('main');
if (el) {
const timing = new Date().getTime() - startTime;
const elHeight = el.offsetHeight + el.offsetTop;
const winHeight = window.innerHeight;
const scrollDistance = window.pageYOffset + winHeight;
const marks = {
'25%': parseInt(elHeight * 0.25, 10),
'50%': parseInt(elHeight * 0.5, 10),
'75%': parseInt(elHeight * 0.75, 10),
'100%': elHeight
};
Object.keys(marks).forEach((mark) => {
const val = marks[mark];
if (scrollCache.indexOf(mark) === -1 && scrollDistance >= val) {
scrollCache.push(mark);
ReactGA.event({
category: 'Scroll Depth',
action: 'Percentage',
label: mark,
value: 1,
nonInteraction: Boolean(timing < 10000)
});
ReactGA.timing({
category: 'Scroll Timing',
action: 'Scroll Timing',
variable: `Scrolled ${mark}`,
value: timing
});
}
});
}
}, 100));
};