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.
Example of Synchronous Monetate Tag in <head> of 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. -->
<!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.
Code for monetate.liquid Snippet
{% 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 %}
{% 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.
Example of setPageType Method Added to Shopify collection-template.liquid
<!doctype html>
<html class="js" lang="{{ request.locale.iso_code }}">
...
  <body>
...
    {% render 'monetate' %}
  </body>
</html>
<!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.
Updated 25 Sep 2024
Enable a Flagged Feature
Connect Shopify Checkout Extensibility to Monetate