Setting up a Shopify integration

This guide explains how to complete your integration with Shopify by inserting some JavaScript on your store website which sends interaction data to Ometria.

Install Ometria from the Shopify app store

The steps below contain instructions for:

• Shopify 
• Shopify Plus
• Checkout Extensibility (Custom pixels) 

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. 

Step 2 in this link contains some JavaScript tracking code, which you should copy before beginning the steps below.

See Update your liquid tags for an example.

Setup steps

• Shopify users should complete Steps 1, 3 and 4
• Shopify Plus users should complete Steps 1 to 4
• Checkout Extensibility users should complete Steps 1, 5, 6 and 7 only

Step 1: theme.liquid file

Once you've copied the JavaScript code, 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:

Next steps

• Shopify users - go to Step 3.
• Shopify Plus users - go to Step 2.
• Checkout Extensibility users - go to Step 5. 

Step 2: checkout.liquid (deprecated)

Navigate to checkout.liquid and paste the code below between the </body> and </html> tags at the bottom of the checkout.liquid file.

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

  ometria.raw_data = {
    template: ((ometria || {}).raw_data || {}).template,
    order: {{ checkout.order_id | json }},
    cart_total: {{ checkout.total_price | json }},
    cart_count: {{ checkout.line_items | size }},
    cart: [],
    shop_currency: {{ shop.currency | json }},
    customer_email: {{ checkout.email | json }}
  };

  {% for item in checkout.line_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 = window.location.protocol + "//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>

Replace <your_site_identifier> with the site identifier supplied by Ometria.

Click Save. 

Repeat these steps for all of your published themes.

Next steps

Continue to Step 3.

Step 3: Additional scripts

The additional checkout script tracks your order confirmation page and captures the order ID for the trackTransaction method.

In Shopify Admin, click Settings at the bottom of the navigation panel on the left, then select Checkout:

Scroll to the Order status page section and paste the following code into the Additional scripts box: 

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

  ometria.raw_data = {
    template: 'confirmation',
    order: {{ checkout.order_id | json }}
  };
</script>

<script>
  (function() {
    var url = window.location.protocol + "//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);
    }, 50);
   })();
</script>

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

  ometria.raw_data = {
    template: 'confirmation',
    order: {{ checkout.order_id | json }},
    namespace: "uk:"
  };
</script>

<script>
  (function() {
    var url = window.location.protocol + "//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);
    }, 50);
   })();
</script>

Save your changes.

Next steps

If your store has a post purchase page, continue to Step 4. 

If not, your Shopify or Shopify Plus integration is complete, and you can set up your subscription webhook. 

Step 4: Post purchase page setup (optional)

Add the following code into the Additional script box under Order status page:

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

ometria.raw_data = {
  template: 'confirmation',
  order: {{ checkout.order_id | json }}
 };
</script>

<script>
  (function() {
    var url = window.location.protocol + "//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);
    }, 50);
  })();
</script>

Save your changes.

Next steps

Now you’ve set up your integration, you can set up your subscription webhook.

Step 5: Add a custom pixel to track abandoned baskets

For more details, please refer to the Shopify documentation on Checkout Extensibility

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

Make sure that all Ometria scripts are removed from your checkout.liquid and order pages as well as additional scripts boxes.

If you're also (optionally) migrating your thank you pages, then you should remove those scripts too.

For more details, please refer to the Shopify documentation on Checkout Extensibility

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):

analytics.subscribe('checkout_started', (event) => {
  // Accessing checkout data from event
  const checkout = event.data.checkout;

  // Ensure the ometria object exists
  if (typeof ometria === 'undefined') {
    window.ometria = {};
  }

  // Convert total price to integer (in cents/pence)
  let total_amount = checkout.totalPrice.amount * 100;

  // Build Ometria raw data object
  ometria.raw_data = {
    template: "checkout",
    order: checkout.order.id,
    cart_total: total_amount,
    cart_count: checkout.lineItems.length,
    cart: [],
    shop_currency: checkout.currencyCode,
    customer_email: checkout.email,
    namespace: "UK:" // Optional: use only if applicable
  };

  // Populate the cart array
  checkout.lineItems.forEach(item => {
    const productId = parseInt(item.variant.product.id);
    const variantId = parseInt(item.variant.id);
    const quantity = item.quantity;
    const linePrice = item.finalLinePrice.amount * 100;

    ometria.raw_data.cart.push([productId, variantId, quantity, linePrice]);
  });

  // Load the Ometria tracking script
  (function () {
    var url = window.location.protocol + '//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);
    }, 0);
   })();
});

