Integrate VWO with Universal Analytics by Using Google Tag Manager (Custom Events)

Last updated

Integrate VWO with Universal Analytics by Using Google Tag Manager Integrating VWO with Google Tag Manager (GTM) allows you to push your VWO campaign data to Google Universal Analytics (UA) and other analytics tools. There are two ways you can push VWO data to UA by using GTM:

  1. Set a custom dimension at the user level and build custom reports. This is the default method and requires you to create a different tag, variable, and trigger for every VWO test. To learn about the steps to perform in this process, click here.
  2. Create data layer variables to push every test and variation data as events through GTM tags. This is a one-time integration process to avoid setting up separate data layer variables and custom dimensions for every campaign. In this article, we will discuss the one-time integration process involving the following high-level tasks:
    • Create Data Layer Variable
    • Create Firing Rules
    • Create GTM Tags
    • Enable GTM in VWO

Creating Data Layer Variable

To get started with GTM integration, create the following four data layer variables with the default value as 0. The variables are used in later steps to create tags and define triggers for events to execute.

  • CampaignId
  • VariationId
  • CampaignName
  • VariationName

CampaignId

Update the following fields as shown in the screenshot:

  1. Title: Cid 
  2. Data Layer Variable Name: CampaignId.
  3. Data Layer Version: Version 1.
  4. Set Default Value: Check the option, and then enter the value as 0 (zero). 

VariationId

Update the following fields as shown in the screenshot:

  1. Title: Vid
  2. Data Layer Variable Name: VariationId.
  3. Data Layer Version: Version 1.
  4. Set Default Value: Select the option and enter the value as 0 (zero).

VariationName

Update the following fields as shown in the screenshot:

  1. Title: Vname
  2. Data Layer Variable: VariationName.
  3. Data Layer Version: Version 1.
  4. Set Default Value: Select the option, and then select the value as 0 (zero).

CampaignName

Update the following fields as shown in the screenshot:

  1. Title: CName
  2. Data Layer Variable: CampaignName.
  3. Data Layer Version: Version 1.
  4. Set Default Value: Select the option, and then type the value as 0 (zero).

Creating Firing Rules for the Event

Also known as Triggers, firing rules are conditions that evaluate to either fire or not fire an event to the tags. Create the following two event rules that will enable VWO to push campaign data to GTM.

  1. Create a firing rule for the Campaign ID data variable:
    • Tag Name: VWO Generic
    • Under Trigger type, select Custom Event.
    • Put the Event Name as VWO. The event name must always be VWO.
    • For the field This trigger fires on, select Some Custom Events.
    • For the next field, select the CampaignId variable created already (Cid), and then the condition equals 0 (zero).
  2. Create another firing rule for the Campaign ID and Variation ID data variables:
    • Tag Name: VWO Data Push
    • Under Trigger type, select Custom Event.
    • Write the Event name as VWO. The event name must always be VWO.
    • For the field This trigger fires on, select Some Custom Events.
    • For the next field, select the CampaignId and VariationId variables, and then set the condition as does not equal 0 (zero).

Creating GTM Tags

