1.7K members online now
1.7K 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

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: 

  { 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');
  { Other Body Tags...}
  <script src="app.js" type="text/javascript"></script>


Thanks for any help you can provide. 

1 Expert replyverified_user

Variant with &quot;Synchronous blocking execution&quot; script in &lt;head&gt;

Google Employee
# 2
Google Employee



The brief answer is no, Optimize supports only asynchronous loading - I think that the paragraph that you mention is just using confusing terms.


Still I think that your request is common and I hope that there is better support for something like this in the future.


Today as a work-around you could perhaps use the page hiding snippet to initialize your SPA after Optimize loads (or after the page hiding timeout happens in worst case).


See here:



As you may notice there, the Optimize script will call the function dataLayer.hide.end() as soon as it loads.


So you could override it to initialize your app at that time.


For example for angular you would need to do manual bootstrapping

See: https://docs.angularjs.org/guide/bootstrap#manual-initialization


with adding something like in your app.js after removing the ng-app directive

(please make sure that you test first).



function init() {

   setTimeout(function() {

     // Make sure that the experiments will be able to run first.

     angular.bootstrap(document, ['myApp']);

   }, 0);


var actualHideEnd = dataLayer.hide.end;

if (!actualHideEnd) {

  // Either there is no page hiding installed any more or Optimize has already loaded.


} else {

  dataLayer.hide.end = function() {






Variant with &quot;Synchronous blocking execution&quot; script in &lt;head&gt;

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

Hi Dimitris,


Thank you for the detailed reply.


I was able to work around this by using server-side optimize. This way the app loads faster. The two drawbacks are that I had to implement the logic for determining targeting groups and we'll need an extra deploy to turn off the test.