Shopify & Shopify plus

If you use Shopify plus plan follow Shopify plus integration guide, otherwise follow Shopify integration. The Shopify plus plan supports  inserting custom javascript code into the checkout process website, therefore you are able to track the whole checkout process.

Shopify

If your checkout process is on domain checkout.shopify.com purchase tracking will not work correctly for checkout process unless you identify your customer with both Exponea cookie and your Shopify customer identity. You can achieve this by implementing these custom scripts:

1. Create Content Modifying rule

This custom script gets Exponea cookie and hides it into checkout process attributes.

Go to you Exponea project Data > Management > Content Modifying. Create new content modifying rule executed on page /cart with following code:

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}
var cookieInput = $('<input type="hidden" name="attributes[cookie]" value="' + getCookie("__exponea_etc__") + '" />');
$('input[type="submit"][name="checkout"]').before(cookieInput);

This is how it looks like inside Exponea:

2016-08-10_12h07_01

2. Order processing additional scripts

This custom script reads Exponea cookie from the checkout process attribute and Shopify indentity and then identifies customer using both of them.

Go to your website’s Shopify administration page > Settings > Checkout > Order processing. Paste the following script inside Additional scripts textfield.

Replace your project token when using this snippet

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
	type: "POST",
	url: "https://api.exponea.com/bulk",
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	data: JSON.stringify(
		{
			"commands": [{
			"name": "crm\/events",
			"data":
			{
				"customer_ids": {
					"registered": {{ customer.id | json }},
					"cookie": {{ attributes.cookie | json }}
				},
				"project_id": "--- PLACE YOUR PROJECT TOKEN HERE ---",
				"type": "thank you page",
				"properties": { "path": location.pathname, "location": location.href }
			}
			}]
		}
	)
});
</script>

Shopify plus

In case of shopify plus you are allowed to insert custom javascript to checkout. Go to Online Store -> Themes -> Customize theme-> Edit Code. On edit code page you see many templates you currently use for your page. In the folder Layout you should see at least checkout.liquid and theme.liquid. Checkout.liquid is template which renders during the checkout process and theme.liquid is global template which renders as you are on the eshop page.

Into the checkout.liquid template you have to insert following code snippets:
a) Exponea snippet

b) Custom script, which is necessary to gather information about currently logged user. This script takes value of the cookie _shopify_y. This value is some kind of id which will be used to merge customer who was on the eshop page and after that he went through checkout process.

<script type="text/javascript">
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
var cartId = getCookie('_shopify_y');
if (cartId != "") {
    exponea.identify({
        cart_id: cartId
    })
}
</script>

c) Script for email tracking which uses shopify object checkout to parse email from


 exponea.track('checkout', {});

 function validateEmail(email) {
     email = email ? email.trim().toLowerCase() : '';
     if (/^\S+@\S+\.\S+$/.test(email)) {
         return email;
     } else {
         return false;
     }
 }

 var validatedEmail = validateEmail({{checkout.email | json}});
 if (validatedEmail && document.querySelectorAll('[name="checkout[email]"]').length == 0) {
     exponea.identify({
         email_id: validatedEmail
     });
     exponea.update({
         email: validatedEmail
     });
 }

Into the theme.liquid template you have to insert following code snippets:

a) Exponea snippet

b) Same code as in checkout.liquid step B. This will secure customer merging in Exponea.

<script type="text/javascript">
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
var cartId = getCookie('_shopify_y');
if (cartId != "") {
    exponea.identify({
        cart_id: cartId
    })
}
</script>