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

consochris
Visitor
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 

 

 

12 REPLIES 12

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

kathleen_jo
Employee Emeritus
kathleen_jo

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

Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.

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

ketil_flataker
Visitor
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

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

kjuvvala
Visitor
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

 

 

Tealium.png

Highlighted

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

kjuvvala
Visitor
kjuvvala
Also the image is not opening

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

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

florian_perl
Regular Visitor
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.

 

2017-12-28_10h34_22.png

 

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

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

neetuch
Visitor
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.

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

kathleen_jo
Employee Emeritus
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

Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.

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

PatrickHegnauer
Frequent Visitor
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

 

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

Sumanth
Visitor
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 

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

florian_perl
Regular Visitor
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.

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

Sumanth
Visitor
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.

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

florian_perl
Regular Visitor
florian_perl

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