Tutorial: how to set up Google Optimize (A/B Test tool)

[consochris]

Hello, 

Google has launched a new tool (beta) named Google Optimize (https://www.google.com/analytics/optimize/) and enables A/B testing on your website.

Google FAQ page: https://support.google.com/360suite/optimize/answer/6262084 

To set it up, using Tealium you need to follow those steps: 

1. Open your Google Analytics Tag in Tealium, click edit, Advanced and Edit templates

2. Add the following part of text to line 303:

//Set Google Optimize
u.o("require", "GTM-T324QFW");

Screenshot image: http://tinypic.com/r/2i067lt/9 

[kathleen_jo]

Thank you for posting this tutorial, @consochris. Much appreciated.

[ketil_flataker]

Hi @consochris!

How did you implement the page hiding snippet in Tealium IQ?

As described here, it looks like we need to move enitre GA tag to the webpage, but I want to keep it in Tealium IQ.

https://support.google.com/360suite/optimize/answer/6262084#step-2

Regards, 

Ketil

[kjuvvala]

Can someone please confirm where exactly do we need to place the below code in the Edit Template page of the GA tag?

//Set Google Optimize
u.o("require", "GTM-XXXXX");

As line 303 shows some other text

it is line 356 for Universal Tag

[kjuvvala]

Also the image is not opening

Screenshot image: http://tinypic.com/r/2i067lt/9

[florian_perl]

Dear All,

I would say a better still way is to include the whole modified GA snippet in Tealium sync tag (accessible via 'Manage Templates'). This way it loads quicker, which is so important to speed up loading of variations and reduce flickering.

Still, the primary issue is the hiding snippet. I have added the following to the utag.sync template:

//create data layer
  var dataLayer = dataLayer || [];

//create style for hiding element
  var css = '.async-hide { opacity: 0 !important} ',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  };

//hiding snippet
  (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-MF5BFM5':true});

head.appendChild(style);

It seems to work, but if anyone has a better suggestion or can improve the hiding snippet, please let me know.

Thanks,

Florian

[neetuch]

Hi,

I tried the approaches listed here. But in my case, calling

u.all("require", 'GTM-XXXXXXX'); worked rather than 

u.o("require", 'GTM-XXXXXXX');

And the experiment details were getting captured successfully in Google Optimize chrome plugin when doing a preview.

[kathleen_jo]

u.all worked @neetuch, huh? Great feedback! Thank you for letting us know. @kjuvvala have you tried u.all instead? Give it a go and let us know how it goes! 

@florian_perl Thank you for the hiding snippet code. Has anybody else used it and can give Florian feedback? I'm looking at you @consochris! LOL

[PatrickHegnauer]

Hi @all I'm looking for an approach to load the google optimize snippet only in specific profiles. We run a library which includes the GA Universal Tag. A duplicated Tag in the specific profile is no option. So I tried to add following code snippet to the tag template:

if(ut.profile == '{profileName}'){ 
//Set Google Optimize 
u.all("require", "GTM-XXXXXX"); 
}

If we run this, the GA Tag is blocked and no request were sending to Google Analytics. Any Ideas? 

Kind Regards

Patrick

[Sumanth]

Tried all the solution they didn't work for me.

//Set Google Optimize u.all("require", "GTM-XXXXXX"); 
}

//Set Google Optimize u.o("require", "GTM-XXXXXX"); 
}

 Can you please let me know how to implement optimize in Tealium 

[florian_perl]

@Sumanth, have you tried the sync tag (a few comments above)? It is not the most elegant way, but it is hassle-free and - importantly! - gets Optimize to load a bit earlier.

[Sumanth]

@florian_perl Thanks for getting back.

Yes, I have added the optimize script in utag sync.
<!-- Global site tag (gtag.js) - Google Analytics -->
&lt;script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-X">&lt;/script&gt;
&lt;script&gt;
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-XXXXX-X', { 'optimize_id': 'GTM-XXXXXX'});
&lt;/script&gt;


When I run AB test on the page. It is unable to find the Optimize ID as the script is in the sync file and not rendered in the head tag. As far as I can understand the Optimize code should be in the head tag.

[florian_perl]

If utag.sync.js is in the <head> section, then you should be all good.