change google optimize load strategy to respect GDPR

Datawheel · Jan 28, 2022 · a127c07 · a127c07
1 parent 98a5cd4
commit a127c07
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 32 deletions.
diff --git a/packages/core/src/CanonProvider.jsx b/packages/core/src/CanonProvider.jsx
@@ -38,7 +38,7 @@ class CanonProvider extends Component {
        *
        * Minor modifications by Chris Price to only polyfill when required.
        */
-      (function(SVGElement) {
+      (function (SVGElement) {
 
         if (!SVGElement || "innerHTML" in SVGElement.prototype) {
           return;
@@ -107,7 +107,7 @@ class CanonProvider extends Component {
               const dXML = new DOMParser();
               dXML.async = false;
               // Wrap the markup into a SVG node to ensure parsing works.
-              const sXML = `<svg xmlns='http://www.w3.org/2000/svg'>${  markupText  }</svg>`;
+              const sXML = `<svg xmlns='http://www.w3.org/2000/svg'>${markupText}</svg>`;
               const svgDocElement = dXML.parseFromString(sXML, "text/xml").documentElement;
 
               // Now take each node, import it and append to this element.
@@ -136,7 +136,7 @@ class CanonProvider extends Component {
 
   onClick(e) {
 
-    if (typeof window.ga === "function") {
+    if (typeof window.ga === "function" && typeof window.ga.getAll === "function") {
 
       const clickEl = e.target;
 
@@ -227,16 +227,16 @@ class CanonProvider extends Component {
         meta={helmet.meta}
         link={helmet.link}
       />
-      { loading ? <Loading /> : <div>{ children }</div> }
+      {loading ? <Loading /> : <div>{children}</div>}
       <Portal>
         <Toaster ref={this.toastRef} />
       </Portal>
-      { gdpr ? <div id="cookies-eu-banner" style={{display: "none"}}>
+      {gdpr ? <div id="cookies-eu-banner" style={{display: "none"}}>
         <span id="cookies-eu-desc">{t("GDPR.desc", {services})}</span>
-        { privacy ? <a href={privacy} id="cookies-eu-more">{t("GDPR.more")}</a> : null }
+        {privacy ? <a href={privacy} id="cookies-eu-more">{t("GDPR.more")}</a> : null}
         <button id="cookies-eu-reject" className="bp3-button">{t("GDPR.reject")}</button>
         <button id="cookies-eu-accept" className="bp3-button">{t("GDPR.accept")}</button>
-      </div> : null }
+      </div> : null}
     </div>;
   }
 }

diff --git a/packages/core/src/helpers/services.js b/packages/core/src/helpers/services.js
@@ -19,19 +19,20 @@ const serviceJavaScript = {
         ${id.split(",").map((key, i) => `ga('create', '${key}', 'auto', 'tracker${i + 1}');`).join("\n      ")}
         ${id.split(",").map((key, i) => `ga('tracker${i + 1}.send', 'pageview');`).join("\n      ")}`,
   HOTJAR: id => `(function(h,o,t,j,a,r){
-          h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
-          h._hjSettings={hjid:${id},hjsv:6};
-          a=o.getElementsByTagName('head')[0];
-          r=o.createElement('script');r.async=1;
-          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
-          a.appendChild(r);
-        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`
+        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+        h._hjSettings={hjid:${id},hjsv:6};
+        a=o.getElementsByTagName('head')[0];
+        r=o.createElement('script');r.async=1;
+        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+        a.appendChild(r);
+        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
+  GOOGLE_OPTIMIZE: id => `(function(w,d, optimizeId){
+        var script = d.createElement('script');
+        script.src = "https://www.googleoptimize.com/optimize.js?id="+optimizeId;
+        d.head.prepend(script);
+      })(window, document, "${id}")`
 };
 
-const serviceHeadTag = {
-  GOOGLE_OPTIMIZE: id => `<script src="https://www.googleoptimize.com/optimize.js?id=${id}"></script>`
-}
-
 const serviceHTML = {
   GOOGLE_TAG_MANAGER: id => `<noscript>
       <iframe src="https://www.googletagmanager.com/ns.html?id=${id}" height="0" width="0" style="display:none;visibility:hidden"></iframe>
@@ -55,14 +56,4 @@ const servicesBody = servicesAvailable
     <!-- End ${titleCase(s.replace(/\_/g, " "))} -->
   `).join("\n");
 
-// Services that needs a JS tags scripts
-const servicesHeadTagsAvailable = Object.keys(serviceHeadTag).filter(s => [undefined, ''].indexOf(process.env[`CANON_${s}`]) === -1);
-
-const servicesHeadTags = servicesHeadTagsAvailable
-  .map(s => `
-    <!-- ${titleCase(s.replace(/\_/g, " "))} -->
-    ${serviceHeadTag[s](process.env[`CANON_${s}`])}
-    <!-- End ${titleCase(s.replace(/\_/g, " "))} -->
-  `).join("\n");
-
-export {servicesAvailable, servicesBody, servicesScript, servicesHeadTags};
+export {servicesAvailable, servicesBody, servicesScript};
diff --git a/packages/core/src/server.jsx b/packages/core/src/server.jsx
@@ -13,7 +13,7 @@ import {initialState as appInitialState} from "$app/store";
 import preRenderMiddleware from "./middlewares/preRenderMiddleware";
 import pretty from "pretty";
 import maybeRedirect from "./helpers/maybeRedirect";
-import {servicesAvailable, servicesBody, servicesScript, servicesHeadTags} from "./helpers/services";
+import {servicesAvailable, servicesBody, servicesScript} from "./helpers/services";
 import yn from "yn";
 
 import CanonProvider from "./CanonProvider";
@@ -203,8 +203,6 @@ export default function (defaultStore = appInitialState, headerConfig, reduxMidd
 
     ${baseTag}
 
-    ${servicesHeadTags}
-
     ${pretty(header.title.toString()).replace(/\n/g, "\n    ")}
 
     ${pretty(header.meta.toString()).replace(/\n/g, "\n    ")}