@codecademy/tracking 1.2.0-alpha.ec7903070d.0 → 1.2.1-alpha.57634addfa.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/README.md +1 -1
- package/dist/integrations/fides.js +4 -0
- package/dist/integrations/index.d.ts +1 -9
- package/dist/integrations/index.js +2 -14
- package/dist/integrations/types.d.ts +0 -3
- package/package.json +1 -1
- package/dist/integrations/onetrust.d.ts +0 -7
- package/dist/integrations/onetrust.js +0 -34
package/README.md
CHANGED
|
@@ -79,7 +79,7 @@ Starts the initialization process for our third-party integrations.
|
|
|
79
79
|
Integrations are loaded in an intentionally layered manner for CCPA/GDPR compliance:
|
|
80
80
|
|
|
81
81
|
1. Wait 1000ms to allow any other post-hydration logic to run first
|
|
82
|
-
2. Load
|
|
82
|
+
2. Load Fides for consent management
|
|
83
83
|
3. Load GTM
|
|
84
84
|
|
|
85
85
|
```ts
|
|
@@ -18,6 +18,10 @@ const importFides = async () => {
|
|
|
18
18
|
if (oldAmd) {
|
|
19
19
|
win.define.amd = undefined;
|
|
20
20
|
}
|
|
21
|
+
window.fides_overrides = {
|
|
22
|
+
ot_fides_mapping
|
|
23
|
+
};
|
|
24
|
+
|
|
21
25
|
// Fides gets stored on the window object
|
|
22
26
|
await import(/* webpackIgnore: true */"https://skillsoft-codecademy.fides-cdn.ethyca.com/fides.js?property_id=".concat(PROPERTY_ID, "&ot_fides_mapping=").concat(ot_fides_mapping));
|
|
23
27
|
if (oldAmd) {
|
|
@@ -12,20 +12,12 @@ export type TrackingIntegrationsSettings = {
|
|
|
12
12
|
* Whether user has opted out or is excluded from external tracking
|
|
13
13
|
*/
|
|
14
14
|
optedOutExternalTracking?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* id for the one trust script being used, defaults to the script for `www.codecademy.com`
|
|
17
|
-
*/
|
|
18
|
-
oneTrustScript?: string;
|
|
19
15
|
/**
|
|
20
16
|
* Use Partytown to load 3rd party scripts in a worker.
|
|
21
17
|
*/
|
|
22
18
|
enablePartytown?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Whether to use Fides (new implementation) or OneTrust
|
|
25
|
-
*/
|
|
26
|
-
isFidesEnabled?: boolean;
|
|
27
19
|
};
|
|
28
20
|
/**
|
|
29
21
|
* @see README.md for details and usage.
|
|
30
22
|
*/
|
|
31
|
-
export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking,
|
|
23
|
+
export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, enablePartytown, }: TrackingIntegrationsSettings) => Promise<void>;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { initializeFides } from './fides';
|
|
2
2
|
import { initializeGTM } from './gtm';
|
|
3
|
-
import { initializeOneTrust } from './onetrust';
|
|
4
3
|
import { initializePartytown } from './partytown';
|
|
5
4
|
let init = false;
|
|
6
5
|
|
|
@@ -11,9 +10,7 @@ export const initializeTrackingIntegrations = async _ref => {
|
|
|
11
10
|
let environment = _ref.environment,
|
|
12
11
|
scope = _ref.scope,
|
|
13
12
|
optedOutExternalTracking = _ref.optedOutExternalTracking,
|
|
14
|
-
|
|
15
|
-
enablePartytown = _ref.enablePartytown,
|
|
16
|
-
isFidesEnabled = _ref.isFidesEnabled;
|
|
13
|
+
enablePartytown = _ref.enablePartytown;
|
|
17
14
|
if (init) return; // Prevent multiple initializations
|
|
18
15
|
init = true;
|
|
19
16
|
if (enablePartytown) {
|
|
@@ -22,16 +19,7 @@ export const initializeTrackingIntegrations = async _ref => {
|
|
|
22
19
|
// Wait to allow any other post-hydration logic to run first
|
|
23
20
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
24
21
|
}
|
|
25
|
-
|
|
26
|
-
await 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
|
-
}
|
|
22
|
+
await initializeFides();
|
|
35
23
|
|
|
36
24
|
// Load GTM
|
|
37
25
|
initializeGTM({
|
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.2.
|
|
4
|
+
"version": "1.2.1-alpha.57634addfa.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@qwik.dev/partytown": "0.11.0"
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Onetrust script ID for `www.codecademy.com`, other domains require passing in a specific script ID
|
|
3
|
-
*/
|
|
4
|
-
const DEFAULT_SCRIPT_ID = 'cfa7b129-f37b-4f5a-9991-3f75ba7b85fb';
|
|
5
|
-
export const initializeOneTrust = async _ref => {
|
|
6
|
-
let environment = _ref.environment,
|
|
7
|
-
scope = _ref.scope,
|
|
8
|
-
_ref$scriptId = _ref.scriptId,
|
|
9
|
-
scriptId = _ref$scriptId === void 0 ? DEFAULT_SCRIPT_ID : _ref$scriptId;
|
|
10
|
-
const script = document.createElement('script');
|
|
11
|
-
script.setAttribute('async', 'true');
|
|
12
|
-
script.setAttribute('src', 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js');
|
|
13
|
-
script.setAttribute('type', 'text/javascript');
|
|
14
|
-
script.setAttribute('data-domain-script', "".concat(scriptId).concat(environment === 'production' ? '' : '-test'));
|
|
15
|
-
document.body.appendChild(script);
|
|
16
|
-
const style = document.createElement('style');
|
|
17
|
-
style.textContent = rawStyles;
|
|
18
|
-
document.body.appendChild(style);
|
|
19
|
-
return new Promise(resolve => {
|
|
20
|
-
scope.OptanonWrapper = () => {
|
|
21
|
-
var _scope$dataLayer, _script$parentNode;
|
|
22
|
-
(_scope$dataLayer = scope.dataLayer) !== null && _scope$dataLayer !== void 0 ? _scope$dataLayer : scope.dataLayer = [];
|
|
23
|
-
scope.dataLayer.push({
|
|
24
|
-
event: 'OneTrustGroupsUpdated'
|
|
25
|
-
});
|
|
26
|
-
resolve();
|
|
27
|
-
(_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
|
|
28
|
-
};
|
|
29
|
-
});
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
// For now, these three values duplicate theme colors from gamut-styles
|
|
33
|
-
// We don't want to take a full dependency on that package here...
|
|
34
|
-
const rawStyles = "\n:root {\n --onetrust-brand-purple: #3A10E5;\n --onetrust-color-gray-500: #828285;\n --onetrust-color-white: #fff;\n}\n\n#onetrust-banner-sdk {\n padding: 1rem !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container {\n width: 100% !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n max-width: 1436px !important;\n margin: 0 auto !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row:after {\n content: none !important;\n}\n#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n max-width: 1436px !important;\n margin: 0 auto !important;\n}\n#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row:after {\n content: none !important;\n}\n#onetrust-group-container {\n display: flex !important;\n justify-content: center;\n float: none !important;\n width: 100% !important;\n max-width: 1148px !important;\n margin-left: 0 !important;\n margin-bottom: 0.625rem !important;\n}\n\n#onetrust-policy,\n#onetrust-policy-text {\n margin: 0 !important;\n font-size: 0.875rem !important;\n line-height: 1.375rem !important;\n text-align: center !important;\n float: none !important;\n}\n#onetrust-policy-text a {\n text-decoration: none;\n line-height: 26px !important;\n margin-left: 0 !important;\n}\n#onetrust-button-group-parent {\n position: relative !important;\n top: initial !important;\n left: initial !important;\n transform: initial !important;\n width: 264px !important;\n margin: 0 !important;\n padding: 0 !important;\n float: none !important;\n}\n#onetrust-button-group {\n display: flex !important;\n margin: 0 !important;\n}\n#onetrust-pc-btn-handler, #onetrust-accept-btn-handler {\n min-width: initial !important;\n padding: 0.375rem 1rem !important;\n margin: 0 !important;\n opacity: 1 !important;\n border-radius: 2px !important;\n line-height: 1.5 !important;\n user-select: none !important;\n font-size: 1rem !important;\n}\n#onetrust-pc-btn-handler:focus, #onetrust-accept-btn-handler:focus {\n box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);\n text-decoration: none !important;\n outline: none !important;\n}\n#onetrust-pc-btn-handler{\n color: var(--onetrust-brand-purple) !important;\n border: 1px solid var(--onetrust-brand-purple)!important;\n background: var(--onetrust-color-white) !important\n}\n#onetrust-accept-btn-handler {\n color: var(--onetrust-color-white) !important;\n background: var(--onetrust-brand-purple)!important;\n margin-left: 1rem !important;\n}\n#onetrust-close-btn-container {\n display: none !important;\n}\n\n.pc-logo {\n display: none !important;\n}\n\n#accept-recommended-btn-handler,\n.ot-pc-refuse-all-handler,\n.save-preference-btn-handler {\n margin-left: 4px !important;\n font-size: 14px !important;\n}\n\n#accept-recommended-btn-handler:focus,\n#onetrust-pc-sdk .ot-pc-refuse-all-handler:focus,\n#onetrust-pc-sdk .save-preference-btn-handler:focus {\n box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);\n text-decoration: none !important;\n outline: none !important;\n opacity: 1 !important;\n}\n\n.ot-switch-label {\n border: 1px solid var(--onetrust-color-gray-500) !important;\n background-color: var(--onetrust-color-gray-500) !important;\n}\n\n.ot-switch-nob {\n background: var(--onetrust-color-white) !important;\n}\n\n.ot-switch-inner:before {\n background-color: var(--onetrust-brand-purple) !important;\n}\n\n.switch-checkbox:checked+.ot-switch-label .ot-switch-nob {\n border-color: var(--onetrust-brand-purple) !important;\n}\n\n.ot-pc-footer-logo {\n display: none !important;\n}\n\n#onetrust-banner-sdk>.ot-sdk-container {\n overflow: visible !important;\n}\n\n#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus + .ot-switch-label {\n \toutline-color: var(--onetrust-brand-purple) !important;\n}\n#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus+.ot-switch-label {\n outline-width: 3px !important;\n outline-offset: 2px !important;\n}\n\n@media (max-width: 30rem) {\n #accept-recommended-btn-handler,\n .ot-pc-refuse-all-handler,\n .save-preference-btn-handler {\n width: 96% !important;\n }\n}\n\n@media (min-width: 37.5rem) {\n #onetrust-banner-sdk {\n padding: 0.875rem 1rem !important;\n }\n}\n@media (min-width: 48rem) {\n #onetrust-banner-sdk {\n padding: 0.875rem 1.25rem !important;\n }\n}\n@media (min-width: 1650px) {\n #onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {\n flex-direction: row !important;\n justify-content: space-between !important;\n }\n #onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {\n flex-direction: row !important;\n justify-content: space-between !important;\n }\n #onetrust-group-container {\n margin-bottom: 0 !important;\n }\n #onetrust-button-group {\n flex-direction: row !important;\n }\n}\n";
|