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 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. Conversion tracking code on the “Thank you” page

    For the next step, you have to go “Settings -> Checkout” and insert the following 2 blocks of code in the Additional scripts section, one after the other:

    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:'{{ order.order_number }}'}]);
    </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!

    Was this post helpful?