Has anyone been successful in implementing google optimize in a SPA React App?

Question

I am fairly new to the Google Analytics Suite and am currently trying to integrate Google Optimize for A/B testing in a react app.

I have gotten to the point where the variant changes display on the desired web page, but only in Preview mode, and am stumped as to how to proceed to viewing the variant changes on a live site.

So far:

• google optimize scripts are installed in app

  <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-XXXXXXX':true});</script>

• ga tracking is setup using ReactGA

• GTM is setup and is firing tags to track

• firing google optimize experiments on custom activation event and using dataLayer to push new events

  const initializeReactGa = () => { console.log('called to initialize react ga'); ReactGA.initialize(config.gaTag) ReactGA.ga('require', config.optimizeTag); ReactGA.pageview(window.location.pathname + window.location.search); }

  const googleOptimizeLoader = () => { console.log('called google optimize loader'); if(window.dataLayer) { window.dataLayer.push({'event': 'optimize.activate'}) } }

The problem

• unable to see variant changes in live site (without preview running)

Any help is appreciated.

TIA

Nayyir

[SOLVED]

Was able to determine the issues were not with the setup. The issue was that google optimize's cookie management was unable to set the required cookie for the expirement on localhost:3000, but rather a custom domain pointing to localhost, similar to XXXX.local:3000.

Answer 1

This might be what you are looking for

How to Add Google Optimize A/B Testing to Your React App in 10 Lines of Code