@codecademy/tracking 1.0.36-alpha.f16a34b536.0 → 1.0.36-alpha.fa0ece7093.0

package/dist/integrations/gtm.d.ts

@@ -3,7 +3,7 @@ export type GTMSettings = {
     environment: string;
     scope: TrackingWindow;
     optedOutExternalTracking?: boolean;
-    partytown?: boolean;
+    enablePartytown?: boolean;
 };
 export declare const OPT_OUT_DATALAYER_VAR = "user_opted_out_external_tracking";
-export declare const initializeGTM: ({ scope, environment, optedOutExternalTracking, partytown, }: GTMSettings) => void;
+export declare const initializeGTM: ({ scope, environment, optedOutExternalTracking, enablePartytown, }: GTMSettings) => void;

package/dist/integrations/gtm.js

@@ -3,7 +3,7 @@ export const initializeGTM = _ref => {
   let scope = _ref.scope,
     environment = _ref.environment,
     optedOutExternalTracking = _ref.optedOutExternalTracking,
-    partytown = _ref.partytown;
+    enablePartytown = _ref.enablePartytown;
   scope.dataLayer ??= [];
   scope.dataLayer.push({
     'gtm.start': new Date().getTime(),
@@ -22,13 +22,13 @@ export const initializeGTM = _ref => {
   }
   const gtm = document.createElement('script');
   gtm.src = `https://www.googletagmanager.com/gtm.js?id=GTM-KTLK85W${preview_env}`;
-  if (partytown) {
+  if (enablePartytown) {
     gtm.type = 'text/partytown';
   } else {
     gtm.async = true;
   }
   document.getElementsByTagName('head')[0].appendChild(gtm);
-  if (partytown) {
+  if (enablePartytown) {
     window.dispatchEvent(new CustomEvent('ptupdate'));
   }
 };

package/dist/integrations/index.d.ts

@@ -17,12 +17,11 @@ export type TrackingIntegrationsSettings = {
      */
     oneTrustScript?: string;
     /**
-     * Use partytown to load scripts.
-     * next.config.js experimental: { nextScriptWorkers } must be set to true.
+     * Use Partytown to load 3rd party scripts in a worker.
      */
-    partytown?: boolean;
+    enablePartytown?: boolean;
 };
 /**
  * @see README.md for details and usage.
  */
-export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, oneTrustScript, partytown, }: TrackingIntegrationsSettings) => Promise<void>;
+export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, oneTrustScript, enablePartytown, }: TrackingIntegrationsSettings) => Promise<void>;

package/dist/integrations/index.js

@@ -1,5 +1,8 @@
 import { initializeGTM } from './gtm';
 import { initializeOneTrust } from './onetrust';
+import { initializePartytown } from './partytown';
+let init = false;
+
 /**
  * @see README.md for details and usage.
  */
@@ -8,22 +11,30 @@ export const initializeTrackingIntegrations = async _ref => {
     scope = _ref.scope,
     optedOutExternalTracking = _ref.optedOutExternalTracking,
     oneTrustScript = _ref.oneTrustScript,
-    partytown = _ref.partytown;
-  // 1. Wait to allow any other post-hydration logic to run first (not as critical when using partytown)
-  await new Promise(resolve => setTimeout(resolve, partytown ? 100 : 1000));
+    enablePartytown = _ref.enablePartytown;
+  if (init) {
+    return; // Prevent multiple initializations
+  }
+  init = true;
+  if (enablePartytown) {
+    initializePartytown();
+  } else {
+    // Wait to allow any other post-hydration logic to run first
+    await new Promise(resolve => setTimeout(resolve, 1000));
+  }
 
-  // 2. Load in OneTrust's banner and wait for its `OptanonWrapper` callback
+  // Load in OneTrust's banner and wait for its `OptanonWrapper` callback
   await initializeOneTrust({
     scope,
     environment,
     scriptId: oneTrustScript
   });
 
-  // 3. Load GTM
+  // Load GTM
   initializeGTM({
     scope,
     environment,
     optedOutExternalTracking,
-    partytown
+    enablePartytown
   });
 };

package/dist/integrations/partytown/config.d.ts

@@ -0,0 +1,2 @@
+import { PartytownConfig } from '@builder.io/partytown/integration';
+export declare const partytownConfig: () => PartytownConfig;

package/dist/integrations/partytown/config.js

