Integrating VWO With Shopify

Integrating Shopify with VWO allows you to create and run VWO tests on your Shopify store. The end-to-end process of integrating Shopify with VWO involves the following steps:

• Adding VWO SmartCode to your website pages
• Implementing Revenue Tracking

Things to Consider While Adding VWO SmartCode to Your Shopify Website

• When you add the VWO SmartCode to your Shopify Website, it is added to all the pages of your website except for the "Check Out" and "Thank you" pages. However, if you are on Shopify PLUS and wish to enable the tracking on the "Check Out" page, perform this, and for the "Thank you" page, perform this.
  
  
• If you wish to track subscription-based revenue collected in Shopify, refer to Tracking Subscription-based Revenue.

Adding VWO SmartCode to Your Website Pages

To add VWO SmartCode to your website, perform this:

Procedure

1. Sign in to your Shopify web store as an administrator.
2. From the navigation bar, go to Sales channels > Online Store.
3. Go to the Themes tab, click on the ellipsis (...), and select Edit Code.
4. Go to the theme.liquid file on the customization panel and then add the VWO SmartCode. VWO SmartCode will be added to all the pages (site-wide) in the selected theme. If your checkout process is on Shopify's domain, make sure to enable multiple domain tracking in VWO. To learn about running a test across multiple domains, refer to How to Enable Tests to Run Across Multiple Domains in VWO?
   
   NOTE:
   
   1. The access to checkout.liquid has been revoked by Shopify for all of its clients. However, the revenue conversion tracking can still be carried out via the additional scripts on the ‘thank you’ / ‘order status’ page that appears after successful payment.
   
   2. If you are trying to set up the ITP resolution implementation, you must add the configuration code snippet for ITP before the VWO SmartCode. To learn about different code snippets, refer to Resolving ITP Issues.
5. Click Save.

Verifying SmartCode Installation

To check if the VWO SmartCode is installed correctly on your webpage, follow these steps:

1. Navigate to: Main menu > Configurations > Websites and Apps > select your website > Code.
2. Enter your URL: In the Check if SmartCode is installed properly on your URL field, paste the URL of the page you want to verify.
3. Check results: Click the Check button. The SmartCode Checker will display the results, indicating whether the SmartCode is installed correctly and providing additional information if needed.

For more details on interpreting the results, refer to the VWO SmartCode Checker documentation.

Implementing Revenue Tracking

To implement the revenue tracking, perform this: 

Procedure

1. Sign in to your Shopify web store as an administrator.
2. From the navigation bar, click Settings.
3. On the Settings page, click Checkout.
4. Place the VWO SmartCode in the Additional Scripts field under Order status page.
   
5. Once you have added the VWO SmartCode, add the applicable JS code snippet right after the VWO SmartCode in the same field (Additional Scripts), as follows:
   For non-Data360 accounts:
   

   {% if first_time_accessed %}

   <script type="text/javascript">

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

   {% assign _vis_opt_revenue = total_price | divided_by: 100.0 %}

   window._vis_opt_queue = window._vis_opt_queue || [];

   window._vis_opt_queue.push(function() {_vis_opt_revenue_conversion('{{ _vis_opt_revenue }}');});

   window.VWO.push(['track.revenueConversion','{{ _vis_opt_revenue }}']);

   </script>

   {% endif %}

   view raw Shopify_Revenue_Tracking_Code.js hosted with ❤ by GitHub
   
   For Data360 accounts:
   If your account is enabled with Data360, you need to create a custom event for tracking the revenue and subsequently use that event to create a metric in a test campaign.
   Consider that you have created an event with the following details:
   Event name: Purchase
   Event API name: purchase
   Event property name: Revenue
   Event property API name: revenue
   
   ATTENTION: Remember to keep the Data Type of the event property as Number for revenue tracking.
   Now, create a metric with this event to track the revenue conversions in a test campaign. Once done, copy the following code and paste it into the Additional Scripts field under Order status page in Shopify:
   

   {% if first_time_accessed %}

   <script>

   {% assign _vis_opt_revenue = total_price | divided_by: 100.0 %}

   // Do not change anything in the following two lines

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

   VWO.event = VWO.event || function () {VWO.push(["event"].concat([].slice.call(arguments)))};

   VWO.event("purchase", {

   "revenue": {{_vis_opt_revenue }},

   });

   </script>

   {% endif %}

   view raw Shopify_revenue_code_for_Data360 hosted with ❤ by GitHub
