Optimize
3.5K members online now
3.5K members online now
Everything you need to know about setting up Optimize including creating your account and container, linking to Google Analytics and how to tag your site.
Guide Me
star_border
Reply
Highlighted

Variant with "Synchronous blocking execution" script in <head>

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

I have a Single Page App that I am trying to A/B test. The feature I would like to A/B test is triggered as soon as my app.js loads and runs.

Is it possible to use Optimize to add a blocking script to the <head> tag that will run before app.js loads?

 

Based on the documentation here, it seems possible:

Using the "After opening tag" option with selector "head" means that the script change can run as early as when the Optimize snippet is first executed in the <HEAD> (synchronous blocking execution).

However, I thought the analytics.js script is loaded asynchronously. Based on my testing it seems this is the case - when I try to add a script to the <head> "After opening tag", it triggers after app.js loads and runs.


My HTML looks something like this: 

<head>
  { Other Head Tags... }
  <!-- Google Optimize CSS to prevent page flickering -->
  <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>

  <!-- Google Analytics Initialization -->
  <script type="text/javascript">
    (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','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXX-Y', 'auto');

    // Google Optimize plugin
    ga('require', 'GTM-XXXXXX');
  </script>
</head>
<body>
  { Other Body Tags...}
  <script src="app.js" type="text/javascript"></script>
</body>

 

Thanks for any help you can provide.