Leveraging Convert AB Testing with Your Shopify Plugin to Demonstrate Conversion Uplift

This document outlines the approach a company can take to utilize Convert AB testing with their Shopify plugin to demonstrate an increase in conversions.

1. Introduction

   • Target Audience: Shopify plugin developers, marketing teams, and technical staff.

     High-Level Overview

     What is AB Testing?

     Definition: AB testing compares two versions of a webpage or product to determine which one performs better.

     Importance: AB testing allows businesses to make data-driven decisions, demonstrating the impact of their Shopify plugin on conversions.

     Introduction to Convert

     What is Convert? Convert is an AB testing tool that enables companies to create, manage, and analyze experiments to improve website performance and user experience.

     Relevance to Shopify Plugin: By integrating Convert with your Shopify plugin, you can directly measure and demonstrate the impact of your tool on key performance indicators like conversions.

     Objective of Testing

     Proving Conversion Uplift: The primary goal is to showcase how the plugin contributes to increased sales, signups, or other key conversion metrics on a Shopify store.

     Building Trust with Customers: Validating the plugin's effectiveness through data-driven results increases customer trust and drives adoption.

     Technical Implementation

     Integrating Convert with Your Shopify Plugin

     Project Snippet Integration: Convert allows the creation of multiple projects, enabling you to provide a separate testing unit for each client. This ensures that each client’s experiments are isolated and can be managed independently.

     • For more details on what a project is and how to manage them, refer to Convert's guide on projects.
     • To create projects programmatically, refer to the API documentation on how to create a project.

     Each client can have a dedicated Convert project, and you can integrate the corresponding Convert project snippet directly into your Shopify plugin.

     Example Snippet:

     <!-- begin Convert Experiences code-->
<script type="text/javascript" src="//cdn-4.convertexperiments.com/js/10014852-10016248.js"></script>
<!-- end Convert Experiences code -->


     Managing Traffic and Executing Code Based on Variation Assignments

     Traffic Assignment: Convert will randomly assign visitors to different variations within an experiment, ensuring that the test results are statistically valid and unbiased.

     Convert can also identify which variation a visitor has been assigned to, providing the necessary information for executing targeted actions.

     Programmatically Adding the Tracking Code

     Including the Convert Tracking Code Programmatically: You can dynamically insert the Convert tracking code into your Shopify store’s pages programmatically within your plugin. This can be useful if you need to conditionally load the tracking code based on certain criteria.

     Example Code:

     // Function to inject Convert tracking code into the page
function addConvertTrackingCode() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//cdn-4.convertexperiments.com/js/10014852-10016248.js'; // Replace with your specific project snippet URL
document.head.appendChild(script);
console.log("Convert tracking code has been added to the page.");
}

// Add the Convert tracking code
addConvertTrackingCode();


     Triggering Plugin Code with experience_variation_decided Event

     Direct Execution or Variation Flagging: You can use the experience.variation_decided event in Convert to trigger your plugin code once a variation has been decided. Alternatively, you can set a variation flag that your plugin can later check to decide whether to enable specific functionality.

     Example: Setting a Variation Flag

     var _conv_q = window._conv_q || [];
_conv_q.push({
what: 'addListener',
params: {
event: 'experience.variation_decided',
handler: function(event) {
var data = event.data;
var experimentId = "111111"; // Replace with your experiment ID
var desiredVariationId = "22222"; // Replace with your desired variation ID

if (data.experience_id === experimentId && data.variation_id === desiredVariationId) {
// Set a flag instead of executing the plugin code directly
window.pluginVariationFlag = true;
console.log("Variation decided, setting flag for variation:", data.variation_name);
} else {
window.pluginVariationFlag = false;
}
}
}
});


     Using the Flag in Your Plugin:

     // Later in your plugin code, you can check the flag to enable specific functionality
if (window.pluginVariationFlag) {
// Enable the functionality based on the variation flag
console.log("Plugin functionality enabled based on variation flag.");
// Your custom plugin code
} else {
console.log("Plugin functionality not enabled.");
}


     Launching Experiments Programmatically

     Executing Experiments Programmatically: Convert allows you to bucket visitors into an experiment programmatically, providing you control over when and how specific experiments are executed based on custom logic.

     • For more information, refer to Convert's guide on bucketing visitors into an experiment programmatically.

     Example Code:

     var _conv_q = window._conv_q || [];
_conv_q.push(["executeExperiment", "111111"]); // Replace "111111" with your experiment ID


     This example demonstrates how to programmatically execute a specific experiment by pushing the "executeExperiment" command to the Convert queue with the desired experiment ID. This gives you the flexibility to trigger experiments based on conditions or user actions specific to your Shopify plugin.

     Complete Integrated Example

     Below is a complete example that integrates all the key aspects discussed above, including adding the tracking code, listening for the variation decision event, and programmatically executing an experiment.

     Integrated Code Example:

     // Function to inject Convert tracking code into the page