@@ -0,0 +1,42 @@
+export const partytownConfig = () => ({
+  forward: ['dataLayer.push',
+  // for GTM
+  'fbq',
+  // for Facebook Pixel
+  '_hsq.push' // for Hubspot
+  ],
+  lib: '/partytown/',
+  loadScriptsOnMainThread: [/googleads/,
+  // Google Ads
+  /bing/,
+  // Bing UET
+  /pepperjam/,
+  // Pepperjam
+  /snap/,
+  // Snap Pixel
+  /lightboxcdn/ // Digioh
+  ],
+  /*
+   * This function runs in a worker and cannot access vars that might seem to
+   * be in scope in this file.
+   */
+  resolveUrl(url, location, type) {
+    /*
+     * Block Partytown from handling GTM iframe and return href to main thread.
+     * See gtm.ts for explanation.
+     */
+    if (url.hostname === 'www.googletagmanager.com' && type === 'iframe') {
+      new BroadcastChannel('gtm-iframe').postMessage(url.href);
+      return new URL('', 'https:.');
+    }
+
+    /*
+     * Proxy Facebook Pixel requests to resolve CORS issues
+     * see https://partytown.builder.io/facebook-pixel#proxy-requests
+     */
+    if (url.hostname === 'connect.facebook.net') {
+      return new URL(`partytown-fb${url.pathname}${url.search}`, location.origin);
+    }
+    return url;
+  }
+});

package/dist/integrations/partytown/gtm.d.ts

@@ -0,0 +1 @@
+export declare function createGTMIframeOnBroadcast(): void;

package/dist/integrations/partytown/gtm.js

@@ -0,0 +1,41 @@
+/*
+ * GTM tries to create its own service worker, and it tries to load the script
+ * for creating that worker in an iframe. When a script within Partytown tries
+ * to create an iframe, Partytown overrides this behavior by making a request
+ * for the iframe src using fetch from a worker. This is typically good because
+ * it keeps the request off the main thread. However, fetches made from within
+ * a worker are more strict about CORS than requests natively made by iframe
+ * elements in the DOM. Google does not include a CORS response header for this
+ * particular iframe src. A typical workaround for this is to use a reverse
+ * proxy (which is what we do for Facebook Pixel requests), but that doesn't
+ * work for this iframe because the script being loaded within depends the
+ * iframe having a certain origin.
+ *
+ * The alternate workaround used here is to effectively block Partytown when it
+ * tries to resolve the iframe url (see resolveUrl in config.ts) and to send
+ * that url back to the main thread via BroadcastChannel so that a regular
+ * iframe can be created, just as GTM would have done outside of Partytown.
+ * With this approach, we still get the benefit of having Partytown handle the
+ * bulk of requests related to GTM.
+ */
+
+const hiddenIframeProps = {
+  height: '0',
+  width: '0',
+  style: 'display: none; visibility: hidden;'
+};
+export function createGTMIframeOnBroadcast() {
+  new BroadcastChannel('gtm-iframe').onmessage = _ref => {
+    let data = _ref.data;
+    // This outer/inner approach matches the pattern GTM would normally use.
+
+    const outerIframe = document.createElement('iframe');
+    Object.assign(outerIframe, hiddenIframeProps);
+    document.body.appendChild(outerIframe);
+    const outerIframeDoc = outerIframe.contentWindow.document;
+    const innerIframe = outerIframeDoc.createElement('iframe');
+    Object.assign(innerIframe, hiddenIframeProps);
+    innerIframe.src = data;
+    outerIframeDoc.body.appendChild(innerIframe);
+  };
+}

package/dist/integrations/partytown/index.d.ts

@@ -0,0 +1 @@
+export declare function initializePartytown(): void;

package/dist/integrations/partytown/index.js

@@ -0,0 +1,15 @@
+import { partytownSnippet } from '@builder.io/partytown/integration';
+import { partytownConfig } from './config';
+import { createGTMIframeOnBroadcast } from './gtm';
+
+/*
+ * Encapsulation is necessary to avoid collision of global vars that are
+ * aliased in minification.
+ */
+const encapsulate = js => `(() => {${js}})();`;
+export function initializePartytown() {
+  createGTMIframeOnBroadcast();
+  const ptScript = document.createElement('script');
+  ptScript.innerHTML = encapsulate(partytownSnippet(partytownConfig()));
+  document.head.appendChild(ptScript);
+}

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@codecademy/tracking",
   "description": "Tracking library for Codecademy",
-  "version": "1.0.36-alpha.f16a34b536.0",
+  "version": "1.0.36-alpha.fa0ece7093.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
+  "dependencies": {
+    "@builder.io/partytown": "^0.10.2"
+  },
   "files": [
     "dist/**"
   ],
@@ -13,5 +16,5 @@
     "access": "public"
   },
   "repository": "git@github.com:codecademy-engineering/mono.git",
-  "gitHead": "65291030ed26da2ed982b126479488e57b547f85"
+  "gitHead": "5ffbb7aac08439aa2488aa0c29011e93ee49f7e3"
 }