Set up tracking pixels

To gain insight into your customers' behavior, Instant Commerce offers plug-and-play integrations for your storefront analytics: the Google Tag Manager and Meta pixel (Facebook).

note

Make sure you obtain your customers' consent to track them in stores for which you configure tracking integrations.

Google Tag Manager (GTM)

GA4 ecommerce events

Instant Commerce has implemented Google's GA4 ecommerce events, meaning that these can be measured out-of-the-box if you start using GTM.

Storefront tracking with GTM

1. Create a GTM account and container. Copy the GTM Container ID and save it so you can use it later.
2. Open your Instant Commerce store, go to Integrations, and click Add integration.
3. Go to Tracking and click Enable for the GTM integration.
4. Enter the Container ID and click Save.

Your GTM is now set up.

Checkout tracking with GTM

If you use GTM, you can add the tracking script below to ensure a purchase event is sent in accordance with the GA4 Measure ecommerce standard.

1. Open your Shopify store. On your Shopify store page, click Settings in the bottom left corner.
2. In the list on the left, select Checkout and accounts and scroll to Order status page.
3. Copy the code below and enter it in the Additional scripts field:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });

{% if first_time_accessed %}
dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "{{ order.order_number }}",
    value: "{{- checkout.total_price | times: 0.01 | json -}}",
    tax: "{{- checkout.tax_price | times: 0.01 | json -}}",
    shipping: "{{- checkout.shipping_price | times: 0.01 | json -}}",
    currency: {{ checkout.currency | json }},
    affiliation: {{- shop.name | json -}},
    {% if checkout.discount_applications %}
      coupon: {{ checkout.discount_applications[0].title | json }},
    {% endif %}
    items: [
      {% for line_item in checkout.line_items %}{
      item_id: {{- line_item.sku | json -}},
      item_brand: {{- line_item.vendor | json -}},
      item_category: {{- line_item.product.type | json -}},
      item_name: {{- line_item.title | json -}},
      item_variant: {{- line_item.variant.title | json -}},
      price: "{{- line_item.final_price | times: 0.01 | json -}}",
      quantity: "{{- line_item.quantity | json -}}"
    },{% endfor %}
    ]
  }
});
{% endif %}
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

4. Replace GTM-XXXXXXX in the code you just entered with your own Container ID and click Save.

Meta pixel (Facebook)

Storefront tracking with Meta

1. Create a Meta Pixel. Copy the Meta Pixel ID and save it so you can use it later.
2. Open your Instant Commerce store, go to Integrations, and click Add integration.
3. Go to Tracking and click Enable for the Meta integration.
4. Enter the Pixel ID and click Save.

Your Meta pixel is now set up in your storefront.

Checkout tracking with Meta

To monitor your checkout with the Meta Pixel, you have to set up a sales channel in Shopify.