Tags are code snippets that finally push the data captured by the variables and fired by the triggers, to your analytics tool, such as Google Analytics. To complete the process in the GTM dashboard, create the following two tags:

  1. VWO-GTM-Integration:
    • Click Tags in the GTM dashboard, and then select New.
    • Edit Tag Configuration, and then select the Custom HTML tag option.
    • Enter the following custom code. If you are integrating SPAs, use the code snippet at the end of the page under ‘SPA Integration’.
      <script type="text/javascript">
      var _vis_opt_queue = window._vis_opt_queue || [], _vis_counter = 0; window.dataLayer = window.dataLayer || [];
      _vis_opt_queue.push(function() {
      try {
      if(!_vis_counter) {
      var _vis_data = {},_vis_combination,_vis_id,_vis_l=0;
      for(;_vis_l<_vwo_exp_ids.length;_vis_l++) {
      _vis_id = _vwo_exp_ids[_vis_l];
      if(_vwo_exp[_vis_id].ready) {
      _vis_combination = _vis_opt_readCookie('_vis_opt_exp_'+_vis_id+'_combi');
      if(typeof(_vwo_exp[_vis_id].combination_chosen) != "undefined")
      _vis_combination = _vwo_exp[_vis_id].combination_chosen;
      if(typeof(_vwo_exp[_vis_id].comb_n[_vis_combination]) != "undefined") {
      window.dataLayer.push({"CampaignId" : _vis_id,"CampaignName" : _vwo_exp[_vis_id].name, "VariationId" : _vis_combination, "VariationName":_vwo_exp[_vis_id].comb_n[_vis_combination],"event":"VWO"});
      _vis_counter++;
      }
      }
      }
      }
      }
      catch(err) {};
      });
      </script>
    • Click the Triggering pane, and then select VWO Generic as firing triggers.
  2. VWO-UA-Integration:
    • Click Tags in the GTM dashboard, and then select New.
    • Edit Tag Configuration, and then select the Universal Analytics tag option.
    • In Track Type, select Event.
    • In Category, select VWO.
    • Action: {{CampaignId}}:{{CampaignName}}
    • Label: {{VariationId}}:{{VariationName}}
    • Value: Leave Empty
    • Non-Interaction Hit: True
    • Triggering: Select VWO Data Push trigger.

This is one-time integration to push all your test data by using GTM tags. You must also enable GTM Integration option for the tests. To view the data in your Analytics account, please set up the following segment:

Enabling GTM Integration in VWO

Now that you have configured GTM, you just need to enable GTM integration within the VWO Dashboard.

  • To enable integration for a specific campaign, On the last screen of the test creation process, under Integrate with Third-Party Products, select the Google Tag Manager integration option and Save.
  • To enable GA integration across all campaigns in your account, Click Settings, and then select Campaign Settings. Under Integrations, select the Google Tag Manager option and Save.

SPA Integration

For any SPA integration with VWO, you must add the following code snippet to the website, anywhere between <head> </head> elements, but before the second code snippet. This code is common for all SPA integration and must be installed only once even if you have multiple tools to integrate. For example, you may want to integrate both Omniture and Mixpanel.

The first code snippet is common to all SPA integrations, while the second snippet is specific to the tool you want to integrate.

<script type="text/javascript">
!function(v,w,o){var e=[],t=[],z=function(n,a){a.e===n[0]&&a.c.apply(this,[n])},u=function(n,a){a.e&&a.e!==n[1]||a.v&&a.v!==n[2]||a.c.apply(this,[n])},c=function(n){for(var a=0;a<t.length;a++)z(n,t[a]);if("rH"===n[0]||"vS"===n[0])for(a=0;a<e.length;a++)u(n,e[a])},r=w.push;w.push=function(){var n=arguments[0];c(n),r.apply(w,[].slice.call(arguments))},v.onVariationApplied=function(n,t,s){"function"==typeof n&&(s=n,n=null,t=null),s=s||o;var c={e:n,v:t,c:s};e.push(c);for(var r=0;r<w.length;r++)("rH"===w[r][0]||"vS"===w[r][0])&&u(w[r],c)},v.onEventReceive=function(n,e){e=e||o;var s={e:n,c:e};t.push(s);for(var c=0;c<w.length;c++)u(w[c],s)}}(window.VWO=window.VWO||[],window._vwo_evq=window._vwo_evq||[], function(){});
</script>

In Addition to the code above, you must add the following additional code for GTM.

<script type="text/javascript">(function () {
window.dataLayer = window.dataLayer || [];
window.VWO.push(['onVariationApplied', function (data) {
if(!data) {
return;
}
var expId = data[1],
variationId = data[2];
if(typeof(_vwo_exp[expId].comb_n[variationId]) !== 'undefined') {
window.dataLayer.push({"CampaignId" : expId,"CampaignName" : _vwo_exp[expId].name, "VariationId" : variationId, "VariationName":_vwo_exp[expId].comb_n[variationId]});
window.dataLayer.push({event: 'VWO'});
}
}]);
})();

</script>

 

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login

Product
Resources Home