6. To implement the changes, click Save.

Create a Standalone Revenue Tracking Goal

To create a standalone revenue tracking goal in VWO, perform this:

Procedure

1. Log in to your VWO dashboard, and go to Insights > Goal.
2. Click Create on the top right side of the dashboard.
3. Select Track Revenue as the goal type to track.
4. Enter the URL of the page where your successful transactions are recorded. Typically, the revenue value is available on the 'thank­you' page, where successful transaction data is collected.
5. To track revenue on multiple pages, click the Advanced option to include and exclude pages, define URL pattern, and regex.
6. Select the segmentation option if you want to track revenue collection from specific visitor groups. To learn about segmentation, refer to Targeting Variations to Visitor Segments in VWO.
7. Click Next to define the page audience. All unique visitors landing on this page are your goal audiences. Using the Advanced option, you can define advanced pattern-matching options to include either a broad URL with wildcard entries or a specific URL.

Add Revenue Goal To a Specific Test

To add revenue goal to a specific test, perform this:

Procedure

1. Create an A/B, Personalization, Multivariate, or Split test using VWO.
2. On the Goals page, select Track Revenue on, as the conversion goal type, and enter the Shopify conversion page (thank you page) as the goal URL. For example, *checkout.shopify.com*XXXXXX*, where XXXXXX is the number of your store.

Tracking Subscription-based Revenue

To track subscription-based revenue collected in Shopify using the ReCharge app's plugin, perform this:

Procedure

1. In the Shopify panel, open the ReCharge app.
2. To open the menu, click on the wrench icon present in the top right corner of the page.
3. From the menu, select the Checkout option.
4. Add VWO SmartCode followed by the respective revenue snippet, as shown below, on the Thank you page section:
   
   For Data360 accounts:
   

   If your account is enabled with Data360, you need to create a custom event for tracking the revenue and subsequently use that event to create a metric in a test campaign.
   Consider that you have created an event with the following details:
   Event name: Purchase
   Event API name: purchase
   Event property name: Revenue
   Event property API name: revenue,
   then paste the following code after the VWO SmartCode:

   ATTENTION: Remember to keep the Data Type of the event property as Number for revenue tracking.

   	<!-- Start VWO revenue script -->
   	<script type="text/javascript">
   	window.VWO = window.VWO || [];
   	VWO.event = VWO.event || function () { VWO.push(["event"].concat([].slice.call(arguments))) };
   	VWO.event("purchase", {
   	"revenue": {{ total_price }},
   	});
   	</script>
   	<!-- End VWO revenue script -->

   view raw ShopifySubscriptionBasedRevTrackingCode - Data360 hosted with ❤ by GitHub
   Now, create a metric with this event to track the revenue conversions in a test campaign.
   
   For Non-Data360 accounts:
   

   	<!-- Start VWO revenue script -->
   	<script type="text/javascript">
   	window.VWO = window.VWO || [];
   	window.VWO.push(['track.revenueConversion', '{{ total_price }}']);
   	window._vis_opt_queue = window._vis_opt_queue || [];
   	window._vis_opt_queue.push(function () { _vis_opt_revenue_conversion('{{ total_price }}'); });
   	</script>
   	<!-- End VWO revenue script -->

   view raw ShopifySubscriptionBasedRevTrackingCode - NonData360 hosted with ❤ by GitHub