@codecademy/tracking 1.0.36-alpha.14a4697e2e.0 → 1.0.36-alpha.28eb0ac54d.0

package/dist/integrations/index.js

@@ -1,5 +1,8 @@
 import { initializeGTM } from './gtm';
 import { initializeOneTrust } from './onetrust';
+import { initializePartytown } from './partytown';
+let init = false; // For preventing multiple initializations
+
 /**
  * @see README.md for details and usage.
  */
@@ -9,17 +12,25 @@ export const initializeTrackingIntegrations = async _ref => {
     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));
+  if (init) {
+    return;
+  }
+  init = true;
+  if (partytown) {
+    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,

package/dist/integrations/partytown.d.ts

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

package/dist/integrations/partytown.js

@@ -0,0 +1,74 @@
+import { partytownSnippet } from '@builder.io/partytown/integration';
+const ptConfig = () => ({
+  forward: ['dataLayer.push',
+  // for GTM
+  'fbq',
+  // for Facebook Pixel
+  '_hsq.push' // for Hubspot
+  ],
+  lib: '/partytown/',
+  logScriptExecution: true,
+  loadScriptsOnMainThread: [/googleads/, /bing/, /pepperjam/, /snap/, /lightboxcdn/],
+  resolveUrl(url, location, type) {
+    /*
+     * This function runs in a worker and cannot access vars that might seem
+     * in scope in this file.
+     */
+
+    if (url.hostname === 'www.googletagmanager.com' && type === 'iframe') {
+      /*
+       * 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.
+       */
+      new BroadcastChannel('gtm-iframe').postMessage(url.href);
+      return new URL('', 'http:.');
+    }
+    if (url.hostname === 'connect.facebook.net') {
+      /*
+       * Proxy Pacebook Pixel requests to resolve cors issues
+       * see https://partytown.builder.io/facebook-pixel#proxy-requests
+       */
+      return new URL(`partytown-fb${url.pathname}${url.search}`, location.origin);
+    }
+    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;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/tracking",
   "description": "Tracking library for Codecademy",
-  "version": "1.0.36-alpha.14a4697e2e.0",
+  "version": "1.0.36-alpha.28eb0ac54d.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "files": [
     "dist/**"
@@ -13,5 +13,5 @@
     "access": "public"
   },
   "repository": "git@github.com:codecademy-engineering/mono.git",
-  "gitHead": "77fa7f8fb87c1f5543a976166d7764b962fd5c23"
+  "gitHead": "da642417f43efaad84a791ea16daac85c3330732"
 }