@codecademy/tracking 1.0.35 → 1.0.36-alpha.14a4697e2e.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/events/track.js +5 -6
- package/dist/events/user.js +1 -1
- package/dist/integrations/gtm.d.ts +2 -1
- package/dist/integrations/gtm.js +12 -5
- package/dist/integrations/index.d.ts +6 -1
- package/dist/integrations/index.js +6 -4
- package/dist/integrations/onetrust.js +181 -4
- package/package.json +2 -2
package/dist/events/track.js
CHANGED
|
@@ -74,7 +74,7 @@ export const createTracker = _ref => {
|
|
|
74
74
|
client: getClientType()
|
|
75
75
|
}) : userData;
|
|
76
76
|
if (verbose) {
|
|
77
|
-
console.groupCollapsed(
|
|
77
|
+
console.groupCollapsed(`%cTracking Event Fired: ${category}:${event}`, 'color: #4b35ef; font-style: italic;');
|
|
78
78
|
console.log({
|
|
79
79
|
category,
|
|
80
80
|
event,
|
|
@@ -90,14 +90,14 @@ export const createTracker = _ref => {
|
|
|
90
90
|
if (typeof window !== 'undefined') {
|
|
91
91
|
// This allows the UTM query params to get registered in the user session.
|
|
92
92
|
const queryParams = window.location.search;
|
|
93
|
-
beacon(
|
|
93
|
+
beacon(`${basePath}/${category}${queryParams}`, {
|
|
94
94
|
category,
|
|
95
95
|
event,
|
|
96
96
|
properties: JSON.stringify(properties),
|
|
97
|
-
gdpr_safe:
|
|
97
|
+
gdpr_safe: `${options.gdprSafe}`
|
|
98
98
|
});
|
|
99
99
|
} else {
|
|
100
|
-
serverSideBeacon(
|
|
100
|
+
serverSideBeacon(`${basePath}/${category}`, {
|
|
101
101
|
category,
|
|
102
102
|
event,
|
|
103
103
|
properties: JSON.stringify(properties)
|
|
@@ -110,8 +110,7 @@ export const createTracker = _ref => {
|
|
|
110
110
|
impression: data => event('user', 'impression', data),
|
|
111
111
|
visit: data => event('user', 'visit', data),
|
|
112
112
|
pushDataLayerEvent: eventName => {
|
|
113
|
-
|
|
114
|
-
((_ref6 = window).dataLayer || (_ref6.dataLayer = [])).push({
|
|
113
|
+
(window.dataLayer ||= []).push({
|
|
115
114
|
event: eventName
|
|
116
115
|
});
|
|
117
116
|
}
|
package/dist/events/user.js
CHANGED
|
@@ -3,6 +3,7 @@ export type GTMSettings = {
|
|
|
3
3
|
environment: string;
|
|
4
4
|
scope: TrackingWindow;
|
|
5
5
|
optedOutExternalTracking?: boolean;
|
|
6
|
+
partytown?: boolean;
|
|
6
7
|
};
|
|
7
8
|
export declare const OPT_OUT_DATALAYER_VAR = "user_opted_out_external_tracking";
|
|
8
|
-
export declare const initializeGTM: ({ scope, environment, optedOutExternalTracking, }: GTMSettings) => void;
|
|
9
|
+
export declare const initializeGTM: ({ scope, environment, optedOutExternalTracking, partytown, }: GTMSettings) => void;
|
package/dist/integrations/gtm.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export const OPT_OUT_DATALAYER_VAR = 'user_opted_out_external_tracking';
|
|
2
2
|
export const initializeGTM = _ref => {
|
|
3
|
-
var _scope$dataLayer;
|
|
4
3
|
let scope = _ref.scope,
|
|
5
4
|
environment = _ref.environment,
|
|
6
|
-
optedOutExternalTracking = _ref.optedOutExternalTracking
|
|
7
|
-
|
|
5
|
+
optedOutExternalTracking = _ref.optedOutExternalTracking,
|
|
6
|
+
partytown = _ref.partytown;
|
|
7
|
+
scope.dataLayer ??= [];
|
|
8
8
|
scope.dataLayer.push({
|
|
9
9
|
'gtm.start': new Date().getTime(),
|
|
10
10
|
event: 'gtm.js'
|
|
@@ -21,7 +21,14 @@ export const initializeGTM = _ref => {
|
|
|
21
21
|
preview_env = '>m_auth=VrQuCDuWXkLlTwNHJYEKTg>m_preview=env-232';
|
|
22
22
|
}
|
|
23
23
|
const gtm = document.createElement('script');
|
|
24
|
-
gtm.
|
|
25
|
-
|
|
24
|
+
gtm.src = `https://www.googletagmanager.com/gtm.js?id=GTM-KTLK85W${preview_env}`;
|
|
25
|
+
if (partytown) {
|
|
26
|
+
gtm.type = 'text/partytown';
|
|
27
|
+
} else {
|
|
28
|
+
gtm.async = true;
|
|
29
|
+
}
|
|
26
30
|
document.getElementsByTagName('head')[0].appendChild(gtm);
|
|
31
|
+
if (partytown) {
|
|
32
|
+
window.dispatchEvent(new CustomEvent('ptupdate'));
|
|
33
|
+
}
|
|
27
34
|
};
|
|
@@ -16,8 +16,13 @@ export type TrackingIntegrationsSettings = {
|
|
|
16
16
|
* id for the one trust script being used, defaults to the script for `www.codecademy.com`
|
|
17
17
|
*/
|
|
18
18
|
oneTrustScript?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Use partytown to load scripts.
|
|
21
|
+
* next.config.js experimental: { nextScriptWorkers } must be set to true.
|
|
22
|
+
*/
|
|
23
|
+
partytown?: boolean;
|
|
19
24
|
};
|
|
20
25
|
/**
|
|
21
26
|
* @see README.md for details and usage.
|
|
22
27
|
*/
|
|
23
|
-
export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, oneTrustScript, }: TrackingIntegrationsSettings) => Promise<void>;
|
|
28
|
+
export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, oneTrustScript, partytown, }: TrackingIntegrationsSettings) => Promise<void>;
|
|
@@ -7,9 +7,10 @@ export const initializeTrackingIntegrations = async _ref => {
|
|
|
7
7
|
let environment = _ref.environment,
|
|
8
8
|
scope = _ref.scope,
|
|
9
9
|
optedOutExternalTracking = _ref.optedOutExternalTracking,
|
|
10
|
-
oneTrustScript = _ref.oneTrustScript
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
oneTrustScript = _ref.oneTrustScript,
|
|
11
|
+
partytown = _ref.partytown;
|
|
12
|
+
// 1. Wait to allow any other post-hydration logic to run first (not as critical when using partytown)
|
|
13
|
+
await new Promise(resolve => setTimeout(resolve, partytown ? 100 : 1000));
|
|
13
14
|
|
|
14
15
|
// 2. Load in OneTrust's banner and wait for its `OptanonWrapper` callback
|
|
15
16
|
await initializeOneTrust({
|
|
@@ -22,6 +23,7 @@ export const initializeTrackingIntegrations = async _ref => {
|
|
|
22
23
|
initializeGTM({
|
|
23
24
|
scope,
|
|
24
25
|
environment,
|
|
25
|
-
optedOutExternalTracking
|
|
26
|
+
optedOutExternalTracking,
|
|
27
|
+
partytown
|
|
26
28
|
});
|
|
27
29
|
};
|
|
@@ -11,15 +11,15 @@ export const initializeOneTrust = async _ref => {
|
|
|
11
11
|
script.setAttribute('async', 'true');
|
|
12
12
|
script.setAttribute('src', 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js');
|
|
13
13
|
script.setAttribute('type', 'text/javascript');
|
|
14
|
-
script.setAttribute('data-domain-script',
|
|
14
|
+
script.setAttribute('data-domain-script', `${scriptId}${environment === 'production' ? '' : '-test'}`);
|
|
15
15
|
document.body.appendChild(script);
|
|
16
16
|
const style = document.createElement('style');
|
|
17
17
|
style.textContent = rawStyles;
|
|
18
18
|
document.body.appendChild(style);
|
|
19
19
|
return new Promise(resolve => {
|
|
20
20
|
scope.OptanonWrapper = () => {
|
|
21
|
-
var
|
|
22
|
-
|
|
21
|
+
var _script$parentNode;
|
|
22
|
+
scope.dataLayer ??= [];
|
|
23
23
|
scope.dataLayer.push({
|
|
24
24
|
event: 'OneTrustGroupsUpdated'
|
|
25
25
|
});
|
|
@@ -31,4 +31,181 @@ export const initializeOneTrust = async _ref => {
|
|
|
31
31
|
|
|
32
32
|
// For now, these three values duplicate theme colors from gamut-styles
|
|
33
33
|
// We don't want to take a full dependency on that package here...
|
|
34
|
-
const rawStyles =
|
|
34
|
+
const rawStyles = `
|
|
35
|
+
:root {
|
|
36
|
+
--onetrust-brand-purple: #3A10E5;
|
|
37
|
+
--onetrust-color-gray-500: #828285;
|
|
38
|
+
--onetrust-color-white: #fff;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
#onetrust-banner-sdk {
|
|
42
|
+
padding: 1rem !important;
|
|
43
|
+
}
|
|
44
|
+
#onetrust-banner-sdk > .ot-sdk-container {
|
|
45
|
+
width: 100% !important;
|
|
46
|
+
}
|
|
47
|
+
#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {
|
|
48
|
+
display: flex !important;
|
|
49
|
+
flex-direction: column !important;
|
|
50
|
+
align-items: center !important;
|
|
51
|
+
max-width: 1436px !important;
|
|
52
|
+
margin: 0 auto !important;
|
|
53
|
+
}
|
|
54
|
+
#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row:after {
|
|
55
|
+
content: none !important;
|
|
56
|
+
}
|
|
57
|
+
#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {
|
|
58
|
+
display: flex !important;
|
|
59
|
+
flex-direction: column !important;
|
|
60
|
+
align-items: center !important;
|
|
61
|
+
max-width: 1436px !important;
|
|
62
|
+
margin: 0 auto !important;
|
|
63
|
+
}
|
|
64
|
+
#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row:after {
|
|
65
|
+
content: none !important;
|
|
66
|
+
}
|
|
67
|
+
#onetrust-group-container {
|
|
68
|
+
display: flex !important;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
float: none !important;
|
|
71
|
+
width: 100% !important;
|
|
72
|
+
max-width: 1148px !important;
|
|
73
|
+
margin-left: 0 !important;
|
|
74
|
+
margin-bottom: 0.625rem !important;
|
|
75
|
+
}
|
|
76
|
+
#onetrust-policy,
|
|
77
|
+
#onetrust-policy-text {
|
|
78
|
+
margin: 0 !important;
|
|
79
|
+
font-size: 0.875rem !important;
|
|
80
|
+
line-height: 1.375rem !important;
|
|
81
|
+
text-align: center !important;
|
|
82
|
+
float: none !important;
|
|
83
|
+
}
|
|
84
|
+
#onetrust-policy-text a {
|
|
85
|
+
text-decoration: none;
|
|
86
|
+
line-height: 26px !important;
|
|
87
|
+
margin-left: 0 !important;
|
|
88
|
+
}
|
|
89
|
+
#onetrust-button-group-parent {
|
|
90
|
+
position: relative !important;
|
|
91
|
+
top: initial !important;
|
|
92
|
+
left: initial !important;
|
|
93
|
+
transform: initial !important;
|
|
94
|
+
width: 264px !important;
|
|
95
|
+
margin: 0 !important;
|
|
96
|
+
padding: 0 !important;
|
|
97
|
+
float: none !important;
|
|
98
|
+
}
|
|
99
|
+
#onetrust-button-group {
|
|
100
|
+
display: flex !important;
|
|
101
|
+
margin: 0 !important;
|
|
102
|
+
}
|
|
103
|
+
#onetrust-pc-btn-handler, #onetrust-accept-btn-handler {
|
|
104
|
+
min-width: initial !important;
|
|
105
|
+
padding: 0.375rem 1rem !important;
|
|
106
|
+
margin: 0 !important;
|
|
107
|
+
opacity: 1 !important;
|
|
108
|
+
border-radius: 2px !important;
|
|
109
|
+
line-height: 1.5 !important;
|
|
110
|
+
user-select: none !important;
|
|
111
|
+
font-size: 1rem !important;
|
|
112
|
+
}
|
|
113
|
+
#onetrust-pc-btn-handler:focus, #onetrust-accept-btn-handler:focus {
|
|
114
|
+
box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);
|
|
115
|
+
text-decoration: none !important;
|
|
116
|
+
outline: none !important;
|
|
117
|
+
}
|
|
118
|
+
#onetrust-pc-btn-handler{
|
|
119
|
+
color: var(--onetrust-brand-purple) !important;
|
|
120
|
+
border: 1px solid var(--onetrust-brand-purple)!important;
|
|
121
|
+
background: var(--onetrust-color-white) !important
|
|
122
|
+
}
|
|
123
|
+
#onetrust-accept-btn-handler {
|
|
124
|
+
color: var(--onetrust-color-white) !important;
|
|
125
|
+
background: var(--onetrust-brand-purple)!important;
|
|
126
|
+
margin-left: 1rem !important;
|
|
127
|
+
}
|
|
128
|
+
#onetrust-close-btn-container {
|
|
129
|
+
display: none !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.pc-logo {
|
|
133
|
+
display: none !important;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
#accept-recommended-btn-handler,
|
|
137
|
+
.ot-pc-refuse-all-handler,
|
|
138
|
+
.save-preference-btn-handler {
|
|
139
|
+
margin-left: 4px !important;
|
|
140
|
+
font-size: 14px !important;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
#accept-recommended-btn-handler:focus,
|
|
144
|
+
#onetrust-pc-sdk .ot-pc-refuse-all-handler:focus,
|
|
145
|
+
#onetrust-pc-sdk .save-preference-btn-handler:focus {
|
|
146
|
+
box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);
|
|
147
|
+
text-decoration: none !important;
|
|
148
|
+
outline: none !important;
|
|
149
|
+
opacity: 1 !important;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.ot-switch-label {
|
|
153
|
+
border: 1px solid var(--onetrust-color-gray-500) !important;
|
|
154
|
+
background-color: var(--onetrust-color-gray-500) !important;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.ot-switch-nob {
|
|
158
|
+
background: var(--onetrust-color-white) !important;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.ot-switch-inner:before {
|
|
162
|
+
background-color: var(--onetrust-brand-purple) !important;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.switch-checkbox:checked+.ot-switch-label .ot-switch-nob {
|
|
166
|
+
border-color: var(--onetrust-brand-purple) !important;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.ot-pc-footer-logo {
|
|
170
|
+
display: none !important;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
#onetrust-banner-sdk>.ot-sdk-container {
|
|
174
|
+
overflow: visible !important;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@media (max-width: 30rem) {
|
|
178
|
+
#accept-recommended-btn-handler,
|
|
179
|
+
.ot-pc-refuse-all-handler,
|
|
180
|
+
.save-preference-btn-handler {
|
|
181
|
+
width: 96% !important;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@media (min-width: 37.5rem) {
|
|
186
|
+
#onetrust-banner-sdk {
|
|
187
|
+
padding: 0.875rem 1rem !important;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
@media (min-width: 48rem) {
|
|
191
|
+
#onetrust-banner-sdk {
|
|
192
|
+
padding: 0.875rem 1.25rem !important;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
@media (min-width: 1650px) {
|
|
196
|
+
#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {
|
|
197
|
+
flex-direction: row !important;
|
|
198
|
+
justify-content: space-between !important;
|
|
199
|
+
}
|
|
200
|
+
#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {
|
|
201
|
+
flex-direction: row !important;
|
|
202
|
+
justify-content: space-between !important;
|
|
203
|
+
}
|
|
204
|
+
#onetrust-group-container {
|
|
205
|
+
margin-bottom: 0 !important;
|
|
206
|
+
}
|
|
207
|
+
#onetrust-button-group {
|
|
208
|
+
flex-direction: row !important;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
`;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/tracking",
|
|
3
3
|
"description": "Tracking library for Codecademy",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.36-alpha.14a4697e2e.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist/**"
|
|
@@ -13,5 +13,5 @@
|
|
|
13
13
|
"access": "public"
|
|
14
14
|
},
|
|
15
15
|
"repository": "git@github.com:codecademy-engineering/mono.git",
|
|
16
|
-
"gitHead": "
|
|
16
|
+
"gitHead": "77fa7f8fb87c1f5543a976166d7764b962fd5c23"
|
|
17
17
|
}
|