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 

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) => {
 // Example for accessing event data
 const checkout = event.data.checkout;

 if (typeof ometria == 'undefined') window.ometria = {}; 
 let total_amount = checkout.totalPrice.amount * 100;
 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:" // Only for multiple stores
 };

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])
 });

 (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;

  if (typeof ometria =='undefined') window.ometria ={};
  ometria.raw_data={
    template:'confirmation',
    order: checkout.order.id
  };
  (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;

  if (typeof ometria =='undefined') window.ometria ={};
  ometria.raw_data={
    template:'confirmation',
    order: checkout.order.id,
    namespace : 'uk'
  };
  (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) => 
{ 
      // Other scripts
      // Elevar window.ElevarGtmSuite.handlers.checkoutComplete(checkoutData); 
      // Pinterest //('track', 'checkout', {checkoutData}); 

<HERE> <<-------

});

The following script:

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

ometria.raw_data={
     Template:'confirmation',
     order: checkout.order.id
};

(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.

if (typeof ometria =='undefined') window.ometria ={};
     ometria.raw_data={
          template:'confirmation',
          order: checkout.order.id,
          namespace : 'uk'
     };
(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 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:

analytics.subscribe('checkout_contact_info_submitted', (event) => {
const checkout = event.data.checkout;
 if (typeof ometria == 'undefined') window.ometria = {};
  ometria.raw_data.customer_email = checkout.email;
  ometria.identify(checkout.email);
  (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.

Next steps

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