Step 6: Add a custom pixel to track transactions

Next, paste your code for transactions (example below) into the same code box under the abandoned basket code:

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;

  // Ensure ometria object exists
  if (typeof ometria === 'undefined') {
    window.ometria = {};
  }

  // Populate raw data for Ometria
  ometria.raw_data = {
    template: 'confirmation',
    order: checkout.order.id
 };

 // Load the Ometria tracking script
 (function () {
   var url = window.location.protocol + '//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);
   }, 0);
 })();
});

Replace <your_site_identifier> with the site identifier supplied by Ometria.

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;

  // Ensure ometria object exists
  if (typeof ometria === 'undefined') {
    window.ometria = {};
  }

  // Populate raw data for Ometria
  ometria.raw_data = {
    template: 'confirmation',
    order: checkout.order.id,
    namespace: 'uk'
  };

  // Load the Ometria tracking script
  (function () {
    var url = window.location.protocol + '//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);
    }, 0);
   })();
});

Click Save to save your custom pixel. 

Click Connect pixel to start tracking your transactions. 

If you already have an existing custom pixel with a checkout_completed event, copy where it says <HERE>

// Checkout completed
analytics.subscribe("checkout_completed", (event) => {
  const checkout = event.data.checkout;

  // Other scripts

  // Elevar
  // window.ElevarGtmSuite.handlers.checkoutComplete(checkoutData);

  // Pinterest
  // pintrk('track', 'checkout', { checkoutData });

  // Ometria tracking
  // <HERE> – insert integration code here

});

The following script:

// Check if the Ometria object exists
if (typeof ometria === 'undefined') {
  window.ometria = {};
}

// Define the raw data object for the confirmation page
ometria.raw_data = {
  template: 'confirmation',
  order: checkout.order.id
};

// Load the Ometria tracking script
(function () {
  var url = window.location.protocol + '//cdn.ometria.com/tags/<your_site_identifier>.js'; // Replace with your actual site identifier
  setTimeout(function () {
    var sc = document.createElement('script');
    sc.src = url;
    sc.setAttribute('async', 'true');
    document.getElementsByTagName('head')[0].appendChild(sc);
  }, 0);
})();

Replace <your_site_identifier> with the site identifier supplied by Ometria.

// Ensure the Ometria object exists
if (typeof ometria === 'undefined') {
  window.ometria = {};
}

// Define raw_data for the confirmation page
ometria.raw_data = {
  template: 'confirmation',
  order: checkout.order.id,
  namespace: 'uk' // Optional: only for multi-region setups
};

// Load the Ometria tracking script
(function () {
  var url = window.location.protocol + '//cdn.ometria.com/tags/<your_site_identifier>.js'; // Replace with your Ometria site identifier
  setTimeout(function () {
    var sc = document.createElement('script');
    sc.src = url;
    sc.setAttribute('async', 'true');
    document.getElementsByTagName('head')[0].appendChild(sc);
  }, 0);
})();

Click Save to save your custom pixel. 

Click Disconnect and then Connect to reload your pixel.

Step 7: Add a custom pixel to track identity

Copy and paste your code for identification during checkout (example below) into the same code box under the rest of your code:

 // Track customer identity on checkout contact info submission
analytics.subscribe('checkout_contact_info_submitted', (event) => {
  const checkout = event.data.checkout;

 // Ensure Ometria object exists
 if (typeof ometria === 'undefined') {
   window.ometria = {};
 }

 // Set customer email and identify
 ometria.raw_data = ometria.raw_data || {};
 ometria.raw_data.customer_email = checkout.email;
 ometria.identify(checkout.email);

 // Load Ometria tracking script
 (function () {
   var url = window.location.protocol + '//cdn.ometria.com/tags/<your-site-identifier>.js'; // Replace with your site identifier
   setTimeout(function () {
     var sc = document.createElement('script');
     sc.src = url;
     sc.setAttribute('async', 'true');
     document.getElementsByTagName('head')[0].appendChild(sc);
   }, 0);
 })();
});

Replace <your_site_identifier> with the site identifier supplied by Ometria.

Next steps

Now you’ve set up your integration, you can set up your subscription webhook.

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