@codecademy/tracking 1.0.2 → 1.0.3-alpha.37044bcdd.0

package/dist/index.js

@@ -1,3 +1,595 @@
-export * from './integrations';
-export * from './events';
-export {};
+/**
+ * @returns Whether the site is running both in ChromeOS and in PWA mode.
+ */
+const isChromeOSPWA = () => isChromeOS() && 'getDigitalGoodsService' in window && // https://stackoverflow.com/questions/41742390/javascript-to-check-if-pwa-or-mobile-web
+window.matchMedia('(display-mode: standalone)').matches;
+/**
+ * @returns Whether the site is running in ChromeOS
+ */
+
+const isChromeOS = () => typeof navigator !== 'undefined' && // https://stackoverflow.com/questions/29657165/detecting-chrome-os-with-javascript
+/\bCrOS\b/.test(navigator.userAgent);
+var ClientTypes;
+
+(function (ClientTypes) {
+  ClientTypes["PWA"] = "pwa";
+  ClientTypes["Default"] = "default";
+})(ClientTypes || (ClientTypes = {}));
+
+const getClientType = () => isChromeOSPWA() ? ClientTypes.PWA : ClientTypes.Default;
+
+const conditionallyLoadAnalytics = ({
+  analytics,
+  destinationPreferences,
+  identifyPreferences,
+  user,
+  writeKey
+}) => {
+  if (analytics.initialize) {
+    return;
+  }
+
+  analytics.load(writeKey, {
+    integrations: destinationPreferences
+  });
+  analytics.page();
+
+  if (user) {
+    const identifyParams = {
+      email: user.email,
+      client: getClientType()
+    };
+    analytics.identify(user.id, identifyParams, {
+      integrations: identifyPreferences
+    });
+  }
+};
+
+const knownFetchFailures = ['Failed to fetch', 'Load failed', 'NetworkError when attempting to fetch resource', 'Resource blocked by content blocker'];
+const fetchDestinationsForWriteKey = async ({
+  writeKey,
+  onError
+}) => {
+  const filteredOnError = error => {
+    if (!knownFetchFailures.some(failure => error.includes(failure))) {
+      onError(error);
+    }
+  };
+
+  try {
+    const response = await fetch(`https://cdn.segment.com/v1/projects/${writeKey}/integrations`);
+
+    if (!response.ok) {
+      filteredOnError(`Failed to fetch integrations for write key ${writeKey}: HTTP ${response.status} ${response.statusText}`);
+      return [];
+    }
+
+    const destinations = await response.json();
+
+    for (const destination of destinations) {
+      destination.id = destination.creationName;
+      delete destination.creationName;
+    }
+
+    return destinations;
+  } catch (error) {
+    filteredOnError(`Unknown error fetching Segment destinations for write key ${writeKey}: ${error}`);
+    return [];
+  }
+};
+
+/**
+ * @see https://www.notion.so/codecademy/GDPR-Compliance-141ebcc7ffa542daa0da56e35f482b41
+ */
+var Consent;
+
+(function (Consent) {
+  Consent["Functional"] = "C0003";
+  Consent["Performance"] = "C0002";
+  Consent["StrictlyNecessary"] = "C0001";
+  Consent["Targeting"] = "C0004";
+})(Consent || (Consent = {}));
+
+const OPT_OUT_DATALAYER_VAR = 'user_opted_out_external_tracking';
+const getConsentDecision = ({
+  scope,
+  optedOutExternalTracking
+}) => {
+  let consentDecision = [];
+
+  if (typeof scope.OnetrustActiveGroups === 'string') {
+    consentDecision = scope.OnetrustActiveGroups.split(',').filter(Boolean);
+  } else if (scope.OnetrustActiveGroups) {
+    consentDecision = scope.OnetrustActiveGroups;
+  }
+
+  if (optedOutExternalTracking) {
+    var _scope$dataLayer;
+
+    /**
+     * If user has already opted out of everything but the essentials
+     * don't force them to consent to Functional & Performance trackers
+     */
+    if (consentDecision.length > 2) {
+      consentDecision = [Consent.StrictlyNecessary, Consent.Functional, Consent.Performance];
+    }
+
+    (_scope$dataLayer = scope.dataLayer) != null ? _scope$dataLayer : scope.dataLayer = [];
+    scope.dataLayer.push({
+      [OPT_OUT_DATALAYER_VAR]: true
+    });
+  }
+
+  return consentDecision;
+};
+
+const targetingCategories = ['Advertising', 'Attribution', 'Email Marketing'];
+const performanceCategories = ['Analytics', 'Customer Success', 'Surveys', 'Heatmaps & Recording'];
+const functionalCategories = ['SMS & Push Notifications'];
+/**
+ * @see https://www.notion.so/codecademy/GDPR-Compliance-141ebcc7ffa542daa0da56e35f482b41
+ */
+
+const mapDestinations = ({
+  consentDecision: _consentDecision = [Consent.StrictlyNecessary],
+  destinations
+}) => {
+  const destinationPreferences = Object.assign({
+    'Segment.io': _consentDecision.includes(Consent.Functional)
+  }, ...destinations.map(dest => {
+    if (targetingCategories.includes(dest.category)) {
+      return {
+        [dest.id]: _consentDecision.includes(Consent.Targeting)
+      };
+    }
+
+    if (performanceCategories.includes(dest.category)) {
+      return {
+        [dest.id]: _consentDecision.includes(Consent.Performance)
+      };
+    }
+
+    if (functionalCategories.includes(dest.category)) {
+      return {
+        [dest.id]: _consentDecision.includes(Consent.Functional)
+      };
+    }
+
+    return {
+      [dest.id]: true
+    };
+  }));
+  const identifyPreferences = {
+    All: false,
+    FullStory: _consentDecision.includes(Consent.Performance),
+    Hindsight: _consentDecision.includes(Consent.Targeting),
+    UserLeap: _consentDecision.includes(Consent.Performance)
+  };
+  return {
+    destinationPreferences,
+    identifyPreferences
+  };
+};
+
+const initializeOneTrust = async ({
+  production,
+  scope
+}) => {
+  const script = document.createElement('script');
+  script.setAttribute('async', 'true');
+  script.setAttribute('src', 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js');
+  script.setAttribute('type', 'text/javascript');
+  script.setAttribute('data-domain-script', `cfa7b129-f37b-4f5a-9991-3f75ba7b85fb${production ? '' : '-test'}`);
+  document.body.appendChild(script);
+  const style = document.createElement('style');
+  style.textContent = rawStyles;
+  document.body.appendChild(style);
+  return new Promise(resolve => {
+    scope.OptanonWrapper = () => {
+      var _scope$dataLayer, _script$parentNode;
+
+      (_scope$dataLayer = scope.dataLayer) != null ? _scope$dataLayer : scope.dataLayer = [];
+      scope.dataLayer.push({
+        event: 'OneTrustGroupsUpdated'
+      });
+      resolve();
+      (_script$parentNode = script.parentNode) == null ? void 0 : _script$parentNode.removeChild(script);
+    };
+  });
+}; // For now, these three values duplicate theme colors from gamut-styles
+// We don't want to take a full dependency on that package here...
+
+const rawStyles = `
+:root {
+  --onetrust-brand-purple: #3A10E5;
+  --onetrust-color-gray-500: #828285;
+  --onetrust-color-white: #fff;
+}
+
+#onetrust-banner-sdk {
+  padding: 1rem !important;
+}
+#onetrust-banner-sdk > .ot-sdk-container {
+  width: 100% !important;
+}
+#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  max-width: 1436px !important;
+  margin: 0 auto !important;
+}
+#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row:after {
+  content: none !important;
+}
+#onetrust-group-container {
+  display: flex !important;
+  justify-content: center;
+  float: none !important;
+  width: 100% !important;
+  max-width: 1148px !important;
+  margin-left: 0 !important;
+  margin-bottom: 0.625rem !important;
+}
+#onetrust-policy,
+#onetrust-policy-text {
+  margin: 0 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.375rem !important;
+  text-align: center !important;
+  float: none !important;
+}
+#onetrust-policy-text a {
+  text-decoration: none;
+  line-height: 26px !important;
+  margin-left: 0 !important;
+}
+#onetrust-button-group-parent {
+  position: relative !important;
+  top: initial !important;
+  left: initial !important;
+  transform: initial !important;
+  width: 264px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  float: none !important;
+}
+#onetrust-button-group {
+  display: flex !important;
+  margin: 0 !important;
+}
+#onetrust-pc-btn-handler, #onetrust-accept-btn-handler {
+  min-width: initial !important;
+  padding: 0.375rem 1rem !important;
+  margin: 0 !important;
+  opacity: 1 !important;
+  border-radius: 2px !important;
+  line-height: 1.5 !important;
+  user-select: none !important;
+  font-size: 1rem !important;
+}
+#onetrust-pc-btn-handler:focus, #onetrust-accept-btn-handler:focus {
+  box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);
+  text-decoration: none !important;
+  outline: none !important;
+}
+#onetrust-pc-btn-handler{
+  color: var(--onetrust-brand-purple) !important;
+  border: 1px solid var(--onetrust-brand-purple)!important;
+  background: var(--onetrust-color-white) !important
+}
+#onetrust-accept-btn-handler {
+  color: var(--onetrust-color-white) !important;
+  background: var(--onetrust-brand-purple)!important;
+  margin-left: 1rem !important;
+}
+#onetrust-close-btn-container {
+  display: none !important;
+}
+
+.pc-logo {
+  display: none !important;
+}
+
+#accept-recommended-btn-handler,
+.ot-pc-refuse-all-handler,
+.save-preference-btn-handler {
+  margin-left: 4px !important;
+  font-size: 14px !important;
+}
+
+#accept-recommended-btn-handler:focus,
+#onetrust-pc-sdk .ot-pc-refuse-all-handler:focus,
+#onetrust-pc-sdk .save-preference-btn-handler:focus {
+  box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);
+  text-decoration: none !important;
+  outline: none !important;
+  opacity: 1 !important;
+}
+
+.ot-switch-label {
+  border: 1px solid var(--onetrust-color-gray-500) !important;
+  background-color: var(--onetrust-color-gray-500) !important;
+}
+
+.ot-switch-nob {
+  background: var(--onetrust-color-white) !important;
+}
+
+.ot-switch-inner:before {
+  background-color: var(--onetrust-brand-purple) !important;
+}
+
+.switch-checkbox:checked+.ot-switch-label .ot-switch-nob {
+  border-color: var(--onetrust-brand-purple) !important;
+}
+
+.ot-pc-footer-logo {
+  display: none !important;
+}
+
+#onetrust-banner-sdk>.ot-sdk-container {
+  overflow: visible !important;
+}
+
+@media (max-width: 30rem) {
+  #accept-recommended-btn-handler,
+  .ot-pc-refuse-all-handler,
+  .save-preference-btn-handler {
+    width: 96% !important;
+  }
+}
+
+@media (min-width: 37.5rem) {
+  #onetrust-banner-sdk {
+    padding: 0.875rem 1rem !important;
+  }
+}
+@media (min-width: 48rem) {
+  #onetrust-banner-sdk {
+    padding: 0.875rem 1.25rem !important;
+  }
+}
+@media (min-width: 1650px) {
+  #onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {
+    flex-direction: row !important;
+    justify-content: space-between !important;
+  }
+  #onetrust-group-container {
+    margin-bottom: 0 !important;
+  }
+  #onetrust-button-group {
+    flex-direction: row !important;
+  }
+}
+`;
+
+// @ts-nocheck
+
+/**
+ * This code is copypasta from the Segment documentation.
+ * It creates the global analytics object and loads the Segment Analytics API that uses it.
+ *
+ * @see https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet
+ */
+const runSegmentSnippet = () => {
+  var _window;
+
+  // Create a queue, but don't obliterate an existing one!
+  (_window = window).analytics || (_window.analytics = []);
+  const {
+    analytics
+  } = window; // If the real analytics.js is already on the page return.
+
+  if (analytics.initialize) return; // If the snippet was invoked already show an error.
+
+  if (analytics.invoked) {
+    console.error('Segment snippet included twice.');
+    return;
+  } // Invoked flag, to make sure the snippet
+  // is never invoked twice.
+
+
+  analytics.invoked = true; // A list of the methods in Analytics.js to stub.
+
+  analytics.methods = ['trackSubmit', 'trackClick', 'trackLink', 'trackForm', 'pageview', 'identify', 'reset', 'group', 'track', 'ready', 'alias', 'debug', 'page', 'once', 'off', 'on', 'addSourceMiddleware', 'addIntegrationMiddleware', 'setAnonymousId', 'addDestinationMiddleware']; // Define a factory to create stubs. These are placeholders
+  // for methods in Analytics.js so that you never have to wait
+  // for it to load to actually record data. The `method` is
+  // stored as the first argument, so we can replay the data.
+
+  analytics.factory = function (method) {
+    return function () {
+      const args = Array.prototype.slice.call(arguments);
+      args.unshift(method);
+      analytics.push(args);
+      return analytics;
+    };
+  }; // For each of our methods, generate a queueing stub.
+
+
+  for (let i = 0; i < analytics.methods.length; i += 1) {
+    const key = analytics.methods[i];
+    analytics[key] = analytics.factory(key);
+  } // Define a method to load Analytics.js from our CDN,
+  // and that will be sure to only ever load it once.
+
+
+  analytics.load = function (key, options) {
+    // Create an async script element based on your key.
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = 'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js'; // Insert our script next to the first script element.
+
+    const first = document.getElementsByTagName('script')[0];
+    first.parentNode.insertBefore(script, first);
+    analytics._loadOptions = options;
+  }; // Add a version to keep track of what's in the wild.
+
+
+  analytics.SNIPPET_VERSION = '4.1.0';
+};
+
+/**
+ * @see README.md for details and usage.
+ */
+
+const initializeTrackingIntegrations = async ({
+  onError,
+  production,
+  scope,
+  user,
+  optedOutExternalTracking,
+  writeKey
+}) => {
+  // 1. Wait 1000ms 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
+
+  await initializeOneTrust({
+    scope,
+    production
+  }); // 3. Segment's copy-and-paste snippet is run to load the Segment global library
+
+  runSegmentSnippet(); // 4. Destination integrations for Segment are fetched
+
+  const destinations = await fetchDestinationsForWriteKey({
+    onError,
+    writeKey
+  });
+
+  if (!destinations) {
+    return;
+  }
+
+  const consentDecision = getConsentDecision({
+    scope,
+    optedOutExternalTracking
+  }); // 5. Those integrations are compared against the user's consent decisions into a list of allowed destinations
+
+  const {
+    destinationPreferences,
+    identifyPreferences
+  } = mapDestinations({
+    consentDecision,
+    destinations
+  }); // 6. We load only those allowed destinations using Segment's `analytics.load`
+
+  conditionallyLoadAnalytics({
+    analytics: scope.analytics,
+    destinationPreferences,
+    identifyPreferences,
+    user,
+    writeKey
+  });
+};
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+const browserSupportsKeepalive = () => 'keepalive' in window.Request.prototype;
+
+const createTracker = ({
+  apiBaseUrl,
+  verbose
+}) => {
+  const beacon = (endpoint, data) => {
+    const uri = new URL(endpoint, apiBaseUrl).toString();
+    const form = new FormData();
+
+    for (const [k, v] of Object.entries(data)) {
+      form.append(k, v.toString());
+    }
+
+    try {
+      // Firefox allows users to disable navigator.sendBeacon, and very old Safari versions don't have it.
+      // [WEB-1700]: Additionally, Chrome 79-80 gives "Illegal invocation" with ?., so through 2022 we should support them.
+      // It seems similar to this: https://github.com/vercel/next.js/issues/23856
+      if (navigator.sendBeacon && navigator.sendBeacon(uri, form)) {
+        return;
+      }
+    } catch (_unused) {// Even with the proper scoping, Chrome 79-80 still gives "Illegal invocation" crashes. Sigh.
+    } // Either way, we fall back to standard fetch if sendBeacon fails.
+    // We don't mind this rejecting with an error because it's tracking, and we'll know if that starts to fail.
+
+
+    window.fetch(uri, _extends({
+      method: 'POST',
+      body: form
+    }, browserSupportsKeepalive() && {
+      keepalive: true
+    }));
+  };
+
+  const event = (category, event, userData, options = {}) => {
+    const properties = _extends({}, userData, {
+      fullpath: window.location.pathname + window.location.search,
+      search: window.location.search,
+      path: window.location.pathname,
+      title: window.document.title,
+      url: window.location.href,
+      referrer: userData.referrer || window.document.referrer,
+      client: getClientType()
+    });
+
+    if (verbose) {
+      console.groupCollapsed(`%cTracking Event Fired: ${category}:${event}`, 'color: #4b35ef; font-style: italic;');
+      console.log({
+        category,
+        event,
+        properties
+      });
+      console.groupEnd();
+    } // This allows the UTM query params to get registered in the user session.
+
+
+    const queryParams = window.location.search;
+    beacon(`/analytics/${category}${queryParams}`, {
+      category,
+      event,
+      properties: JSON.stringify(properties),
+      gdpr_safe: `${options.gdprSafe}`
+    });
+  };
+
+  return {
+    event,
+    click: data => event('user', 'click', data),
+    impression: data => event('user', 'impression', data),
+    visit: data => event('user', 'visit', data),
+    pushDataLayerEvent: eventName => {
+      var _window;
+
+      ((_window = window).dataLayer || (_window.dataLayer = [])).push({
+        event: eventName
+      });
+    }
+  };
+};
+
+const fetchUser = async apiBaseUrl => {
+  const response = await fetch(`${apiBaseUrl}/users/web`, {
+    method: 'GET',
+    headers: {
+      'Content-type': 'application/json',
+      Accept: 'application/json'
+    },
+    credentials: 'include'
+  });
+  return response.json();
+};
+
+export { createTracker, fetchUser, initializeTrackingIntegrations };

package/dist/integrations/conditionallyLoadAnalytics.d.ts

@@ -1,9 +1,9 @@
-import { SegmentAnalytics, UserIntegrationSummary } from './types';
-export declare type AnalyticsLoadOptions = {
-    analytics: SegmentAnalytics;
-    destinationPreferences: Record<string, boolean>;
-    identifyPreferences: Record<string, boolean>;
-    user?: UserIntegrationSummary;
-    writeKey: string;
-};
-export declare const conditionallyLoadAnalytics: ({ analytics, destinationPreferences, identifyPreferences, user, writeKey, }: AnalyticsLoadOptions) => void;
+import { SegmentAnalytics, UserIntegrationSummary } from './types';
+export declare type AnalyticsLoadOptions = {
+    analytics: SegmentAnalytics;
+    destinationPreferences: Record<string, boolean>;
+    identifyPreferences: Record<string, boolean>;
+    user?: UserIntegrationSummary;
+    writeKey: string;
+};
+export declare const conditionallyLoadAnalytics: ({ analytics, destinationPreferences, identifyPreferences, user, writeKey, }: AnalyticsLoadOptions) => void;

package/dist/integrations/consent.d.ts

@@ -1,9 +1,9 @@
-/**
- * @see https://www.notion.so/codecademy/GDPR-Compliance-141ebcc7ffa542daa0da56e35f482b41
- */
-export declare enum Consent {
-    Functional = "C0003",
-    Performance = "C0002",
-    StrictlyNecessary = "C0001",
-    Targeting = "C0004"
-}
+/**
+ * @see https://www.notion.so/codecademy/GDPR-Compliance-141ebcc7ffa542daa0da56e35f482b41
+ */
+export declare enum Consent {
+    Functional = "C0003",
+    Performance = "C0002",
+    StrictlyNecessary = "C0001",
+    Targeting = "C0004"
+}

package/dist/integrations/device.d.ts

@@ -1,13 +1,13 @@
-/**
- * @returns Whether the site is running both in ChromeOS and in PWA mode.
- */
-export declare const isChromeOSPWA: () => boolean;
-/**
- * @returns Whether the site is running in ChromeOS
- */
-export declare const isChromeOS: () => boolean;
-export declare enum ClientTypes {
-    PWA = "pwa",
-    Default = "default"
-}
-export declare const getClientType: () => ClientTypes;
+/**
+ * @returns Whether the site is running both in ChromeOS and in PWA mode.
+ */
+export declare const isChromeOSPWA: () => boolean;
+/**
+ * @returns Whether the site is running in ChromeOS
+ */
+export declare const isChromeOS: () => boolean;
+export declare enum ClientTypes {
+    PWA = "pwa",
+    Default = "default"
+}
+export declare const getClientType: () => ClientTypes;

package/dist/integrations/fetchDestinationsForWriteKey.d.ts

@@ -1,6 +1,6 @@
-import { SegmentDestination } from './types';
-export declare type FetchDestinationsSettings = {
-    onError: (message: string) => void;
-    writeKey: string;
-};
-export declare const fetchDestinationsForWriteKey: ({ writeKey, onError, }: FetchDestinationsSettings) => Promise<SegmentDestination[] | undefined>;
+import { SegmentDestination } from './types';
+export declare type FetchDestinationsSettings = {
+    onError: (message: string) => void;
+    writeKey: string;
+};
+export declare const fetchDestinationsForWriteKey: ({ writeKey, onError, }: FetchDestinationsSettings) => Promise<SegmentDestination[] | undefined>;

package/dist/integrations/getConsentDecision.d.ts

@@ -1,8 +1,8 @@
-import { Consent } from './consent';
-import { TrackingWindow } from './types';
-export interface ConsentDecisionOptions {
-    scope: TrackingWindow;
-    optedOutExternalTracking?: boolean;
-}
-export declare const OPT_OUT_DATALAYER_VAR = "user_opted_out_external_tracking";
-export declare const getConsentDecision: ({ scope, optedOutExternalTracking, }: ConsentDecisionOptions) => Consent[];
+import { Consent } from './consent';
+import { TrackingWindow } from './types';
+export interface ConsentDecisionOptions {
+    scope: TrackingWindow;
+    optedOutExternalTracking?: boolean;
+}
+export declare const OPT_OUT_DATALAYER_VAR = "user_opted_out_external_tracking";
+export declare const getConsentDecision: ({ scope, optedOutExternalTracking, }: ConsentDecisionOptions) => Consent[];