segment-consent.js

// source: https://gist.github.com/sperand-io/4725e248a35d5005d68d810d8a8f7b29
//   date: 2023-01-18
//   index.js file on the above page

// To get started, make sure you're using the latest version of the analytics.js snippet (4.1.0 or above)
// and remove the `analytics.load("YOUR_WRITE_KEY")` call. then drop this script below the snippet.

// this is a standalone script for modern browsers. if you'd like to target older browsers, include
// a fetch polyfill and use that instead of window.fetch. This would require that you build and package the
// script somehow (rollup, webpack, browserify, etc). You may also want to transpile it to ES5 w eg Babel.

// This script is configured to make all collection opt-in (rather than opt-out) for all users.
// If you want to conditionally require whether or not to block data collection before affirmative consent, use something
// like inEU below and pass that function into `conditionallyLoadAnalytics`. If you want to collect data until the user
// opts out, just change OPT_IN to false.

// import fetch from 'isomorphic-fetch'
// import inEU from '@segment/in-eu'

const OPT_IN = false; // false = only disable after opt out, can replace with a function such as inEU above
const YOUR_DOMAIN = window.location.hostname;
const WEBSITE_WRITE_KEY = SEGMENT_JS_KEY_IN_JS; // the segment write key pulled from page-code-header.blade.php
const SEGMENT_MAPPING = 1;
const OTHER_WRITE_KEYS = []; // any other sources w destinations that you want to include in config

// gets enabled destination configurations from across your source (and optionally other sources in workspace)
fetchDestinations([WEBSITE_WRITE_KEY, ...OTHER_WRITE_KEYS]).then(
  destinations => {
    // KEY LOGIC HERE
    // eg. could instead use trustArc's other APIs such as getConsentCategories
    // and map between the returned vendor domains to specific Segment Integrationss, etc
    // review this logic carefully, and edit per your business requirements
    //
    // in this case, we go with all when customer provides full consent
    // remove Advertising tools when the customer provides functional
    // and mark Segment as required (for data to flow to warehouse etc— if you make that clear in your policy)
    // note that though Segment will receive data we wont forward (even server side) to other sources because we
    // decorate the calls with the full set of integrations you have enabled with "false."
    //
    // no preference here goes with all on — you may want to flip that!
    const consentDecision = truste.cma.callApi(
      "getConsentDecision",
      YOUR_DOMAIN
    );

    console.log('consentDecision below:');
    console.log(consentDecision);
    console.log('-------------');

    console.log('destinations below:');
    console.log(destinations);
    console.log('-------------');

    const destinationPreferences = destinations
      .map(function(dest) {
        if (consentDecision === 3) return { [dest.id]: true }; // All cookies accepted.
        if (consentDecision === 2) return { [dest.id]: dest.category === "Advertising" ? false : true }; // Everything is OK except adverts.
        if (consentDecision === 1) return { [dest.id]: false }; // No optional cookies accepted.
        if (consentDecision === 0) return { [dest.id]: !OPT_IN }; // No preference, so depends on OPT_IN default.
      })
      .reduce(
        (acc, val) => {
          return {
            ...val,
            ...acc
          };
        },
        { "Segment.io": consentDecision >= SEGMENT_MAPPING }
      );

    console.log('destinationPreferences below:');
    console.log(destinationPreferences);
    console.log('-------------');

    conditionallyLoadAnalytics({
      writeKey: WEBSITE_WRITE_KEY,
      destinations,
      destinationPreferences,
      isConsentRequired: OPT_IN
    });
  }
);

// instructs trustarc to notify on changes to consent
window.top.postMessage(JSON.stringify({
  PrivacyManagerAPI: {
    action: "getConsent",
    timestamp: new Date().getTime(),
    self: YOUR_DOMAIN
  }
}), "*");

// registers listener for consent changes.
// some care has been taken here to handle messages safely.
// will reload window if they've "denied"... to reset tracking.
window.addEventListener("message", function reload(e) {
  let data = e.data;
  if (typeof data === "string") {
    try {
      data = JSON.parse(data);
    } catch (e) { /* weird message, bail */}
  }
  if (
    data &&
    data.PrivacyManagerAPI &&
    data.PrivacyManagerAPI.consent === "denied"
  ) {
    return window.location.reload();
  }
   // otherwise approved... carry on!
},  false);

// helper functions below...
function conditionallyLoadAnalytics({
  writeKey,
  destinations,
  destinationPreferences,
  isConsentRequired,
  shouldReload = true // change if you dont want to reload on consent changes
}) {
  let isAnythingEnabled = false;

  if (!destinationPreferences) {
    if (isConsentRequired) {
      return;
    }

    // Load a.js normally when consent isn't required and there's no preferences
    if (!window.analytics.initialized) {
      window.analytics.load(writeKey);
    }
    return;
  }

  for (const destination of destinationPreferences) {
    const isEnabled = destinationPreferences[destination];
    if (isEnabled) {
      isAnythingEnabled = true;
    }
  }

  // Reload the page if the trackers have already been initialised so that
  // the user's new preferences can take affect
  if (window.analytics.initialized) {
    if (shouldReload) {
      window.location.reload();
    }
    return;
  }

  // Don't load a.js at all if nothing has been enabled
  if (isAnythingEnabled) {
    window.analytics.load(writeKey, { integrations: destinationPreferences });
  }
}

async function fetchDestinationForWriteKey(writeKey) {
  const res = await window.fetch(
    `https://cdn.segment.com/v1/projects/${writeKey}/integrations`
  );

  if (!res.ok) {
    throw new Error(
      `Failed to fetch integrations for write key ${writeKey}: HTTP ${
        res.status
      } ${res.statusText}`
    );
  }

  const destinations = await res.json();

  // Rename creationName to id to abstract the weird data model
  for (const destination of destinations) {
    destination.id = destination.creationName;
    delete destination.creationName;
  }

  return destinations;
}

async function fetchDestinations(...writeKeys) {
  const destinationsRequests = [];
  for (const writeKey of writeKeys) {
    destinationsRequests.push(fetchDestinationForWriteKey(writeKey));
  }

  let destinations = await Promise.all(destinationsRequests);

  // unique list of destination across all sources
  destinations = [
    ...destinations
      .reduce((a, b) => a.concat(b), []) // flatten multi-d array
      .filter(d => d.id !== "Repeater") // remove repeater
      .reduce((map, item) => {
        map.has(item["id"]) || map.set(item["id"], item);
        return map;
      }, new Map())
      .values()
  ];

  return destinations;
}