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 = ''; 
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 || {};

  if (typeof ometria !== 'undefined' && typeof ometria.trackTransaction === 'function') {
    if (checkout.email) ometria.identify(checkout.email);
    ometria.setPageType('confirmation');
    ometria.trackTransaction(OMETRIA_NAMESPACE + numeric);
    return;
  }

  window.ometria.raw_data = {
    template:  'confirmation',
    order:     numeric,
    namespace: OMETRIA_NAMESPACE
  };
  omLoadTag();
});

Connect the pixel using the button on the top right of the pixel section

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.

If you are using OneTrust as your provider then follow the Consent management for OneTrust integrations guidance for set up.

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.