Article sections

    In this article, you will find out how to integrate Omniconvert Explore with Shopify in manner that will enable Explore to register the purchases that are made by the customers in a Shopify store.

    1. General tracking code

    1. Go to “Theme” and click “Customize”
    2. Click on the three dots and select “Edit Code”
    1. Choose theme.liquid file and in this page you must insert the Omniconvert code immediately after opening the <head> tag. 

    Example:

    Get the general Tracking Code from the Omniconvert Dashboard, by clicking on your website’s name in the top menu, and selecting “Tracking code settings”:

    2. Conversion tracking code on cart

    This step is only for older versions of Shopify themes. If you don’t find the file Sections/cart-template.liquid, skip this step.

    This step is a little more complicated because Shopify uses a different domain for the checkout process than your website and that’s why you should be careful when you copy/paste the following codes.

    In the theme files list, edit the template in Sections/cart-template.liquid and insert the following code right after the <form> tag:

    <!-- omniconvert start -->
    <input id="mktz_custom" name="attributes[mktz_custom]" type="hidden" value="" />
    <!-- omniconvert end -->
    <!-- Omniconvert Start -->
    <script>
    document.onreadystatechange = function () {
        if (document.readyState == 'complete') {
            var variations = _mktz.getSeenVariations();
            var visitor = _mktz.getVisitor();
            if (variations && visitor) {
                var experimentData = {
                    'uid': visitor.uid,
                    'session': visitor.session_id,
                    'last_variation': variations.join('|')
                };
                mktz_$('#mktz_custom').val(JSON.stringify(experimentData));
            }
        }
    };
    </script>
    <!-- Omniconvert End -->

    Then click “Save”.

    Example:

    3.1 Conversion tracking code on the “Thank you” page (with Additional Scripts)

    This is used for the legacy method of adding scripts to the Shopify checkout page with the Additional Scripts box. If you wish to add pixels (for the new Checkout Extensibility system) for please skip this section and follow the instructions from Step 3.2.

    At this step, you have to pay attention if you have 2 Additional scripts boxes.

    Some users have only one and some users have both of them.

    If you have 2 Additional scripts boxes, please insert the 2 pieces of codes(General tracking code & The conversion tracking code) in both boxes.

    If you have only one Additional scripts box, please insert the 2 pieces of codes (General tracking code & The conversion tracking code) in that one box.

    Very important: Please place those 2 pieces of code at the beginning of the Additional scripts box.

    Go to “Settings -> Checkout” and insert the following 2 blocks of code(General tracking code & The conversion tracking code) in the Additional scripts boxes, one after the other:

    Each Additional scripts box should have 2 pieces of code.

    General tracking code

    <!-- start Omniconvert.com code -->
    <link rel="dns-prefetch" href="//app.omniconvert.com" />
    <script type="text/javascript">window._mktz=window._mktz||[];</script>
    <script src="//cdn.omniconvert.com/js/{YOUR_ID}.js"></script>
    <!-- end Omniconvert.com code -->

    The first block is the same Omniconvert general code you inserted at the beginning of the article. It is necessary to insert it again here, since the payments in Shopify are made on a different domain, that has a different template.

    If you don’t use the code from the Dashboard and you choose to use the code in the example above don’t forget to replace {YOUR_ID} with your website’s unique identifier.

    The conversion tracking code

    {% if attributes.mktz_custom %} 
    <!-- start conversion goal --> 
    <script>     
        var _mktz = _mktz || [];     
        var mktzCustom = JSON.parse('{{ attributes.mktz_custom }}'.replace(/&quot;/g, '"'));     
        mktzCustom.transaction = '{{ checkout.id }}';
        mktzCustom.orderId = '{{ checkout.order_id }}'; 
        _mktz._Goal('sale', '{{ total_price | money_without_currency }}', mktzCustom); 
    </script> 
    <!-- end conversion goal -->
    {% else %}
    <script>
        var mktzCustom = { 'orderId': '{{ checkout.order_id }}' };
        var _mktz = _mktz || [];
        _mktz.push(['_Goal','sale','{{ order.total_price | money_without_currency }}', {transaction:'{{ checkout.order_id }}'}]);
    </script>
    {% endif %}

    Just paste this code into the Additional scripts section as it, no adaptations are necessary.

    We know it looks a little bit complicated for a non-tech person but all you need to do is to paste codes in some areas. You can do it!

    3.2 Conversion tracking code on the “Thank you” page (with pixels for Checkout Extensibility framework)

    Go to Settings -> Customer events in the admin dashboard of your store and click on Add Custom Pixel button. Enter a name that identifies this pixel in the prompt that pops up. It can be something like: “Omniconvert Explore Pixel”.

    Copy the following code and paste it into your pixel and replace {YOUR_ID} with your website’s unique identifier from the Explore Dashboard.

    
    window._mktz=window._mktz||[];
    const script = document.createElement('script');
    script.setAttribute('src', '//cdn.omniconvert.com/js/{YOUR_ID}.js');
    document.head.appendChild(script);
    analytics.subscribe("checkout_completed", (event) => {
        _mktz.push(['_Goal','sale',event.data?.checkout?.totalPrice?.amount, {transaction:event.data?.checkout?.order?.id}]);
    });
    

    Then you need to make sure you press the Save button first then the Connect button at the bottom of the page. The pixel needs to be connected, otherwise your sale events won’t be sent to Explore.

    Was this post helpful?