@codecademy/tracking 1.0.36-alpha.fcc420c4e3.0 → 1.0.36

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,14 @@ 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) {
+    // Let Partytown know that a new script has been added.
     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,7 +1,7 @@
 import { initializeGTM } from './gtm';
 import { initializeOneTrust } from './onetrust';
 import { initializePartytown } from './partytown';
-let init = false; // For preventing multiple initializations
+let init = false;
 
 /**
  * @see README.md for details and usage.
@@ -11,12 +11,10 @@ export const initializeTrackingIntegrations = async _ref => {
     scope = _ref.scope,
     optedOutExternalTracking = _ref.optedOutExternalTracking,
     oneTrustScript = _ref.oneTrustScript,
-    partytown = _ref.partytown;
-  if (init) {
-    return;
-  }
+    enablePartytown = _ref.enablePartytown;
+  if (init) return; // Prevent multiple initializations
   init = true;
-  if (partytown) {
+  if (enablePartytown) {
     initializePartytown();
   } else {
     // Wait to allow any other post-hydration logic to run first
@@ -35,6 +33,6 @@ export const initializeTrackingIntegrations = async _ref => {
     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,36 @@
+export const partytownConfig = () => ({
+  forward: ['dataLayer.push',
+  // for GTM
+  'fbq',
+  // for Facebook Pixel
+  '_hsq.push' // for Hubspot
+  ],
+  lib: '/partytown/',
+  // path for loading from static asset CMS
+  loadScriptsOnMainThread: [/googleads/,
+  // Google Ads
+  /bing/,
+  // Bing UET
+  /pepperjam/,
+  // Pepperjam
+  /snap/,
+  // Snap Pixel
+  /lightboxcdn/ // Digioh
+  ],
+  // This function runs in a worker and can't access other vars in this file.
+  resolveUrl(url, location, type) {
+    // Block GTM from trying to add its own service worker via iframe.
+    if (url.hostname === 'www.googletagmanager.com' && type === 'iframe') {
+      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/index.js

@@ -0,0 +1,10 @@
+import { partytownSnippet } from '@builder.io/partytown/integration';
+import { partytownConfig } from './config';
+
+// Encapsulate to avoid collision of global vars aliased in minification.
+const encapsulate = js => `(() => {${js}})();`;
+export function initializePartytown() {
+  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.fcc420c4e3.0",
+  "version": "1.0.36",
   "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": "4c4b9f0e464b24a3e5aa4c17cde7437e3c2424e9"
+  "gitHead": "5eef9730521dc255c8d8260a9c25978a20e06e68"
 }

package/dist/integrations/partytown.js

@@ -1,66 +0,0 @@
-import { partytownSnippet } from '@builder.io/partytown/integration';
-const ptConfig = () => ({
-  forward: [['dataLayer.push', {
-    preserveBehavior: true
-  }], ['fbq', {
-    preserveBehavior: true
-  }]],
-  lib: '/partytown/',
-  logScriptExecution: true,
-  loadScriptsOnMainThread: [/googleads/, /bing/, /pepperjam/, /facebook/, /snap/, /lightboxcdn/],
-  resolveUrl(url, _, type) {
-    /*
-     * This function runs in a worker and cannot access vars that might seem
-     * in scope in this file.
-     */
-
-    /*
-     * GTM tries to create an iframe that loads a script to create a GTM
-     * service worker. When scripts within Partytown try to create an iframe,
-     * Partytown's proxy behavior is to make the request for the iframe src
-     * using fetch from a worker. This is typically better than normal iframe
-     * loading behavior because it keeps the request off the main thread.
-     * However, fetch in a worker is more strict about cors than requests
-     * natively made by iframe elements. A fetch for this particular iframe
-     * src would fail becuase Google does not include a cors response header.
-     * In some cases with Partytown, we might work around this with a reverse
-     * proxy, but that also doesn't work in this case because the GTM code in
-     * this iframe needs to create a service worker within an iframe that has
-     * a certain origin. The alternate workaround here is to effectively
-     * block Partytown when it tries to resolve the iframe url 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 normally done.
-     */
-    if (url.hostname === 'www.googletagmanager.com' && type === 'iframe') {
-      new BroadcastChannel('gtm-iframe').postMessage(url.href);
-      return new URL('', 'http:.');
-    }
-    return url;
-  }
-});
-const encapsulate = js => `(() => {${js}})();`;
-export function initializePartytown() {
-  new BroadcastChannel('gtm-iframe').onmessage = _ref => {
-    let iframeSrc = _ref.data;
-    // This 2 layer approach matches the way GTM would try to setup the iframe.
-    const outer = hiddenIframe(document);
-    document.body.appendChild(outer);
-    const inner = hiddenIframe(outer.contentWindow.document, iframeSrc);
-    outer.appendChild(inner);
-  };
-  const ptScript = document.createElement('script');
-  // encapsulation is necessary to avoid collision of global minified vars
-  ptScript.innerHTML = encapsulate(partytownSnippet(ptConfig()));
-  document.head.appendChild(ptScript);
-}
-function hiddenIframe(d, src) {
-  const iframe = d.createElement('iframe');
-  // These attributes match what GTM would use when it creates an iframe.
-  iframe.height = '0';
-  iframe.width = '0';
-  iframe.setAttribute('style', 'display: none; visibility: hidden;');
-  if (src) {
-    iframe.src = src;
-  }
-  return iframe;
-}