Integrating VWO With Google Universal Analytics Using Google Tag Manager (Custom Events)

Integrating VWO with Google Tag Manager (GTM) enables you to push your VWO campaign data to Google Universal Analytics (UA) and other analytics tools.

You can push VWO data to UA by using GTM in the following two ways:

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 how to do this, refer to Integrating VWO with UA via Google Tag Manager (Custom Dimensions).

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. Setting up this integration is a four-step process:

• • Create Data Layer Variable
  • Create Firing Rules
  • Create GTM Tags
  • Enable GTM Integration in VWO

Create Data Layer Variable

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

• CampaignId

• VariationId

• CampaignName

• VariationName

CampaignId

For the campaignId field, configure the following:

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

For the variationId field, configure the following:

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

For the variationName field, configure the following:

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

For the campaignName field, configure the following:

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).

Create 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 by configuring the following fields:

• Trigger Name: VWO Generic

• Under Trigger type, select Custom Event.
  
  NOTE: Click the Custom Event textbox and wait for the options to appear. Now select the one you want.
• Put the Event Name as VWO. The event name must always be VWO.
  
  NOTE: This event is stored in VWO libraries and pushed when the GTM integration is enabled for the test.

• 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 by configuring the following fields:

• Trigger Name: VWO Data Push

• Under Trigger type, select Custom Event.
  
  NOTE: Click the Custom Event textbox and wait for the options to appear. Now select the one you want.

• Write the Event name as VWO-data-push. The event name must always be VWO-data-push.

• For the field, This trigger fires on, select Some Custom Events.

• For the next field, select the CampaignId (Cid) and VariationId (Vid) variables, and then set the condition as does not equal 0 (zero).

Create 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.

  <script type = "text/javascript" >

  /* VWO GTM integration code starts */

  (function() {

  window.VWO = window.VWO || [];

  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' && _vwo_exp[expId].GTM) {

  window.dataLayer.push({

  "CampaignId": expId,

  "CampaignName": _vwo_exp[expId].name,

  "VariationId": variationId,

  "VariationName": _vwo_exp[expId].comb_n[variationId]

  });

  window.dataLayer.push({

  event: 'VWO-data-push'

  });

  }

  }]);

  })();

  /* VWO GTM integration code ends */

  </script>

  view raw gtmCustEvents.js hosted with ❤ by GitHub
  NOTE: If you're using any variable other than "dataLayer", you need to replace the instances of "dataLayer" correspondingly.

• Click the Triggering pane, and then select VWO Generic as firing triggers.

• 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: {{Cid}}:{{CName}}

• Label: {{Vid}}:{{Vname}}

• Value: Leave Empty

• Non-Interaction Hit: True

• Select Enable overriding settings in this tag option

• Tracking ID: In this field, enter the tracking ID of the data you want to push. For example, in our case, the UA tracking ID could be UA-1234567-1.

• Triggering: Select VWO Data Push trigger.

  NOTE: If your website is a Single Page Application (SPA), you may observe misattribution of traffic source in Google Analytics(GA). To resolve this, refer to this blog.

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

Procedure

1. Log in to your Analytics account. 
2. From the panel on the left, go to Audience > Overview.
3. Add a segment by click on +Add Segment > New Segment.
4. From the top right corner, specify the dates where the campaign was running. 
5. Specify the conditions by clicking on Conditions > Users.
   
6. Select Event Action from the first drop-down and select Contains operation from the second one. Now click on the blank field to select the campaign name from the auto-populated list.
7. Select the AND operator to add an Event Label
8. Select Event Label from the first drop-down and select Contains operation from the second one. Now click on the blank field to select the variant name from the auto-populated list.
   
   NOTE: You can select each one of them one by one to see the respective data being tracked for respective variations.
   

Enable GTM Integration in VWO

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

Procedure

1. Login to your VWO account.
2. Go to Testing and select a testing type, say A/B.
3. On the OTHERS page, expand the Integrate with third-party products, and select the option Google Tag Manager.
   NOTE: The Google Tag Manager option appears only after you have enabled it in theINTEGRATIONS section.
4. If you want to enable the integration for a specific test, select the test and from Summary, go to. Click Settings > Others and select Google Tag Manager from the Integrate With Third-Party Products section.