Integrate with Shopify
If you're also a Shopify client, you can implement Monetate on your Shopify site.
This implementation currently doesn't include tracking conversions on the order confirmation page.
Step 1: Add the Monetate Tag to theme.liquid
Follow the steps in Installing the Tag to obtain and then paste the version of the Monetate tag that you're using as the first script tag in the <head> element of your Shopify theme.liquid layout.
<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_button }}">
<meta name="robots" content="noindex,nofollow" />
<link rel="canonical" href="{{ canonical_url }}">
<!-- Begin Monetate ExpressTag Sync v8.1. Place at start of document head. DO NOT ALTER. -->
<script type="text/javascript">var monetateT = new Date().getTime();</script>
<script type="text/javascript" src="//se.monetate.net/js/2/{account_name}/{account_instance}/{account_domain}/entry.js"></script>
<!-- End Monetate tag. -->Step 2: Create a monetate.liquid Snippet
Navigate to the snippets directory, click Add a new snippet, name it monetate.liquid, and then paste the following code into it. This code sends all the necessary method calls depending on page type, except for checkout and purchase page types.
Follow the steps in Connect Shopify Checkout Extensibility to Monetate to create a custom pixel to pass checkout and purchase data to Monetate.
{% if template.name == 'search' %}
<script>
window.monetateQ = window.monetateQ || [];
window.monetateQ.push([
"setPageType",
"search"
]);
const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.has('q')); // true
var searchTerm = searchParams.get('q'); // search term
window.monetateQ.push([
"addSearch", {
"searchTerm": searchTerm,
"searchType": "site"
}
]);
</script>
{% endif %}
{% if template.name == 'collection' %}
<script>
window.monetateQ = window.monetateQ || [];
window.monetateQ.push(['setPageType', '{{ template.name }}']);
window.monetateQ.push([
"addProducts", [{% for product in collection.products %}"{{ product.id }}",{% endfor %}]
]);
{% if cart.item_count > 0 %}
window.monetateQ.push([
"addCartRows", [
{%- for item in cart.items -%}
{
"productId": "{{ item.product_id }}",
"quantity": "{{ item.quantity }}",
"unitPrice": "{{ item.final_price | money | remove: "$" }}",
"sku": "{{ item.sku }}",
"currency": "{{ cart.currency.iso_code }}"
},
{% endfor %} ]
]);
{% endif %}
window.monetateQ.push([
"trackData"
]);
</script>
{% elsif template.name == 'product' %}
<script>
window.monetateQ = window.monetateQ || [];
window.monetateQ.push(['setPageType', '{{ template.name }}']);
window.monetateQ.push(['addProductDetails', [
{% for variant in product.variants %}{
productId: '{{ product.id }}',
sku: '{{ variant.sku }}'
},{% endfor %}
]]);
window.monetateQ.push(['trackData']);
</script>
{% elsif template.name == 'search' %}
<script>
window.monetateQ = window.monetateQ || [];
window.monetateQ.push(['setPageType', '{{ template.name }}']);
window.monetateQ.push([
{% assign search_results = search.results | where: "object_type", "product" %}
"addProducts", [{% for product in search_results %}"{{ product.id }}",{% endfor %}]
]);
{% if cart.item_count > 0 %}
window.monetateQ.push([
"addCartRows", [
{%- for item in cart.items -%}
{
"productId": "{{ item.product_id }}",
"quantity": "{{ item.quantity }}",
"unitPrice": "{{ item.final_price | money | remove: "$" }}",
"sku": "{{ item.sku }}",
"currency": "{{ cart.currency.iso_code }}"
},
{% endfor %} ]
]);
{% endif %}
window.monetateQ.push([
"trackData"
]);
</script>
{% elsif template.name == 'home' %}
<script>
const collectionItems = document.querySelectorAll('.product-card');
let monetateData = [];
collectionItems.forEach((item) => {
const id = item.getAttribute('data-id');
monetateData.push(id);
});
window.monetateQ = window.monetateQ || [];
window.monetateQ.push(['setPageType', '{{ template.name }}']);
window.monetateQ.push(['addProducts', monetateData]);
{% if cart.item_count > 0 %}
window.monetateQ.push([
"addCartRows", [
{%- for item in cart.items -%}
{
"productId": "{{ item.product_id }}",
"quantity": "{{ item.quantity }}",
"unitPrice": "{{ item.final_price | money | remove: "$" }}",
"sku": "{{ item.sku }}",
"currency": "{{ cart.currency.iso_code }}"
},
{% endfor %} ]
]);
{% endif %}
window.monetateQ.push(['trackData']);
</script>
{% else %}
<script>
window.monetateQ = window.monetateQ || [];
window.monetateQ.push(['setPageType', '{{ template.name }}']);
{% if cart.item_count > 0 %}
window.monetateQ.push([
"addCartRows", [
{%- for item in cart.items -%}
{
"productId": "{{ item.product_id }}",
"quantity": "{{ item.quantity }}",
"unitPrice": "{{ item.final_price | money | remove: "$" }}",
"sku": "{{ item.sku }}",
"currency": "{{ cart.currency.iso_code }}"
},
{% endfor %} ]
]);
{% endif %}
window.monetateQ.push(['trackData']);
</script>
{% endif %}Step 3: Add the Snippet to theme.liquid
Insert the following code before the </body> tag of theme.liquid to render the monetate.liquid snippet.
<!doctype html>
<html class="js" lang="{{ request.locale.iso_code }}">
...
<body>
...
{% render 'monetate' %}
</body>
</html>See Shopify's developer documentation for more information about its Liquid template language.
Step 4: Implement Retracks
Any time a customer makes changes to a page of your site while shopping (for example, applying filters to search results), you must perform a retrack to make Monetate aware of the new data present. These retracks enable personalized experiences.
Implementing retracks is straightforward. Refer to Page Retracks for instructions.