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>}

<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>}

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>}

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