function addConvertTrackingCode() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//cdn-4.convertexperiments.com/js/10014852-10016248.js'; // Replace with your specific project snippet URL
document.head.appendChild(script);
console.log("Convert tracking code has been added to the page.");
}

// Add the Convert tracking code
addConvertTrackingCode();

// Listen for the variation decision event and set a flag
var _conv_q = window._conv_q || [];
_conv_q.push({
what: 'addListener',
params: {
event: 'experience.variation_decided',
handler: function(event) {
var data = event.data;
var experimentId = "111111"; // Replace with your experiment ID
var desiredVariationId = "22222"; // Replace with your desired variation ID

if (data.experience_id === experimentId && data.variation_id === desiredVariationId) {
// Set a flag instead of executing the plugin code directly
window.pluginVariationFlag = true;
console.log("Variation decided, setting flag for variation:", data.variation_name);
} else {
window.pluginVariationFlag = false;
}
}
}
});

// Check the flag later in your plugin code to enable specific functionality
if (window.pluginVariationFlag) {
// Enable the functionality based on the variation flag
console.log("Plugin functionality enabled based on variation flag.");
// Your custom plugin code
} else {
console.log("Plugin functionality not enabled.");
}

// Programmatically execute an experiment
_conv_q.push(["executeExperiment", "111111"]); // Replace "111111" with your experiment ID


     Programmatically Adding and Configuring Experiments

     Experiment Setup: You can programmatically add and configure experiments within Convert using their API. This includes defining the targeting audiences, pages, or parameters to ensure the experiment reaches the desired users.

     You can also set up your metrics and goals that will be used to evaluate the experiment’s success.

     • For detailed instructions, refer to the API documentation on how to create and configure an experiment.

     Tracking and Utilizing Experiment Data

     Using convert.currentData.experiments: Convert provides a web API object convert.currentData.experiments that returns the experiments and variations a visitor has been part of. This is useful for integrating the experiment data with third-party systems or for custom logic based on the visitor's variation.

     Sample Code to Check Variation Trigger:

     // Assuming you know the experiment ID and the variation ID you want to check
var experimentId = 123456; // Replace with your experiment ID
var variationId = 654321; // Replace with your variation ID

// Check if the experiment has been triggered and the visitor is part of the desired variation
if (convert && convert.currentData && convert.currentData.experiments) {
var experiments = convert.currentData.experiments;
if (experiments[experimentId] && experiments[experimentId].variation_id === variationId) {
// Execute your code for the specific variation
console.log("Visitor is part of the desired variation. Execute your custom code here.");
} else {
console.log("Visitor is not part of the desired variation.");
}
} else {
console.log("Experiment data is not available.");
}


     Programmatically Creating Purchase Metrics

     Creating Purchase Metrics via API: You can programmatically create Purchase metrics and attach them to your experiments using the Convert API. This allows you to automate the tracking of key performance indicators like Purchase conversions, Revenue per Visitor, and Average Products per Visitor.

     • For detailed instructions, refer to the API documentation on how to create a Purchase goal.

     Tracking Conversions with Shopify Webhooks

     Creating a Shopify Webhook: Utilize your plugin to create a Shopify webhook that tracks conversions (e.g., completed orders, signups) and sends this data directly to Convert.

     Convert provides an endpoint to receive Shopify Webhook requests when an Order Payment occurs. This can be linked to a Purchase goal within Convert, allowing you to track Purchase conversions, Revenue per Visitor, and Average Products per Visitor.

     • Example: When a sale is completed, the webhook sends a conversion event to Convert, linking it back to the variation being tested.
     • For detailed integration instructions, refer to Convert's guide on adding revenue tracking via Shopify Webhooks.

     Case Study Example: Tangiblee

     Background: Tangiblee, an eCommerce product visualization solution, leveraged Convert AB testing to optimize their tool's performance on Shopify stores. By running targeted experiments, they were able to demonstrate a significant uplift in conversion rates.

     Implementation: Tangiblee integrated Convert into their Shopify plugin, setting up experiments to test the impact of their tool on conversion metrics. They programmatically configured their tests, set up goals, and utilized Shopify webhooks to track real-time conversion data.

     Results: The experiments led to a measurable increase in conversion rates, validating Tangiblee's value proposition to their clients. The detailed case study can be accessed here.

     Conclusion: This case study illustrates how Convert can be effectively utilized to prove the impact of a Shopify plugin on key performance indicators.

     Conclusion

     Recap: Convert AB testing, with the integration of multiple projects, project snippets, random traffic assignment, programmatically configured experiments, programmatically created Purchase metrics, and Shopify webhooks, can demonstrate the effectiveness of a Shopify plugin.

     Next Steps: Start implementing these tests with your Shopify plugin to validate its impact on conversions.

     Additional Resources

     • Convert Knowledge Base: For comprehensive guides and troubleshooting tips, visit the Convert Knowledge Base.
     • Convert API Documentation: For detailed API references and examples, visit the Convert API documentation.
     • Support: For any assistance, contact Convert support at support@convert.com.