Perform A/B test via GTM without page flickering

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

Probably, you’ve already come across a couple of guides on how to mitigate content flickering/flashing during A/B testing (including this awesome post by Sean Emmel). Generally, these guides contain simple yet valuable tips, e.g. using CSS over JS where applicable, moving the snippet higher up on the page, minifying the production code etc.

Obviously, in most cases these ”what-to-do”  tips are not followed by “how-exactly-do” instructions since a proper implementation of given recommendations (mostly) depends on your site’s operation peculiarities. However, if you’re using Google Tag Manager (you definitely should be using it), there is a nifty ready-to-use solution that may address the challenge.

So, in this post I’m going to show you one of the possible methods to mitigate page flickering and/or content flashing during AB tests via Google Tag Manager with Optimizely as an example.

AB test via Google Tag Manager + Optimizely: scheme

Using GTM to deploy Optimizely

Certainly, you can load Optimizely synchronously outside of GTM. Most probably, this will prevent flickering or flashing of page’s original content. But in case you want to load it asynchronously you can deploy Optimizely inside GTM. If you’re interested in an alternative option for loading Optimizely asynchronously, check this chapter.

First off, let’s apply to Optimizely official recommendations. As you can see, since Google Tag Manager does not yet support synchronous loading, the main challenge here is to have Optimizely activated BEFORE any UA hits.

One of the possible solutions here is to make use of data layer according to Optimizely recommendations.

AB test via Google Tag Manager + Optimizely: recommendation

But this method has at least two drawbacks:

  1. It fires tags in preassigned order, but does not guarantee tags processing in that order
  2. You still may experience content flashing/flickering because of an asynchronous deployment

Luckily, there is a quick solution.

Page-Hiding Snippet

Paste the following code right after the opening <head> tag, prior to any other code on the page.

Here’s a compressed version.

This function derives from Google Optimize 360 page-hidding snippet that’s been pointed out to me by Brian Kuhn. The logic is pretty much the same, I’ve just altered it according to my needs.

The function uses a class to hide the page until Optimizely library is loaded. Once Optimizely is ready OR 2 seconds have passed, the page gets visible again.

Thus, even with an asynchronous deployment we’re able to get rid of content flickering AND ensure that Optimizely has completely loaded before sending any hits to UA via GTM.

Step-by-step implementation

To perform AB tests via Google Tag manager without FOOC (flash of original content), follow this simple step-by-step guide for the implementation of the above solution.

Step 1

Paste the ‘async-hide’ function in the head section (above any other code).

Step 2

Create a Custom HTML Tag containing your Optimizely snippet and make it fire on all pages where you want to execute your experiment(s).

AB test via Google Tag Manager + Optimizely: custom html

Step 3

To ensure Optimizely is activated before any hits are sent to UA, you will need to change the trigger responsible for firing your UA pageview tag. Here’s an example:

AB test via Google Tag Manager + Optimizely: trigger

That’s it!

Consequently, this trigger will fire your UA tag regardless of whether or not Optimizely has loaded, so you may rest assured that data is being sent to Google.

Now, when we’re done with deployment process, let’s review possible ways of sending the experimental data to Analytics.

Leverage Optimizely X API

First and foremost, I’d recommend reviewing the following guide for “Optimizely + Universal Analytics” integration that uses an API call. This will help you to get a general understanding of the internal logic behind the offered solution.

However, this guide serves particularly to those users who either don’t have pre-existing Universal Analytics pageview tags (so they might want to use a Custom HTML tag to implement UA) or those who have both Optimizely and UA snippets hard-coded.

In case you already have a pre-configured UA tag (you do have it, right?), there is a solution that makes use of a Custom JS variable that returns data (experiment and variation names) within GTM.

But, again, this will only work if you’re using Optimizely Classic API.

In case you’re intended to use Optimizely X, make sure to study properly Optimizely X API documentation.

Here’s a simple example for using X API to pass experimental data to UA within GTM Custom JS variable.

Step 1

Create a Custom Dimension that will receive experimental data. We will need this dimension for creating reports, so think of a descriptive name for it.

Step 2

Create a Custom JS variable to collect data. Here’s an example.

Do not forget to paste your experiment ID! You can get it from here:

AB test via Google Tag Manager + Optimizely: get API ids

Step 3

Add a custom dimension to your main UA pageview tag and use the above variable as a value for it.

AB test via Google Tag Manager + Optimizely: custom dimension

Step 4

Check your integration. Now you should have experiment information sent to Google via your custom dimension.

If it all works the way you want it to work, publish your workspace.

Finally, let me give you a heads up on caveats.

Caveats

  1. This solution imposes a delay in your UA tag deployment because we need to ensure that it fires after Optimizely has been loaded.
  2. There are other possible solutions for mitigating content flashing/flickering that may suit you better. Check the links in the very beginning of this post.
  3. Optimizely dev team is still working on X API. Though the code I provided to retrieve experimental data using X API works fine, this is a temporary fix. Hopefully, I’ll have an opportunity to share even a better solution for this in the upcoming posts.

Load Optimizely Asynchronously

To load Optimizely asynchronously, you can also use a custom solution instead of native Optimizely snippet. Here’s a guide. Mind that if the A/B testing script is not loaded within a certain time, the experiment is not executed.

Summary

I hope all the information provided here will help you to perform A/B tests via GTM without original content flickering/flashing.

As for the usage of Optimizely X API for passing experimental data to Analytics, I’m definitely going to improve it and share the results here, in my blog. Stay tuned!

If you have questions/improvement suggestions on the solution, sound off in the comment section below! You can also contact me on Twitter and Google+.

 

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

Tag Manager , , , , ,