The Marketing Technologist.

We talk about analytics, code, data science and everything related to marketing technology. Backed by the tech geeks of Greenhouse.

How to improve Visual Website Optimizer's Google Tag Manager integration

If you're running Google Tag Manager on your site, and use Visual Website Optimizer for A/B Testing, you've probably noticed that VWO's standard GTM integration is slightly lacking. While the integration suggested by VWO does work, you're left with a lot of manual work, as you have to add or change tags for every new test.

The issue

The main issue with the integration is VWO's use of key/pair values in the dataLayer. For each campaign, Visual Website Optimizer adds 2 objects to GTM's dataLayer:

  • Campaign-1: "Variation-1"
  • event: "VWO"

The original integration uses the VWO event and fires a tag that sends Variation-1 to Google Analytics. If you're using a Custom Dimension that means you could potentially have Variation-1 for multiple tests in your dimension, and have no way in tracking which campaign it was. You'll also have to add a new tag for every test you want to run.

How to improve

Improving the standard integration is easy, and you'll only have to do it once. First, you need a Trigger for event equals VWO, so you can fire a tag when VWO adds data to the dataLayer. Next, make the following custom HTML tag:

{<1>}alt text

<script>
// jQuery version
$.each(dataLayer,function(i,v){
    for(var k in dataLayer[i]){
      if(/^Campaign/.test(k))
        dataLayer.push({'event':'vwovar','vwoCampVar': k+"_"+dataLayer[i][k]});   
    }
});
</script>

if you're not using jQuery, or don't want your tags to be dependent, use the regular javascript version:

<script>
// Regular JS
for (var key in dataLayer) {
   if (dataLayer.hasOwnProperty(key)) {
       var obj = dataLayer[key];
        for (var prop in obj) {
          if(obj.hasOwnProperty(prop)){
            if(/^Campaign/.test(prop))
                dataLayer.push({'event':'vwovar','vwoCampVar': prop+"_"+obj[prop]});  
          }
       }
    }
}
</script>

For every page that has a test live, you should now have an extra dataLayer object called vwoCampVar; the campaign ánd the variant. Next, create the vwoCampVar variable so you can use it in GTM:
{<2>}alt text

You now have a variable in GTM that you can send to Analytics any way you wish, the content of the variable isn't something like Variation-1 anymore, but Campaign-1_Variation-1, letting you find the right campaign in Analytics and making sure your reports are accurate. Filtering and creating custom reports is much easier, and you can plot lines like a pro. This is how it will look if you name your Custom Dimension 'VWO Tests'.

{<3>}alt text

Bonus: if you name your variations in VWO (you should), that name will show up in GA!