How Can You Track Purchases in Shopify with Convert Experiences Using Google Tag Manager?

This guide will show you how to use Google Tag Manager (GTM) to effectively track purchases without modifying your Shopify theme code.

Overview

• Objective: Track purchase conversions in Convert Experiences on Shopify using GTM.
• Prerequisites:
  • An existing GTM event that fires on the Purchase Confirmation Page.
  • Access to your Shopify store's GTM container.
  • Convert Experiences installed and running on your Shopify store.
• Key Benefits:
  • Simplifies tracking by using GTM.
  • Avoids modifying Shopify's theme code.
  • Ensures accurate conversion tracking for your experiments.

Step-by-Step Guide

1. Add Code to Your Convert Experiences Global Project JS

To ensure that Convert Experiences can track and attribute conversions correctly, you need to add specific code to your project's Global JavaScript settings in the Convert Experiences app.

Steps:

1. Log in to Convert Experiences:

   • Navigate to your Convert Experiences dashboard.

2. Access Project Settings:

   • Go to Projects and select the project you're working on.

3. Navigate to Global Project JS:

   • In the left-hand menu, click on Configuration.
   • Select Global Project JS.

4. Add the Following Code:

   1. Explanation:

      • This script collects necessary attributes from Convert Experiences and stores them in localStorage as convert_attributes.
      • It ensures that the tracking code on the Purchase Confirmation Page can access these attributes to send conversion data.

      Save the Changes:

      • Click Save to apply the changes to your project.

   Note: If you are using the legacy tracking code (the non-Beta version) of Convert Experiences, please refer to the Convert Experiences documentation for the appropriate code to use in the Global Project JS section.

   2. Prepare the Tracking Code for GTM

   You will create a GTM Custom HTML Tag that sends purchase conversion data to Convert Experiences when the GTM event fires on the Purchase Confirmation Page.

   Code for the GTM Custom HTML Tag:

   Explanation:

   • This script retrieves convert_attributes from localStorage and sends conversion data to Convert Experiences.
   • It uses GTM variables to obtain the transaction amount, transaction ID, and product count.
   • The code includes error handling and debug logs to assist with testing and troubleshooting.

   3. Configure GTM Variables

   Ensure the following GTM variables are set up in your GTM container:

   1. OrderAmount ()

      • Type: Data Layer Variable
      • Data Layer Variable Name: The name of the data layer variable that holds the transaction amount (e.g., transactionTotal).

   2. TransactionId ()

      • Type: Data Layer Variable
      • Data Layer Variable Name: The name of the data layer variable that holds the transaction ID (e.g., transactionId).
      • Note: If transactionId is not available, you can comment out the related code as indicated in the script.

   3. ProductCount ()

      • Type: Custom JavaScript Variable

      • Code:

        javascript

        Copy code

        function() {
return .length;
}


      • Dependencies: Ensure that is another GTM variable (usually a Data Layer Variable) that contains an array of the purchased products.

   4. PurchaseGoalId () (Optional)

      • Type: Constant Variable
      • Value: Your Convert Experiences Purchase Goal ID (e.g., '100136097').
      • Note: Alternatively, you can hardcode the purchase_goalid directly in the script.

   4. Add the Custom HTML Tag to GTM

   1. Create a New Tag

      • In your GTM container, click on Tags and then New.
      • Name the tag (e.g., "Convert Experiences Purchase Tracking").

   2. Configure Tag Type

      • Choose Custom HTML Tag.
      • Paste the tracking code from Step 2 into the HTML field.

   3. Set Up Triggering

      • Click on Triggering and select the trigger that fires on the Purchase Confirmation Page.
      • If you have a specific event or page view that occurs upon purchase completion, use that trigger.

   4. Save the Tag

      • Review your tag configuration and save it.

   5. Adjust the Script Variables

   • Replace Placeholder Variables

     • Replace , , and in the script with the exact names of your GTM variables, including the double curly braces.

     • Example:

       javascript

       Copy code

       var transactionAmount = parseFloat(0);
var transactionId = '0';
var productCount = parseInt(0);


   • Set the Purchase Goal ID

     • Replace 'XXXXXXXXX' in var purchase_goalid = 'XXXXXXXXX'; with your actual Convert Experiences Purchase Goal ID.
     • If using a GTM variable for purchase_goalid, ensure it is correctly set up and replace the placeholder accordingly.

   6. Handle transactionId Availability

   If transactionId is not available in your data layer or GTM variables:

   • Comment Out or Remove transactionId-Related Code

     • Comment out the variable declaration:

       javascript

       Copy code

       // var transactionId = ''; // Commented out because transactionId is not available


     • Comment out the line in the post object:

       javascript

       Copy code

       // tid: transactionId,


     • Comment out or remove the code that deletes 'tid':

       javascript

       Copy code

       // if (!transactionId || transactionId === '' || transactionId === '') {
// delete post.tid;
// }


   • Adjust Debug Logging

     • Update the debug log in the postTransaction function:

       javascript

       Copy code

       debugLog("Transaction ID: N/A");


   7. Test the Implementation

   Before publishing your GTM container, thoroughly test the implementation:

   • Enable Debug Mode

     • In GTM, click on Preview to enable debug mode on your website.

   • Perform a Test Purchase

     • Go through the purchase process on your Shopify store to reach the Purchase Confirmation Page.

   • Verify the Tag Execution

     • In the GTM debug panel, ensure that the "Convert Experiences Purchase Tracking" tag fires as expected.

   • Check the Console Logs

     • Open the browser console to view debug logs if DEBUG is set to true.
     • Look for any errors or warnings that may indicate issues.

   • Monitor Network Requests

     • In the browser's developer tools, check the Network tab for the fetch requests made to the Convert tracking endpoint.
     • Verify that the requests are successful (status code 200) and the payload contains the correct data.

   8. Publish Your Changes

   Once you've confirmed that everything works correctly:

   • Submit Your GTM Container for Publishing

     • In GTM, click on Submit to publish your changes.
     • Provide a descriptive version name and notes for future reference.

   • Monitor Conversion Tracking

     • After publishing, monitor your Convert Experiences dashboard to ensure that conversions are being tracked accurately.

   Debugging and Support

   • Debug Mode

     • Keep DEBUG set to true during testing to receive detailed logs.
     • Set it to false in the production environment to disable console logs.

   • Error Handling

     • The script includes error handling to catch issues with convert_attributes retrieval and network requests.
     • Check the console for error messages to assist in troubleshooting.

   Customization

   • Transaction Outliers

     • The script filters out transactions that are outside the min_order_value and max_order_value specified in convert_attributes.
     • Adjust these values in your Convert Experiences settings if needed.

   Conclusion

   By integrating this method, you can effectively track purchase conversions in Convert Experiences on your Shopify store using an existing GTM event. This approach streamlines the tracking process, reduces dependencies on Shopify-specific events, and leverages GTM's flexibility for managing tags and triggers.

   For further assistance or questions, refer to the Convert Experiences documentation or reach out to their support team.