How can I load Instant's pixels via Google Tag Manager for Shopify?

Instant’s tracking for Shopify sites relies on two separate scripts:

Theme Pixel (Added via API)
1. Installation Method: Automatically injected via API as a <script> tag on the storefront.
2. Purpose: Tracks interactions and events on the Shopify storefront, including email opt-ins.
3. Maintenance: Instant frequently checks for theme changes. If removed, the pixel will be re-injected automatically.
Customer Events Pixel (Added manually during onboarding)

1. Installation Method: Manually added via Shopify admin panel during onboarding.
2. Purpose: Tracks Shopify customer events (e.g., purchases, add to cart, checkout events) and sends them to Instant.
3. Maintenance: Must remain unchanged after onboarding.

To use GTM to manage these pixels, please follow the instructions below. Please note that incorrect implementation will cause the pixels to become inoperable.

To install Instant via GTM on a Shopify site:

Important note:

When you add GTM to both the storefront and as a Customer Events Pixel in Shopify’s admin panel, GTM will fire Instant's tracking tags in both contexts.

This ensures that Instant's pixels are injected on all pages and during all relevant customer events (e.g., checkout, thank you pages).

GTM serves as a single point of configuration for tracking across both the storefront and Shopify customer events.
All tags you configure in GTM (including Instant’s pixel) will be applied wherever GTM is loaded, whether through the storefront or Shopify’s Customer Events.

1. Inject the Theme Pixel via GTM (Custom HTML Tag)

Go to your Google Tag Manager Dashboard.
Click on Tags > New > Tag Configuration > Custom HTML.
Paste the following script and click Save.

<script>
!function(i,n,s,t,a,u,d){
    i.InstantConfig = i.InstantConfig || {};
    d = i.InstantJS = i.InstantJS || {};
    d.trackQueue = [];
    d.track = function() { d.trackQueue.push(arguments) };
    u = n.createElement(s);
    u.async = true;
    u.src = t;
    a = n.getElementsByTagName(s)[0];
    a.parentNode.insertBefore(u, a);
}(window, document, 'script', 'https://cdn.instant.one/instant.js?siteId={{SITE_ID}}');
</script>

2. To support Instant via GTM for the Customer Events pixel, pass raw events into payloads pushed to the dataLayer.

For every event sent by Shopify, you must also pass the raw event in the payload pushed to the dataLayer so this event can be sent to Instant.

Example (note that product_added_to_cart below is just an example, all events must be sent to Instant.

// Subscribe to events
analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
    // IMPORTANT: Including the raw_event here is crucial so Instant can fully process the event
    raw_event: event
  });
});

3. Create Event Triggers for All Events

The following events need to be tracked and sent to Instant: collection_viewed, product_removed_from_cart, product_added_to_cart, product_viewed, page_viewed, payment_info_submitted, checkout_address_info_submitted, checkout_shipping_info_submitted, checkout_contact_info_submitted, checkout_started, checkout_completed, cart_viewed

In GTM, go to Triggers > New > Trigger Configuration > Custom Event.
Enter the Event Name (e.g., product_added_to_cart, checkout_completed, etc.).
Set Trigger to fire on All Custom Events.
Click Save.

4. Create Data Layer Variable for `raw_event`

In GTM, go to Variables > New > Variable Configuration > Data Layer Variable.
Enter Variable Name: raw_event.
Click Save.

5. Create Tags to Send Events to Instant

Go to Tags > New > Tag Configuration > Custom HTML.
Paste the following code.

<script>
InstantJS.track('SHOPIFY_EVENT', {{raw_event}});
</script>

Set the Trigger to the relevant Custom Event Trigger (e.g. product_added_to_cart)

Click Save.

Important Considerations

The Instant Pixels must be loaded as early as possible, on all pages, and must never be blocked under any circumstance.
Always test your GTM setup using Preview Mode before publishing.
Once you decide to implement the Instant pixel via GTM, ensuring the Instant pixel always loads is your responsibility.
The event data sent to Instant must always match Shopify’s standard event data. Custom events are not supported.
Replace the placeholder with your actual site ID throughout this documentation.

We understand that there are many different ways to set up GTM, so our support team are always happy to help.

Please reach out to Instant support at help@instant.one, or your dedicated customer success manager for further assistance if needed.