4

I've faced an issue with using Google Optimize with our React App (e.g. https://quality.livechatinc.com/1520 ). There's a simple A/B test that should be run (text replacement).

The preview of the test somehow works (the gaexp cookie is set, and in the preview mode, only after the reload of the page**, the variant triggers).

When the test is published, the cookie is not set and the test does not work entirely.

Here's the implementation of GA/GTM/Optimize:

//Page-hiding snippet.
<style>.async-hide { opacity: 0 !important} </style>
<script>(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,
{'GTM-XXXXXX':true});</script> //instead of X we have our Optimize container ID

//Optimize code without ga(`send`), as we use GTM to send pageviews
<script>
  (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');
  ga('create', 'UA-XXXXXX-XX', 'auto'); //instead of X we have our GA tracking code
  ga('require', 'GTM-XXXXXXX'); //instead of X we have our Optimize container ID
</script>

//GTM code
<!-- 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=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

The codes are placed in <head> of the app, right after <meta> and <links>.

I've tried to trigger the Optimize test with custom dataLayer event like the Optimize docs suggest (https://support.google.com/360suite/optimize/answer/7008840?hl=en), but it didn't solve the issue.

I've tried to clear and disable cache/cookies and checked if the test works in various browsers, incognito modes, computers – nothing worked.

Do you have any experience with using Google Optimize in React app? Any ideas how to solve this issue?

Thanks in advance!

Michał

** this might be a hint what's going on, but I have no idea why it's happening.

Michał Fiech
  • 41
  • 1
  • 2

1 Answers1

4

Even thought it is a little old question and you might solve this already, I have similar issue, and it was difficult to find the right solution. So for anyone who still struggle with this.

So, everything you have done is right, however I think you did not fire dataLayer event on DOM change, so you need to add observer function to do so.

This is example of code that should be added somewhere at the end just before , but after all your scripts. (could be in index.html as well)

<!-- This will send an activate event to Optimize, anytime that there is a change in the DOM --> 
<script> 
    window.dataLayer = window.dataLayer || []; 
    if (MutationObserver) { 
      new MutationObserver(function(){ 
        dataLayer.push({'event': 'optimize.activate'}); 
      }).observe(document.body, {subtree: true, attributes: true, characterData: true}); 
    } 
  </script>

Also, don't forget to set in Optimize to activate an experiment on a custom event and not on page load (as described in here https://support.google.com/360suite/optimize/answer/7008840?hl=en)

Marko Kosmac
  • 61
  • 4
  • works on the initial view of the page but not after react has reset it from for example clicking somewhere on the page that causes a re-render.. manually writing in console `dataLayer.push({'event': 'optimize.activate'});` doesn't do anything – OZZIE Oct 03 '18 at 11:41