Replace TrustArc cookie consent with OneTrust

Author: Sambego

server.js

@@ -1,6 +1,7 @@
 const express = require("express");
 const enforce = require("express-sslify");
 const languages = require("./libraries.json");
+const dotenv = require("dotenv").config();
 
 const app = express();
 
@@ -17,7 +18,10 @@ if (process.env.NODE_ENV === "production") {
     );
 }
 
-// app.use(fetchGithubStars);
+app.use((req, res, next) => {
+    res.locals.COOKIE_CONSENT_DOMAIN_ID = process.env.COOKIE_CONSENT_DOMAIN_ID;
+    next();
+});
 app.use(express.static("dist/website"));
 app.get("/", function(req, res) {
     res.render("index");
@@ -28,7 +32,9 @@ app.get("/introduction", function(req, res) {
 });
 
 app.get("/libraries", function(req, res) {
-    res.render("libraries", { languages: languages });
+    res.render("libraries", {
+        languages: languages
+    });
 });
 
 // Fallback for the homepage JWT handbook CTA A/B experiment we ran

src/cookie-consent.js

@@ -0,0 +1,65 @@
+const COOKIE_CONSENT_NECESSARY = 1;
+const COOKIE_CONSENT_PERFORMANCE = 2;
+const COOKIE_CONSENT_FUNCTIONAL = 3;
+const COOKIE_CONSENT_ADVERTISING = 4;
+
+function addScripts(lvl) {
+    //Reject all
+    if (!lvl) {
+        return;
+    }
+
+    // Necessary
+    if (lvl.includes(COOKIE_CONSENT_NECESSARY)) {
+        // GTM
+        (function(w, d, s, l, i) {
+            w[l] = w[l] || [];
+            w[l].push({
+                'gtm.start': new Date().getTime(),
+                event: 'gtm.js'
+            });
+            var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s),
+                dl = l != 'dataLayer' ? '&l=' + l : '';
+            j.async = true;
+            j.src =
+                '//www.googletagmanager.com/gtm.js?id=' + i + dl;
+            f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', 'GTM-W7FRLJ');
+    }
+
+    // Functional
+    if (lvl.includes(COOKIE_CONSENT_FUNCTIONAL)) {
+        (function(d, s, id) {
+            var js, fjs = d.getElementsByTagName(s)[0],
+                p = /^http:/.test(d.location) ? 'http' : 'https';
+            if (!d.getElementById(id)) {
+                js = d.createElement(s);
+                js.id = id;
+                js.src = p + '://platform.twitter.com/widgets.js';
+                fjs.parentNode.insertBefore(js, fjs);
+            }
+        })(document, 'script', 'twitter-wjs');
+    }
+}
+
+// Add required scripts without waiting for the user consent
+addScripts(window.OnetrustActiveGroups);
+
+// Poll for the consent being onscreen.
+const POLL_MAX = 10;
+const POLL_INTERVAL = 200;
+let tries = 0;
+const poll = window.setInterval(() => {
+    if (tries >= POLL_MAX) {
+        addScripts(window.OnetrustActiveGroups)
+        return window.clearInterval(poll);
+    }
+
+    if (document.getElementById("onetrust-accept-btn-handler")) {
+        window.OneTrust.OnConsentChanged(() => addScripts(window.OnetrustActiveGroups));
+        return window.clearInterval(poll);
+    } else {
+        tries++;
+    }
+}, POLL_INTERVAL);

views/website/layout.pug

@@ -38,20 +38,10 @@ html(lang='en')
     // Chrome extension link, required for inline installs
     link(rel="chrome-webstore-item", href="https://chrome.google.com/webstore/detail/ppmmlchacdbknfphdeafcbmklcghghmd")
 
-    // Google Tag Manager
-    script.
-      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','GTM-W7FRLJ');
-    // End Google Tag Manager 
-
   body
     // Google Tag Manager (noscript)
     noscript
       iframe(src='https://www.googletagmanager.com/ns.html?id=GTM-W7FRLJ', height='0', width='0', style='display:none;visibility:hidden')
-    // End Google Tag Manager (noscript)
 
     include ./navigation.pug
 
@@ -72,11 +62,6 @@ html(lang='en')
           .column.social-counter
             a.twitter-follow-button(href='https://twitter.com/auth0', data-show-count='true') Follow @auth0
 
-    script.
-      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
-
     if process.env.NODE_ENV === "production"
-      div
-        div(id="consent_blackbar")
-        div(id="teconsent" style="position: absolute; bottom: -100px;")
-        script(async="async" src="//consent.trustarc.com/notice?domain=auth0banner.com&c=teconsent&js=nj&noticeType=bb&text=true" crossOrigin)
+      script(src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js", type="text/javascript", charset="UTF-8", data-domain-script=COOKIE_CONSENT_DOMAIN_ID, id="consent-script")    
+      script(src="/js/cookie-consent.js")

webpack.website-dev.js

@@ -8,7 +8,8 @@ module.exports = merge(common, {
     entry: {
         index: './src/website/index.js',
         introduction: './src/website/introduction/index.js',
-        libraries: './src/website/libraries/index.js'
+        libraries: './src/website/libraries/index.js',
+        "cookie-consent": './src/cookie-consent.js'
     },
     output: {
         filename: '[name].js',