Setting up a Shopify integration

This guide explains how to set up the Shopify integration with Ometria for the first time. If you’re updating an existing Shopify integration to Shopify Markets, refer to Update Shopify to Shopify Markets.

Before you begin

If you have not already, Install Ometria from the Shopify app store

Matrixify

If you’re using Matrixify to migrate historical data from your previous ecommerce platform into Shopify, the Created_at timestamp will be the time of import into Shopify. 

This cannot be changed, so in order to have the correct order timestamp you should set Processed_at to the order timestamp in the CSV that will be uploaded to Matrixify. 

To make sure the data maps correctly in Ometria, contact your Technical Project Manager and ask them to change the import so Processed_at is used when syncing data to Ometria.

Ometria account setup link

You will have received an account setup link from Ometria detailing your integration steps. 

The account setup link includes the JavaScript tracking code you’ll need for this integration. Copy the code before beginning the steps below.

See Update your liquid tags for an example.

Set up page tracking (theme.liquid)

Page tracking requires a script to be added to the theme.liquid file

Steps

Copy the JavaScript code from the setup link above

Log into Shopify admin and select Themes. 

Choose a live theme and select Template Editor.

Locate the list of files (templates) in the left panel and select theme.liquid.

The contents for this template display on the right.

Paste your copied code between the </body> and </html> tags at the bottom of the page:

Example:

<script>
  if (typeof ometria == 'undefined') window.ometria = {};

  ometria.raw_data = {
    cart:             [],
    cart_total:       {{ cart.total_price | json }},
    collection_count: {{ collection.products_count | json }},
    collection_handle:{{ collection.handle | json }},
    collection_id:    {{ collection.id | json }},
    current_page:     {{ current_page | json }},
    customer_email:   {{ customer.email | json }},
    locale_domain:    true,
    product_id:       {{ product.id | json }},
    search_count:     {{ search.results_count | json }},
    search_terms:     {{ search.terms | json }},
    shop_currency:    {{ shop.currency | json }},
    template:         {{ template | json }}
  };

  {% for item in cart.items %}
    ometria.raw_data.cart.push([
      {{ item.product.id | json }},
      {{ item.variant.id | json }},
      {{ item.quantity | json }},
      {{ item.line_price | json }}
    ]);
  {% endfor %}

  (function () {
    var url = "https://cdn.ometria.com/tags/<your_site_identifier>.js";
    setTimeout(function () {
      var sc = document.createElement('script');
      sc.src = url;
      sc.setAttribute('async', 'true');
      document.getElementsByTagName("head")[0].appendChild(sc);
    }, 15);
  })();
</script>

Example of 'raw_data' with a namespace:

ometria.raw_data = {
    cart:             [],
    cart_total:       {{ cart.total_price | json }},
    collection_count: {{ collection.products_count | json }},
    collection_handle:{{ collection.handle | json }},
    collection_id:    {{ collection.id | json }},
    current_page:     {{ current_page | json }},
    customer_email:   {{ customer.email | json }},
    product_id:       {{ product.id | json }},
    search_count:     {{ search.results_count | json }},
    search_terms:     {{ search.terms | json }},
    shop_currency:    {{ shop.currency | json }},
    template:         {{ template | json }},
    locale_domain:    true,
    namespace:        "uk:"
  };

Set up checkout tracking (custom pixel)

With Shopify’s move to Checkout Extensibility, checkout tracking requires a custom pixel. For more information, refer to Shopify documentation on Checkout Extensibility

Steps

In your Shopify admin, go to Settings > Customer events.

Click Add custom pixel to open the event editor:

Give your pixel a unique name. 

Next, paste your custom JavaScript pixel code (example below) into the code box (you can delete the explanatory text):

const OMETRIA_TAG_ID    = '<tag id>';
const OMETRIA_NAMESPACE = '';   // e.g. 'uk:' - must match what Ometria gave you, including case
const OMETRIA_TAG_URL   = 'https://cdn.ometria.com/tags/' + OMETRIA_TAG_ID + '.js';

function omNumericId(id) {
  return String(id == null ? '' : id).split('/').pop();
}

function omLoadTag() {
  if (document.querySelector('script[src*="' + OMETRIA_TAG_ID + '"]')) return;
  var sc = document.createElement('script');
  sc.src = OMETRIA_TAG_URL;
  sc.async = true;
  document.getElementsByTagName('head')[0].appendChild(sc);
}

analytics.subscribe('checkout_started', (event) => {
  var checkout = event.data.checkout;
  window.ometria = window.ometria || {};

  var cart = [];
  (checkout.lineItems || []).forEach(function (item) {
    cart.push([
      parseInt(item.variant.product.id, 10),
      parseInt(item.variant.id, 10),
      item.quantity,
      item.finalLinePrice.amount * 100
    ]);
  });

  window.ometria.raw_data = {
    template:       'checkout',
    namespace:      OMETRIA_NAMESPACE,
    cart_total:     checkout.totalPrice.amount * 100,
    cart:           cart,
    shop_currency:  checkout.currencyCode,
    customer_email: checkout.email
  };
  omLoadTag();
});

analytics.subscribe('checkout_contact_info_submitted', (event) => {
  var email = event.data.checkout && event.data.checkout.email;
  if (!email) return;
  window.ometria = window.ometria || {};
  window.ometria.raw_data = window.ometria.raw_data || {};
  window.ometria.raw_data.customer_email = email;
  if (typeof ometria !== 'undefined' && typeof ometria.identify === 'function') {
    ometria.identify(email);
  } else {
    omLoadTag();
  }
});

analytics.subscribe('checkout_completed', (event) => {
  var checkout = event.data.checkout;
  var orderId  = checkout && checkout.order && checkout.order.id;
  if (!orderId) { console.warn('Ometria: no order id on checkout_completed'); return; }

  var numeric = omNumericId(orderId);
  window.ometria = window.ometria || {};

  // Integrated / SPA checkout: the tag loaded at checkout_started is still
  // alive, and re-injecting it is a no-op (ometria.js:13), so raw_data would
  // never be re-read. Call through directly instead.
  if (typeof ometria !== 'undefined' && typeof ometria.trackTransaction === 'function') {
    if (checkout.email) ometria.identify(checkout.email);
    ometria.setPageType('confirmation');
    ometria.trackTransaction(OMETRIA_NAMESPACE + numeric);
    return;
  }

  // Legacy full page load: no tag yet, so let the plugin fire it from raw_data.
  // Pass the bare numeric id - plugins/shopify.js:146 prepends the namespace
  // itself, so pre-prefixing here would double it.
  window.ometria.raw_data = {
    template:  'confirmation',
    order:     numeric,
    namespace: OMETRIA_NAMESPACE
  };
  omLoadTag();
});

Marketing Preferences

If you are using a marketing preferences supplier and you want to configure tracking based on those preferences, please contact your TPM to discuss the configuration.

Shopify Markets

Once you’ve completed the setup above, if you’re using Shopify Markets, follow the Update Shopify to Shopify Markets guide. 

Next steps

Subscription webhooks are created automatically, please refer to subscription webhook in case you do not want subscription webhooks to be activated on your account

You can also set up Shopify to trigger abandoned category campaigns.