Google Optimize Implementation

[Kevin-Carlos]

Sorry if this is the incorrect place, I aimed for Discussions, but ended here.

I've searched high and low of Google Optimize implementations which of course is going to differ project to project.

I've finally found a working combination within my codebase which can be seen below.

Plugins that implement Google Tag Manager, Analytics, and Optimize haven't worked and result in an incorrect Optimize installation. Mainly everything is working now, just the anti-flicker snippet is not -- meaning, it's not triggering at all so I get the visual flash of whatever was edited within Optimize.

Wondering if anyone has dealt with this sort of issue, thanks!

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js:

const { Helmet } = require("react-helmet");

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`
});

exports.onRenderBody = (
  { setHeadComponents, setHtmlAttributes, setBodyAttributes },
  pluginOptions
) => {
  const helmet = Helmet.renderStatic()
  setHtmlAttributes(helmet.htmlAttributes.toComponent())
  setBodyAttributes(helmet.bodyAttributes.toComponent())
  setHeadComponents([
    <style marketing-platform="true" order-importance="1">{`.async-hide {opacity: 0 !important}`}</style>,
    <script marketing-platform="true" order-importance="2" type='text/javascript'>
      {`
      (function(w,d,s,l,i){w[l] = w[l] || []{'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','${process.env.GATSBY_GTM_ID}');
    `}
    </script>,
    <script
      marketing-platform="true"
      order-importance="3"
      type='text/javascript'
      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GATSBY_GA_TRACKING_ID}`}>

    </script>,
    <script marketing-platform="true" order-importance="4" type='text/javascript'>
      {`
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '${process.env.GATSBY_GA_TRACKING_ID}', {'optimize_id': '${process.env.GATSBY_OPTIMIZE_ID}'});
    `}
    </script>,
    <script
      marketing-platform="true"
      order-importance="5"
      type='text/javascript'
    >
      {`
      (function(a,s,y,n,c,h,i,d,e){s.className += ' ' + y;h.start=1*new Date;
      h.end=i=function(){s.className = s.className.replace(RegExp(' ?' + y), '')};
      (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
      })(window,document.documentElement,'async-hide','dataLayer',2500,
      {'${process.env.GATSBY_OPTIMIZE_ID}':true});
    `}
    </script>,
    <script
      marketing-platform="true"
      order-importance="6"
      type='text/javascript'
      src={`https://www.googleoptimize.com/optimize.js?id=${process.env.GATSBY_OPTIMIZE_ID}`} onError={() => window.dataLayer.hide.end && window.dataLayer.hide.end()}></script>,
    helmet.title.toComponent(),
    helmet.link.toComponent(),
    helmet.meta.toComponent(),
    helmet.noscript.toComponent(),
    helmet.style.toComponent(),
    helmet.script.toComponent(),
  ])
}

// These two sorts are to get the google marketing platform items to the top of the head
exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents()

  headComponents.sort((x, y) => {
    if (x.props && x.props["marketing-platform"]) {
      return -1
    } else if (y.props && y.props["marketing-platform"]) {
      return 1
    }
    return 0
  });

  headComponents.sort((x, y) => {
    if (x.props && x.props["order-importance"] && y.props && y.props["order-importance"]) {
      return parseInt(x.props["order-importance"]) < parseInt(y.props["order-importance"]) ? -1 : 1;
    }
    return 0;
  })

  replaceHeadComponents(headComponents)
}```

[gillkyle]

Hey @Kevin-Carlos, I've experimented with a couple different A/B testing options. I haven't found a great way to avoid the anti-flicker myself with Google Optimize though haven't done as much with it as other options.

I was concerned mostly with frontend performance degradations from using a JS blocking 3rd party script. I found VWO to be the least impactful on performance and seems to have some cool logic to keep flickers from happening.

FWIW my gatsby-ssr.js looks like this with Google Optimize. I'd imagine this is close to the most minimal implementation:

import React from "react"

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="google-optimize"
      src="https://www.googleoptimize.com/optimize.js?id=OPT-WMLW3CS"
    />,
  ])
}

[jamesbarber]

Hey @gillkyle,

I'm implementing Google Optimize as you suggest. Loads correctly and doesn't have any flicker, perfect.

A couple things I've noticed though is that since this snippet only fires on the initial website page load so users who navigate to other pages (that have experiments running) during the same session will never see those other experiments, only the experiment running for the initially loaded page.

Also, I'm trying to get some multi variant tests going, which at this stage is just changing the text of a CTA button. One thing is I can't preview any of the variants in Google Optimize and the other thing is that when I set the experiment live I see a flash of my variant text before it loads the original page. i.e. My original button text might be "Start Free Trial" and my variant is "Try 14 Days Free" - when I load the page it flashes "Try 14 Days Free" then flicks back to "Start Free Trial".

I'm totally not expecting you to know the answers to all of this but was just wondering if you had encountered similar issues and had any resolutions you could share?

Cheers

[doublejosh]

This was harder to sleuth out that it should have been. My version...

gatsby-ssr.js

import React from "react";
import clientConfig from "./client-config";

export function onPreRenderHTML({
  getHeadComponents,
  replaceHeadComponents,
  pathname,
}) {
  if (!clientConfig.optimize.paths.includes(pathname)) return;
  replaceHeadComponents(
    [
      <script
        key="optimize"
        async
        src={`https://www.googleoptimize.com/optimize.js?id=${clientConfig.optimize.trackingId}`}
      />,
    ].concat(getHeadComponents())
  );
}

client-config.js

module.exports = {
  optimize: {
    trackingId: "OPT-ABC1234",
    paths: ["/", "/hello/"],
  },
};

[doublejosh]

I went a little farther to use the anti-flicker...

export function onPreRenderHTML({
  getHeadComponents,
  replaceHeadComponents,
  pathname,
}) {
  if (!clientConfig.optimize.paths.includes(pathname)) return;
  replaceHeadComponents(
    [
      <style>{`.async-hide { opacity: 0 !important; }`}</style>,
      <script
        dangerouslySetInnerHTML={{
          __html: `
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'OPT-${clientConfig.optimize.trackingId}':true});
`,
        }}
      />,
      <script
        key="optimize"
        async
        src={`https://www.googleoptimize.com/optimize.js?id=${clientConfig.optimize.trackingId}`}
      />,
    ].concat(getHeadComponents())
  );
}

However, it seems I can't verify the installation without a warning. The test runs fine though.

This SO answer claims that GTM needs to be loaded in the middle...
https://stackoverflow.com/questions/58513115/google-optimize-anti-flicker-snippet-timed-out

[Saleh5515]

export function onPreRenderHTML({
getHeadComponents,
replaceHeadComponents,
pathname,
}) {
if (!clientConfig.optimize.paths.includes(pathname)) return;
replaceHeadComponents(
[
<style>{.async-hide { opacity: 0 !important; }}</style>,
<script
dangerouslySetInnerHTML={{
__html: (function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'OPT-${clientConfig.optimize.trackingId}':true});,
}}
/>,
<script
key="optimize"
async
src={https://www.googleoptimize.com/optimize.js?id=${clientConfig.optimize.trackingId}}
/>,
].concat(getHeadComponents())
);
}