VWO integration

VWO is an A/B testing tool used by businesses to optimize their conversion rates through experimentation. With VWO, you can easily create and test different versions of your site to find the most effective one. This includes testing various elements like CTA copy, its placement, size and color scheme.

When you integrate Piwik PRO with VWO, you can access VWO stats directly within Piwik PRO and compare your A/B tests. This integration brings together the strengths of both platforms, allowing you to make data-driven decisions based on comprehensive analysis.

In this article, we’ll guide you through the integration process with VWO.

Before you start

Here are some things to know before you begin this process:

• This integration is based on a data layer, custom dimensions and custom events. For each VWO campaign, you need to create a separate custom dimension and custom event, including separate triggers.
• You can install VWO on your site using our VWO Tracking Code tag.

Integrate Piwik PRO with VWO

The integration with VWO works by creating a data layer to store VWO data. This data layer lets you access VWO stats using tags in Piwik PRO. These tags then transfer the data to custom dimensions and custom events, so you can easily see it in your Piwik PRO reports.

To integrate Piwik PRO with VWO, follow these steps:

1. Log in to Piwik PRO.
2. Go to Menu > Tag Manager.
3. Create a tag of the following type: Custom code (async).
4. Name the tag: VWO data layer push or use another name.
5. Add the following code in tag settings:

   <script type = "text/javascript">
       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 (
               expId &&
               variationId && ["VISUAL_AB", "VISUAL", "SPLIT_URL"].indexOf(_vwo_exp[expId].type) > -1
           ) {
               window.dataLayer.push({
                   "event": 'VWO-data-push',
                   "CampaignId": expId,
                   "CampaignName": _vwo_exp[expId].name.substring(0, 70),
                   "VariationId": variationId,
                   "VariationName": _vwo_exp[expId].comb_n[variationId]
               });
           }
       }]);
   </script>
   

   

6. Add the following trigger: All page views.
7. Save and publish the tag.
8. Go to Menu > Analytics > Settings.
9. On the left, click Custom dimensions.
10. Create a new session dimension. Name it the same way as your campaign in VWO. Example: VWO campaign: add-to-cart button color.

    

    Note: Create a custom session dimension for each VWO campaign you want to see in Piwik PRO.

11. Go back to Menu > Tag Manager.
12. Create a variable of the following type: Data layer variable.
13. Name it Variation name or use another name.
14. Set the following value for this variable: VariationName.

    

15. Save the variable.
16. Create another variable of the same type: Data layer variable.
17. Name it Campaign name or use another name.
18. Set the following value for this variable: CampaignName.

    

19. Save the variable.
20. Create a new tag of the following type: Custom event.
21. Name it the same way as your campaign in VWO. Example: VWO campaign: add-to-cart button color.
22. Set the following parameters:
    • Category: VWO
    • Action: {{ Campaign name }}
    • Name: {{ Variation name }}

    

23. Add the custom dimension you created in step 10 to this event and assign the following value to it: {{ Variation name }}.

    

24. Add a new trigger to this tag. Choose the following trigger type: Data layer event.
25. Set the following conditions:
    • Event name contains VWO-data-push
    • When all conditions are met: {{ Campaign name }} contains <campaign name used in VWO for which you are creating an event>

    

    Note: Create a custom event tag for each VWO campaign you want to see in Piwik PRO. Each active A/B test should have its own custom event tag, configured with the correct trigger to match the experiment name. Additionally, custom dimensions should be set in the appropriate slots to prevent data from being overwritten between tests.

26. Save and publish your tag.
27. Voila! Now your VWO stats will be visible in Piwik PRO reports.

VWO stats in Piwik PRO reports

Now, we’ll show you how to access your A/B test data from VWO in Piwik PRO reports.

To view reports, follow these steps:

1. Go to Menu > Analytics.
2. Navigate to Reports.
3. On the left, pick the following report: Custom dimensions or Custom events. Your VWO data will be visible in both of these reports.

   

4. (Optional) You can also create two kinds of segments to help you analyze data. One for sessions including the selected campaign. Condition: <campaign name> is not.

   

5. (Optional) And you can create another segment for sessions that include the selected A/B variation. Condition: <campaign name> contains <variation name>.