switch optimize to custom event strategy

Datawheel · Feb 4, 2022 · 8547104 · 8547104
1 parent 2a8a62f
commit 8547104
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 23 deletions.
diff --git a/packages/core/bin/server/steps/store.js b/packages/core/bin/server/steps/store.js
@@ -1,16 +1,16 @@
 const path = require("path"),
-      shell = require("shelljs"),
-      yn = require("yn");
+  shell = require("shelljs"),
+  yn = require("yn");
 
 let everDetect = false;
 
-module.exports = function(config) {
+module.exports = function (config) {
 
   const {NODE_ENV, paths} = config;
   const {appPath, serverPath} = paths;
 
   const resolve = require(path.join(serverPath, "helpers/resolve")),
-        title = require(path.join(serverPath, "helpers/title"));
+    title = require(path.join(serverPath, "helpers/title"));
 
   title(`${everDetect ? "Re-initializing" : "Initializing"} Redux Store`, "🏪");
   everDetect = true;
@@ -25,6 +25,7 @@ module.exports = function(config) {
     CANON_LANGUAGES: LANGUAGES,
     CANON_LANGUAGE_DEFAULT: LANGUAGE_DEFAULT,
     CANON_LOGINS: process.env.CANON_LOGINS || false,
+    CANON_GOOGLE_OPTIMIZE: process.env.CANON_GOOGLE_OPTIMIZE || false,
     CANON_LOGLOCALE: process.env.CANON_LOGLOCALE,
     CANON_LOGREDUX: process.env.CANON_LOGREDUX,
     CANON_PORT: process.env.CANON_PORT || 3300,

diff --git a/packages/core/src/client.jsx b/packages/core/src/client.jsx
@@ -49,7 +49,7 @@ import defaultTranslations from "./i18n/canon";
 import CanonProvider from "./CanonProvider";
 
 const {locale, resources} = window.__INITIAL_STATE__.i18n;
-const {CANON_LOGLOCALE, NODE_ENV} = window.__INITIAL_STATE__.env;
+const {CANON_LOGLOCALE, NODE_ENV, CANON_GOOGLE_OPTIMIZE} = window.__INITIAL_STATE__.env;
 const name = window.__APP_NAME__;
 
 const resourceObj = {canon: {[name]: defaultTranslations}};
@@ -132,6 +132,13 @@ function renderMiddleware() {
       const chunks = props.components.filter(comp => comp && comp.preload && comp.load);
       const {action, hash, pathname, query, search, state} = location;
 
+      //Launch Optimize activation event if client side navigation
+      function launchOptimizeEvent() {
+        if (CANON_GOOGLE_OPTIMIZE && !window.__SSR__ && window.dataLayer) {
+          window.dataLayer.push({'event': 'optimize.activate'});
+        }
+      }
+
       /** */
       function postRender() {
         if (!window.__SSR__) {
@@ -153,6 +160,7 @@ function renderMiddleware() {
 
       if (action !== "REPLACE" || !Object.keys(query).length) {
         selectAll(".d3plus-tooltip").remove();
+        launchOptimizeEvent();
         if (window.__SSR__ || state === "HASH" || !needs.length && !chunks.length) {
           postRender();
           window.__SSR__ = false;
@@ -184,7 +192,7 @@ function renderMiddleware() {
         }
       }
 
-      return <RouterContext {...props}/>;
+      return <RouterContext {...props} />;
 
     }
   };

diff --git a/packages/core/src/helpers/services.js b/packages/core/src/helpers/services.js
@@ -1,70 +1,74 @@
 import {titleCase} from "d3plus-text";
 
 const serviceJavaScript = {
-      FACEBOOK_PIXEL: id => `!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){
+  FACEBOOK_PIXEL: id => `!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){
         n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};
         if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
         n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];
         s.parentNode.insertBefore(t,s)}(window,document,'script', 'https://connect.facebook.net/en_US/fbevents.js');
         fbq('init', '${id}'); fbq('track', 'PageView');`,
-      GOOGLE_TAG_MANAGER: id => `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  GOOGLE_TAG_MANAGER: id => `(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=
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
         })(window,document,'script','dataLayer','${id}');`,
-      GOOGLE_ANALYTICS: id => `(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  GOOGLE_ANALYTICS: id => `(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
         ${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){
+  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=');`,
-      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}")`
+        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`
 };
 
 const serviceHeadTag = {
-      GOOGLE_OPTIMIZE: id => `<script src="https://www.googleoptimize.com/optimize.js?id=${id}"></script>`
+  GOOGLE_OPTIMIZE: id => `
+      <script src="https://www.googleoptimize.com/optimize.js?id=${id}"></script>
+      <script>
+        //Launch SSR optimize activation event
+        if(window.dataLayer){
+          window.dataLayer.push({'event': 'optimize.activate'});
+        }
+      </script>
+      `
 }
 
 const serviceHTML = {
-      GOOGLE_TAG_MANAGER: id => `<noscript>
+  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>
     </noscript>`
 };
 
 const servicesAvailable = Object.keys(serviceJavaScript).filter(s => [undefined, ''].indexOf(process.env[`CANON_${s}`]) === -1);
 
 const servicesScript = servicesAvailable
-      .map(s => `
+  .map(s => `
         // ${titleCase(s.replace(/\_/g, " "))}
         ${serviceJavaScript[s](process.env[`CANON_${s}`])}
         // End ${titleCase(s.replace(/\_/g, " "))}
   `).join("\n");
 
 const servicesBody = servicesAvailable
-      .filter(s => serviceHTML[s])
-      .map(s => `
+  .filter(s => serviceHTML[s])
+  .map(s => `
     <!-- ${titleCase(s.replace(/\_/g, " "))} -->
     ${serviceHTML[s](process.env[`CANON_${s}`])}
     <!-- 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 servicesHeadTagsAvailable = Object.keys(serviceHeadTag)
+  .filter(s => [undefined, ''].indexOf(process.env[`CANON_${s}`]) === -1);
 
 const servicesHeadTags = servicesHeadTagsAvailable
-      .map(s => `
+  .map(s => `
     <!-- ${titleCase(s.replace(/\_/g, " "))} -->
     ${serviceHeadTag[s](process.env[`CANON_${s}`])}
     <!-- End ${titleCase(s.replace(/\_/g, " "))} -->