Optimize support, again

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,

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} />;
 
     }
   };

packages/core/src/helpers/services.js

@@ -25,14 +25,21 @@ const serviceJavaScript = {
         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>
+      <script>
+        //Launch SSR optimize activation event
+        if(window.dataLayer){
+          window.dataLayer.push({'event': 'optimize.activate'});
+        }
+      </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>
@@ -56,4 +63,15 @@ const servicesBody = servicesAvailable
     <!-- End ${titleCase(s.replace(/\_/g, " "))} -->
   `).join("\n");
 
-export {servicesAvailable, servicesBody, servicesScript};
+// 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};

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} from "./helpers/services";
+import {servicesAvailable, servicesBody, servicesScript, servicesHeadTags} from "./helpers/services";
 import yn from "yn";
 
 import CanonProvider from "./CanonProvider";
@@ -203,6 +203,8 @@ 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    ")}