In this article you will find out how to integrate Omniconvert with Shopify.
The tutorial is splited in 2 parts: general tracking code and conversion tracking code.

1. General tracking code

  1. Go to “Theme” and click “Customize theme”
  2. Click on “Edit HTML/CSS”
  3. Choose theme.liquid file and in this page you must insert Omniconvert code immediately after opening the <head> tag. Screenshot_2

2. Conversion tracking code on cart

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

In the theme files list, click on cart.liquid and close to the end of the </form> right before the two <input> tags named “update” and “checkout” insert this code :

<!-- omniconvert start -->
<input id="mktz_custom" name="attributes[mktz_custom]" type="hidden" value="" />
<!-- omniconvert end -->

and after the last {% endif %} tag, insert this code and “Save”

<!-- 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_custom').val(JSON.stringify(experimentData));
            }
         }
     };
</script>
<!-- Omniconvert End -->

Check out this picture below to better understand the position of the two scripts mentioned above:

cart-liquid

3. Conversion tracking code on checkout

For the next step, you have to go “Settings -> Checkout” and insert this code in Additional content & scripts section.

<!-- start omniconvert.com code -->
 <link rel="dns-prefetch" href="//app.omniconvert.com"/>    
 <script type="text/javascript" src="//d2tgfbvjf3q6hn.cloudfront.net/js/YOURID.js"></script>
 <!-- end omniconvert.com 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 }}';
     _mktz._Goal('sale', '{{ total_price | money_without_currency }}', mktzCustom);
 </script>
 <!-- end conversion goal -->
{% endif %}

 

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!