@codecademy/tracking 1.0.47-alpha.efc607f528.0 → 1.0.47
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 +6 -7
- package/dist/events/user.js +1 -1
- package/dist/integrations/consent.d.ts +1 -2
- package/dist/integrations/consent.js +0 -1
- package/dist/integrations/fides.d.ts +1 -0
- package/dist/integrations/fides.js +450 -0
- package/dist/integrations/gtm.js +2 -3
- package/dist/integrations/index.d.ts +5 -1
- package/dist/integrations/index.js +13 -8
- package/dist/integrations/onetrust.js +190 -4
- package/dist/integrations/partytown/config.js +5 -5
- package/dist/integrations/partytown/index.js +2 -2
- package/package.json +4 -1
package/dist/events/track.js
CHANGED
|
@@ -32,7 +32,7 @@ export const createTracker = _ref => {
|
|
|
32
32
|
if (navigator.sendBeacon && navigator.sendBeacon(uri, form)) {
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
35
|
-
} catch
|
|
35
|
+
} catch {
|
|
36
36
|
// Even with the proper scoping, Chrome 79-80 still gives "Illegal invocation" crashes. Sigh.
|
|
37
37
|
}
|
|
38
38
|
|
|
@@ -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
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const initializeFides: () => void;
|
|
@@ -0,0 +1,450 @@
|
|
|
1
|
+
import { theme } from '@codecademy/gamut-styles';
|
|
2
|
+
/**
|
|
3
|
+
* Fides property ID for `www.codecademy.com`.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
const PROPERTY_ID = 'FDS-3RC5S1';
|
|
7
|
+
export const initializeFides = () => {
|
|
8
|
+
const script = document.createElement('script');
|
|
9
|
+
script.setAttribute('async', 'true');
|
|
10
|
+
script.setAttribute('src', `https://skillsoft-codecademy.fides-cdn.ethyca.com/fides.js?property_id=${PROPERTY_ID}`);
|
|
11
|
+
script.setAttribute('type', 'text/javascript');
|
|
12
|
+
script.addEventListener('load', () => {
|
|
13
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
14
|
+
// @ts-ignore
|
|
15
|
+
const fides = window.Fides;
|
|
16
|
+
fides.gtm();
|
|
17
|
+
const unsubscribe = fides.onFidesEvent('FidesUIShown', detail => {
|
|
18
|
+
if (detail.extraDetails.servingComponent === 'banner') {
|
|
19
|
+
const banner = document.getElementById('fides-banner');
|
|
20
|
+
if (banner) {
|
|
21
|
+
banner.setAttribute('tabIndex', '-1');
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
unsubscribe();
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
document.body.appendChild(script);
|
|
28
|
+
const style = document.createElement('style');
|
|
29
|
+
style.textContent = rawStyles;
|
|
30
|
+
document.body.appendChild(style);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// For now, these three values duplicate theme colors from gamut-styles
|
|
34
|
+
// We don't want to take a full dependency on that package here...
|
|
35
|
+
const rawStyles = `
|
|
36
|
+
:root {
|
|
37
|
+
/* Colors */
|
|
38
|
+
|
|
39
|
+
--fides-overlay-primary-color: ${theme.colors.hyper};
|
|
40
|
+
--fides-overlay-body-font-color: #484848;
|
|
41
|
+
|
|
42
|
+
/* Buttons */
|
|
43
|
+
|
|
44
|
+
--fides-overlay-primary-button-background-hover-color: ${theme.colors.hyper};
|
|
45
|
+
|
|
46
|
+
/* Toggles */
|
|
47
|
+
--fides-overlay-primary-active-color: var(--fides-overlay-primary-color);
|
|
48
|
+
--fides-overlay-primary-active-disabled-color: #bda4f7;
|
|
49
|
+
--fides-overlay-inactive-color: #cbd5e0;
|
|
50
|
+
--fides-overlay-disabled-color: #e1e7ee;
|
|
51
|
+
|
|
52
|
+
/* Everything else */
|
|
53
|
+
--fides-overlay-button-border-radius: ${theme.borderRadii.md};
|
|
54
|
+
--fides-overlay-font-family: inherit;
|
|
55
|
+
--fides-overlay-font-size-body: 0.875rem !important;
|
|
56
|
+
--fides-overlay-line-height: 1.375rem !important;
|
|
57
|
+
--fides-overlay-padding: padding: 1rem !important;
|
|
58
|
+
--fides-overlay-padding: 0.875rem 1rem !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.fides-banner, .fides-modal-container {
|
|
62
|
+
-webkit-font-smoothing: auto;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
div#fides-overlay {
|
|
66
|
+
font-size: var(--fides-overlay-font-size-body);
|
|
67
|
+
line-height: var(--fides-overlay-line-height);
|
|
68
|
+
z-index: 1000;
|
|
69
|
+
position: fixed;
|
|
70
|
+
white-space: pre-line;
|
|
71
|
+
font-family: inherit;
|
|
72
|
+
line-height: calc(1em + 0.4rem);
|
|
73
|
+
-webkit-font-smoothing: auto;
|
|
74
|
+
z-index: 9948031 !important
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
#fides-modal-link {
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
display: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
#fides-modal .fides-notice-toggle-title:hover {
|
|
83
|
+
background-color: ${theme.colors.white} !important
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
#fides-modal .fides-modal-content {
|
|
87
|
+
background-color: ${theme.colors.white} !important;
|
|
88
|
+
border:0;
|
|
89
|
+
font-size: 14px;
|
|
90
|
+
line-height: 1.4;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.fides-modal-description a:focus {
|
|
94
|
+
outline: 1px solid ${theme.colors.black} !important;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.fides-notice-toggle-title a:focus {
|
|
98
|
+
outline: 1px solid ${theme.colors.black} !important;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
#fides-modal .fides-notice-toggle, #fides-modal fides-notice-toggle-expanded {
|
|
102
|
+
background-color: ${theme.colors.white} !important;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
#fides-modal .fides-banner-button-secondary.fides-save-button {
|
|
106
|
+
color: var(--fides-overlay-primary-button-background-color) !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
#fides-modal .fides-modal-footer {
|
|
110
|
+
background-color: ${theme.colors.white}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
#fides-modal .fides-toggle-display {
|
|
114
|
+
color: transparent;
|
|
115
|
+
padding: 0;
|
|
116
|
+
padding-block: 2px;
|
|
117
|
+
--offset: 0.2em !important;
|
|
118
|
+
--diameter: 1.2em !important;
|
|
119
|
+
background-color: #828285
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {
|
|
123
|
+
background-color: var(--fides-overlay-primary-active-color) !important;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
#fides-modal .fides-divider {
|
|
127
|
+
display: none !important
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
#fides-modal .fides-modal-title {
|
|
131
|
+
text-align: left !important;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
div#fides-banner-container {
|
|
135
|
+
bottom: 0 !important;
|
|
136
|
+
left: 0 !important;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
div#fides-banner-container button.fides-banner-button {
|
|
140
|
+
font-size: 16px !important;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
div#fides-banner {
|
|
144
|
+
line-height: var(--fides-overlay-line-height);
|
|
145
|
+
color: var(--fides-overlay-body-font-color) !important;
|
|
146
|
+
width: 100% !important;
|
|
147
|
+
overflow-y: hidden;
|
|
148
|
+
border: 0 !important;
|
|
149
|
+
box-shadow: 0 0 18px rgba(0, 0, 0, 0.2) !important;
|
|
150
|
+
background-color: ${theme.colors.white};
|
|
151
|
+
-webkit-font-smoothing: auto;
|
|
152
|
+
bottom: 1px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
div#fides-banner:focus {
|
|
156
|
+
outline: 1px solid ${theme.colors.black} !important
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
div#fides-banner-inner {
|
|
160
|
+
display: flex;
|
|
161
|
+
flex-direction: column;
|
|
162
|
+
align-items: center;
|
|
163
|
+
max-width: 1436px;
|
|
164
|
+
margin: 0 auto;
|
|
165
|
+
row-gap: 16px;
|
|
166
|
+
row-gap: unset !important
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* Responsive banner */
|
|
170
|
+
|
|
171
|
+
div#fides-banner-description {
|
|
172
|
+
margin-top: 0;
|
|
173
|
+
margin-bottom: 10px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
div#fides-banner-description span {
|
|
177
|
+
line-height: 1.375rem !important;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
div#fides-banner-description > div {
|
|
181
|
+
text-align: center;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
div#fides-banner-description > div a {
|
|
185
|
+
font-weight: bold;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
div#fides-button-group {
|
|
189
|
+
justify-content: center;
|
|
190
|
+
gap: 2em;
|
|
191
|
+
background-color: transparent;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
#fides-banner div#fides-button-group {
|
|
195
|
+
margin-top: 0.5em;
|
|
196
|
+
display: flex;
|
|
197
|
+
display: flex;
|
|
198
|
+
justify-content: center;
|
|
199
|
+
background-color: transparent;
|
|
200
|
+
gap: 16px !important;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
div#fides-button-group .fides-banner-secondary-actions > button {
|
|
204
|
+
cursor: pointer;
|
|
205
|
+
text-decoration: none;
|
|
206
|
+
font-weight: bold;
|
|
207
|
+
padding: 10px 16px !important
|
|
208
|
+
padding-top: 3px !important;
|
|
209
|
+
margin-top: 0;
|
|
210
|
+
border: 1px solid var(--fides-overlay-primary-color);
|
|
211
|
+
border-radius: 2px;
|
|
212
|
+
box-sizing: border-box;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {
|
|
216
|
+
margin-right: 0px !important;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.fides-modal-footer div#fides-button-group {
|
|
220
|
+
width: 100% !important
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
#fides-modal .fides-modal-button-group.fides-modal-primary-actions {
|
|
224
|
+
margin-left: 0 !important;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.fides-gpc-label {
|
|
228
|
+
display: none !important;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
button.fides-banner-button.fides-banner-button-tertiary {
|
|
232
|
+
background: none;
|
|
233
|
+
border: none;
|
|
234
|
+
padding: 0;
|
|
235
|
+
color: var(--fides-overlay-link-font-color);
|
|
236
|
+
text-decoration: underline;
|
|
237
|
+
cursor: pointer;
|
|
238
|
+
line-height: 2em;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/** Modal */
|
|
242
|
+
|
|
243
|
+
div.fides-modal-content {
|
|
244
|
+
line-height: var(--fides-overlay-line-height);
|
|
245
|
+
color: var(--fides-overlay-body-font-color) !important;
|
|
246
|
+
box-sizing: border-box;
|
|
247
|
+
padding: var(--fides-overlay-padding);
|
|
248
|
+
border: 1px solid var(--fides-overlay-primary-color);
|
|
249
|
+
background-color: var(--fides-overlay-background-color);
|
|
250
|
+
border-radius: var(--fides-overlay-component-border-radius);
|
|
251
|
+
max-height: 100%;
|
|
252
|
+
max-width: 100%;
|
|
253
|
+
overflow-y: scroll;
|
|
254
|
+
z-index: 2;
|
|
255
|
+
position: fixed;
|
|
256
|
+
top: 50%;
|
|
257
|
+
left: 50%;
|
|
258
|
+
transform: translate(-50%, -50%);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.fides-toggle .fides-toggle-display {
|
|
262
|
+
--offset: 0.1em;
|
|
263
|
+
--diameter: 1em;
|
|
264
|
+
/** Because we have a "hidden" attr on this toggle element, some CSS libs customers use may include a global display: none on the hidden attr. To prevent our toggles from being hidden we use !important here **/
|
|
265
|
+
display: inline-flex !important;
|
|
266
|
+
align-items: center;
|
|
267
|
+
justify-content: space-around;
|
|
268
|
+
width: calc(var(--diameter) * 2 + var(--offset) * 2);
|
|
269
|
+
height: calc(var(--diameter) + var(--offset) * 2);
|
|
270
|
+
box-sizing: content-box;
|
|
271
|
+
position: relative;
|
|
272
|
+
border-radius: 100vw;
|
|
273
|
+
background-color: var(--fides-overlay-inactive-color);
|
|
274
|
+
transition: 250ms;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/* Checked/unchecked states */
|
|
278
|
+
.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {
|
|
279
|
+
background-color: var(--fides-overlay-primary-active-color);
|
|
280
|
+
}
|
|
281
|
+
.fides-toggle .fides-toggle-input:checked + .fides-toggle-display::before {
|
|
282
|
+
transform: translate(100%, -50%);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/* Disabled state */
|
|
286
|
+
.fides-toggle .fides-toggle-input:disabled {
|
|
287
|
+
cursor: not-allowed;
|
|
288
|
+
}
|
|
289
|
+
.fides-toggle .fides-toggle-input:disabled + .fides-toggle-display {
|
|
290
|
+
background-color: var(--fides-overlay-disabled-color);
|
|
291
|
+
}
|
|
292
|
+
.fides-toggle .fides-toggle-input:disabled:checked + .fides-toggle-display {
|
|
293
|
+
background-color: var(--fides-overlay-primary-active-disabled-color);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* Focus ring when using keyboard */
|
|
297
|
+
.fides-toggle .fides-toggle-input:focus + .fides-toggle-display {
|
|
298
|
+
/* Firefox only has Highlight, not -webkit-focus-ring-color */
|
|
299
|
+
outline: 1px auto Highlight;
|
|
300
|
+
outline: 1px auto -webkit-focus-ring-color;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* Disclosure */
|
|
304
|
+
|
|
305
|
+
.fides-notice-toggle .fides-notice-toggle-title {
|
|
306
|
+
border: 0;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
#fides-modal .fides-modal-secondary-actions {
|
|
310
|
+
display: none !important;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.fides-notice-toggle .fides-notice-toggle-trigger {
|
|
314
|
+
padding-left: 4px;
|
|
315
|
+
position: relative;
|
|
316
|
+
left: -4px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.fides-notice-toggle-trigger > .fides-flex-center.fides-justify-space-between {
|
|
320
|
+
font-weight: bold
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/* Tabs */
|
|
324
|
+
|
|
325
|
+
.fides-tab-button::focus-visible {
|
|
326
|
+
outline: 1px auto ${theme.colors.black};
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.fides-tab-button:focus:not(:focus-visible) {
|
|
330
|
+
outline: 4px solid ${theme.colors.hyper} !important;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.fides-toggle-input.focus-visible + .fides-toggle-display,
|
|
334
|
+
.fides-banner-button.fides-banner-button-primary.focus-visible,
|
|
335
|
+
.fides-banner-button.fides-banner-button-secondary.focus-visible,
|
|
336
|
+
.fides-banner-button.fides-banner-button-tertiary.focus-visible {
|
|
337
|
+
outline: 3px solid ${theme.colors.hyper} !important;
|
|
338
|
+
outline-offset: 2px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* Table */
|
|
342
|
+
|
|
343
|
+
.fides-cookies-table {
|
|
344
|
+
border-collapse: collapse;
|
|
345
|
+
width: 100%;
|
|
346
|
+
text-align: left;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.fides-cookies-table th {
|
|
350
|
+
text-transform: uppercase;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.fides-cookies-table td, .fides-cookies-table th {
|
|
354
|
+
border: 1px solid var(--fides-overlay-row-divider-color);
|
|
355
|
+
padding-left: 1.1em;
|
|
356
|
+
padding-right: 0.6em;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
#fides-banner #fides-button-group button {
|
|
360
|
+
font-weight: bold;
|
|
361
|
+
padding: 10px 16px;
|
|
362
|
+
margin-top: 0;
|
|
363
|
+
border: 1px solid var(--fides-overlay-primary-color);
|
|
364
|
+
border-radius: 2px;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
#fides-banner #fides-button-group div:nth-child(2) > button:nth-child(1) {
|
|
368
|
+
background-color: white;
|
|
369
|
+
color: #3a10e5;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
#fides-banner-button-tertiary {
|
|
373
|
+
display: none;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
#fides-banner-heading {
|
|
377
|
+
display: none !important;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
div#fides-banner-inner div#fides-button-group {
|
|
381
|
+
flex-direction: row !important;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.fides-banner-description a:hover, .fides-modal-description a:hover {
|
|
385
|
+
text-decoration: none;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
#fides-banner-inner-container a.focus-visible {
|
|
389
|
+
outline: 1px solid ${theme.colors.black} !important;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
div#fides-banner-inner div#fides-button-group {
|
|
393
|
+
padding-top: 0 !important
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {
|
|
397
|
+
width: auto !important
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
#fides-banner .fides-banner-button-group.fides-banner-primary-actions {
|
|
401
|
+
align-items: flex-end !important;
|
|
402
|
+
align-self: stretch !important
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
#fides-banner .fides-banner-button-group.fides-banner-secondary-actions {
|
|
406
|
+
align-items: flex-start !important;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.fides-notice-toggle:focus-visible {
|
|
410
|
+
outline: 1px solid ${theme.colors.black} !important;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
@media (min-width: 37.5rem) {
|
|
414
|
+
#fides-banner {
|
|
415
|
+
padding: 0.875rem 1rem !important;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
${theme.breakpoints.sm} {
|
|
420
|
+
div#fides-button-group .fides-banner-secondary-actions > button {
|
|
421
|
+
padding: 4px 16px !important
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
div#fides-banner-inner {
|
|
425
|
+
row-gap: 16px;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
#fides-banner {
|
|
429
|
+
padding: 0.875rem 1.25rem !important;
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
@media only screen and (min-width: 1650px) {
|
|
434
|
+
#fides-banner-inner {
|
|
435
|
+
flex-direction: row !important;
|
|
436
|
+
max-width: 1600px !important;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
#fides-banner-inner-container {
|
|
440
|
+
width: 72%;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
#fides-banner div#fides-button-group {
|
|
444
|
+
width: 28% !important;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
div#fides-banner-description {
|
|
448
|
+
margin-bottom: 0 !important;
|
|
449
|
+
}
|
|
450
|
+
}`;
|
package/dist/integrations/gtm.js
CHANGED
|
@@ -1,11 +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
5
|
optedOutExternalTracking = _ref.optedOutExternalTracking,
|
|
7
6
|
enablePartytown = _ref.enablePartytown;
|
|
8
|
-
|
|
7
|
+
scope.dataLayer ??= [];
|
|
9
8
|
scope.dataLayer.push({
|
|
10
9
|
'gtm.start': new Date().getTime(),
|
|
11
10
|
event: 'gtm.js'
|
|
@@ -22,7 +21,7 @@ export const initializeGTM = _ref => {
|
|
|
22
21
|
preview_env = '>m_auth=VrQuCDuWXkLlTwNHJYEKTg>m_preview=env-232';
|
|
23
22
|
}
|
|
24
23
|
const gtm = document.createElement('script');
|
|
25
|
-
gtm.src =
|
|
24
|
+
gtm.src = `https://www.googletagmanager.com/gtm.js?id=GTM-KTLK85W${preview_env}`;
|
|
26
25
|
if (enablePartytown) {
|
|
27
26
|
gtm.type = 'text/partytown';
|
|
28
27
|
} else {
|
|
@@ -20,8 +20,12 @@ export type TrackingIntegrationsSettings = {
|
|
|
20
20
|
* Use Partytown to load 3rd party scripts in a worker.
|
|
21
21
|
*/
|
|
22
22
|
enablePartytown?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Whether to use Fides (new implementation) or OneTrust
|
|
25
|
+
*/
|
|
26
|
+
isFidesEnabled?: boolean;
|
|
23
27
|
};
|
|
24
28
|
/**
|
|
25
29
|
* @see README.md for details and usage.
|
|
26
30
|
*/
|
|
27
|
-
export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, oneTrustScript, enablePartytown, }: TrackingIntegrationsSettings) => Promise<void>;
|
|
31
|
+
export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, oneTrustScript, enablePartytown, isFidesEnabled, }: TrackingIntegrationsSettings) => Promise<void>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { initializeFides } from './fides';
|
|
1
2
|
import { initializeGTM } from './gtm';
|
|
2
3
|
import { initializeOneTrust } from './onetrust';
|
|
3
4
|
import { initializePartytown } from './partytown';
|
|
@@ -11,7 +12,8 @@ export const initializeTrackingIntegrations = async _ref => {
|
|
|
11
12
|
scope = _ref.scope,
|
|
12
13
|
optedOutExternalTracking = _ref.optedOutExternalTracking,
|
|
13
14
|
oneTrustScript = _ref.oneTrustScript,
|
|
14
|
-
enablePartytown = _ref.enablePartytown
|
|
15
|
+
enablePartytown = _ref.enablePartytown,
|
|
16
|
+
isFidesEnabled = _ref.isFidesEnabled;
|
|
15
17
|
if (init) return; // Prevent multiple initializations
|
|
16
18
|
init = true;
|
|
17
19
|
if (enablePartytown) {
|
|
@@ -20,13 +22,16 @@ export const initializeTrackingIntegrations = async _ref => {
|
|
|
20
22
|
// Wait to allow any other post-hydration logic to run first
|
|
21
23
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
22
24
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
if (isFidesEnabled) {
|
|
26
|
+
initializeFides();
|
|
27
|
+
} else {
|
|
28
|
+
// Load in OneTrust's banner and wait for its `OptanonWrapper` callback
|
|
29
|
+
await initializeOneTrust({
|
|
30
|
+
scope,
|
|
31
|
+
environment,
|
|
32
|
+
scriptId: oneTrustScript
|
|
33
|
+
});
|
|
34
|
+
}
|
|
30
35
|
|
|
31
36
|
// Load GTM
|
|
32
37
|
initializeGTM({
|
|
@@ -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,190 @@ 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
|
+
|
|
77
|
+
#onetrust-policy,
|
|
78
|
+
#onetrust-policy-text {
|
|
79
|
+
margin: 0 !important;
|
|
80
|
+
font-size: 0.875rem !important;
|
|
81
|
+
line-height: 1.375rem !important;
|
|
82
|
+
text-align: center !important;
|
|
83
|
+
float: none !important;
|
|
84
|
+
}
|
|
85
|
+
#onetrust-policy-text a {
|
|
86
|
+
text-decoration: none;
|
|
87
|
+
line-height: 26px !important;
|
|
88
|
+
margin-left: 0 !important;
|
|
89
|
+
}
|
|
90
|
+
#onetrust-button-group-parent {
|
|
91
|
+
position: relative !important;
|
|
92
|
+
top: initial !important;
|
|
93
|
+
left: initial !important;
|
|
94
|
+
transform: initial !important;
|
|
95
|
+
width: 264px !important;
|
|
96
|
+
margin: 0 !important;
|
|
97
|
+
padding: 0 !important;
|
|
98
|
+
float: none !important;
|
|
99
|
+
}
|
|
100
|
+
#onetrust-button-group {
|
|
101
|
+
display: flex !important;
|
|
102
|
+
margin: 0 !important;
|
|
103
|
+
}
|
|
104
|
+
#onetrust-pc-btn-handler, #onetrust-accept-btn-handler {
|
|
105
|
+
min-width: initial !important;
|
|
106
|
+
padding: 0.375rem 1rem !important;
|
|
107
|
+
margin: 0 !important;
|
|
108
|
+
opacity: 1 !important;
|
|
109
|
+
border-radius: 2px !important;
|
|
110
|
+
line-height: 1.5 !important;
|
|
111
|
+
user-select: none !important;
|
|
112
|
+
font-size: 1rem !important;
|
|
113
|
+
}
|
|
114
|
+
#onetrust-pc-btn-handler:focus, #onetrust-accept-btn-handler:focus {
|
|
115
|
+
box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);
|
|
116
|
+
text-decoration: none !important;
|
|
117
|
+
outline: none !important;
|
|
118
|
+
}
|
|
119
|
+
#onetrust-pc-btn-handler{
|
|
120
|
+
color: var(--onetrust-brand-purple) !important;
|
|
121
|
+
border: 1px solid var(--onetrust-brand-purple)!important;
|
|
122
|
+
background: var(--onetrust-color-white) !important
|
|
123
|
+
}
|
|
124
|
+
#onetrust-accept-btn-handler {
|
|
125
|
+
color: var(--onetrust-color-white) !important;
|
|
126
|
+
background: var(--onetrust-brand-purple)!important;
|
|
127
|
+
margin-left: 1rem !important;
|
|
128
|
+
}
|
|
129
|
+
#onetrust-close-btn-container {
|
|
130
|
+
display: none !important;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.pc-logo {
|
|
134
|
+
display: none !important;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
#accept-recommended-btn-handler,
|
|
138
|
+
.ot-pc-refuse-all-handler,
|
|
139
|
+
.save-preference-btn-handler {
|
|
140
|
+
margin-left: 4px !important;
|
|
141
|
+
font-size: 14px !important;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
#accept-recommended-btn-handler:focus,
|
|
145
|
+
#onetrust-pc-sdk .ot-pc-refuse-all-handler:focus,
|
|
146
|
+
#onetrust-pc-sdk .save-preference-btn-handler:focus {
|
|
147
|
+
box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);
|
|
148
|
+
text-decoration: none !important;
|
|
149
|
+
outline: none !important;
|
|
150
|
+
opacity: 1 !important;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.ot-switch-label {
|
|
154
|
+
border: 1px solid var(--onetrust-color-gray-500) !important;
|
|
155
|
+
background-color: var(--onetrust-color-gray-500) !important;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.ot-switch-nob {
|
|
159
|
+
background: var(--onetrust-color-white) !important;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.ot-switch-inner:before {
|
|
163
|
+
background-color: var(--onetrust-brand-purple) !important;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.switch-checkbox:checked+.ot-switch-label .ot-switch-nob {
|
|
167
|
+
border-color: var(--onetrust-brand-purple) !important;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.ot-pc-footer-logo {
|
|
171
|
+
display: none !important;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
#onetrust-banner-sdk>.ot-sdk-container {
|
|
175
|
+
overflow: visible !important;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus + .ot-switch-label {
|
|
179
|
+
outline-color: var(--onetrust-brand-purple) !important;
|
|
180
|
+
}
|
|
181
|
+
#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus+.ot-switch-label {
|
|
182
|
+
outline-width: 3px !important;
|
|
183
|
+
outline-offset: 2px !important;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@media (max-width: 30rem) {
|
|
187
|
+
#accept-recommended-btn-handler,
|
|
188
|
+
.ot-pc-refuse-all-handler,
|
|
189
|
+
.save-preference-btn-handler {
|
|
190
|
+
width: 96% !important;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@media (min-width: 37.5rem) {
|
|
195
|
+
#onetrust-banner-sdk {
|
|
196
|
+
padding: 0.875rem 1rem !important;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
@media (min-width: 48rem) {
|
|
200
|
+
#onetrust-banner-sdk {
|
|
201
|
+
padding: 0.875rem 1.25rem !important;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
@media (min-width: 1650px) {
|
|
205
|
+
#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {
|
|
206
|
+
flex-direction: row !important;
|
|
207
|
+
justify-content: space-between !important;
|
|
208
|
+
}
|
|
209
|
+
#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {
|
|
210
|
+
flex-direction: row !important;
|
|
211
|
+
justify-content: space-between !important;
|
|
212
|
+
}
|
|
213
|
+
#onetrust-group-container {
|
|
214
|
+
margin-bottom: 0 !important;
|
|
215
|
+
}
|
|
216
|
+
#onetrust-button-group {
|
|
217
|
+
flex-direction: row !important;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
`;
|
|
@@ -30,14 +30,14 @@ export const partytownConfig = () => ({
|
|
|
30
30
|
* see https://partytown.builder.io/facebook-pixel#proxy-requests
|
|
31
31
|
*/
|
|
32
32
|
if (url.hostname === 'connect.facebook.net') {
|
|
33
|
-
return new URL(
|
|
33
|
+
return new URL(`partytown-fb${url.pathname}${url.search}`, location.origin);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
/*
|
|
37
37
|
* Proxy Reddit Pixel requests to resolve CORS issues
|
|
38
38
|
*/
|
|
39
39
|
if (url.hostname === 'www.redditstatic.com') {
|
|
40
|
-
return new URL(
|
|
40
|
+
return new URL(`partytown-reddit${url.pathname}${url.search}`, location.origin);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
/*
|
|
@@ -49,21 +49,21 @@ export const partytownConfig = () => ({
|
|
|
49
49
|
// Google Ads returns a redirect if path has a trailing slash
|
|
50
50
|
p = p.slice(0, -1);
|
|
51
51
|
}
|
|
52
|
-
return new URL(
|
|
52
|
+
return new URL(`partytown-googleads${p}${url.search}`, location.origin);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
/*
|
|
56
56
|
* Proxy Bing requests to resolve CORS issues
|
|
57
57
|
*/
|
|
58
58
|
if (url.hostname === 'bat.bing.com') {
|
|
59
|
-
return new URL(
|
|
59
|
+
return new URL(`partytown-bing${url.pathname}${url.search}`, location.origin);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
/*
|
|
63
63
|
* Proxy YouTube requests to resolve CORS issues
|
|
64
64
|
*/
|
|
65
65
|
if (url.hostname === 'www.youtube.com') {
|
|
66
|
-
return new URL(
|
|
66
|
+
return new URL(`partytown-youtube${url.pathname}${url.search}`, location.origin);
|
|
67
67
|
}
|
|
68
68
|
return url;
|
|
69
69
|
}
|
|
@@ -3,7 +3,7 @@ import { partytownConfig } from './config';
|
|
|
3
3
|
import { gtmDoubleFrame } from './gtmDoubleFrame';
|
|
4
4
|
|
|
5
5
|
// Encapsulate to avoid collision of global vars aliased in minification.
|
|
6
|
-
const encapsulate = js =>
|
|
6
|
+
const encapsulate = js => `(() => {${js}})();`;
|
|
7
7
|
export function initializePartytown() {
|
|
8
8
|
const ptScript = document.createElement('script');
|
|
9
9
|
ptScript.innerHTML = encapsulate(partytownSnippet(partytownConfig()));
|
|
@@ -19,6 +19,6 @@ export function initializePartytown() {
|
|
|
19
19
|
* restore the style (and remove the added whitespace).
|
|
20
20
|
*/
|
|
21
21
|
const styles = document.createElement('style');
|
|
22
|
-
styles.innerText =
|
|
22
|
+
styles.innerText = `body > img[aria-hidden=true] { position: absolute; }`;
|
|
23
23
|
document.head.appendChild(styles);
|
|
24
24
|
}
|
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.47
|
|
4
|
+
"version": "1.0.47",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@qwik.dev/partytown": "0.11.0"
|
|
@@ -12,6 +12,9 @@
|
|
|
12
12
|
"license": "MIT",
|
|
13
13
|
"main": "./dist/index.js",
|
|
14
14
|
"module": "./dist/index.js",
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"@codecademy/gamut-styles": "*"
|
|
17
|
+
},
|
|
15
18
|
"publishConfig": {
|
|
16
19
|
"access": "public"
|
|
17
20
|
},
|