Integrating Instant Checkout into analytics providers - event tracking

This guide describes how to you can integrate Instant Checkout into analytics providers to ensure they are notified when an order is placed through Instant.

1. Start by placing this block of code in the header of your website to subscribe to the “instantOrderPlaced’ event.

The callback passed as the second parameter to the .on function will be run when an order has been placed.

(function waitForInstantJS() {
    if (window.InstantJS) {
        window.InstantJS.on('instantOrderPlaced', (data) => {
            // run your custom code here
        });
    } else {
        setTimeout(waitForInstantJS, 100); // Check for InstantJS every 100 ms
    }
})();

2. The code running where the “run your custom code” comment is, will now run when an order is placed.

The contents of the data parameter from the callback will be in the structure below.

InstantOrderPlacedItem schema: 

{
  "price": number, // e.g. 10000 (smallest unit of currency)
  "name": string, // e.g. My Product
  "id": string, // e.g. ProductID
  "quantity": number // e.g. 5
}

InstantOrderPlaced schema:

{
    "email": string, // e.g. test@instant.one
    "first_name": string, // e.g. Bob
    "last_name": string, // e.g. Jane
    "phone": string, // e.g. +10000000000
    "street": string, // e.g. 1 Park Avenue
    "store_name": string, // e.g. My Store
    "city": string, // e.g. New York
    "region": string, // e.g. New York
    "postal_code": string, // e.g. 12345
    "country": string, // e.g. US
    "id": string, // e.g. 123456
    "grand_total": number, // e.g. 10000 (smallest unit of currency)
    "shipping_total": number, // e.g. 500 (smallest unit of currency)
    "tax_total": number, // e.g. 100 (smallest unit of currency)
    "discounts_total": number, // e.g. 1000 (smallest unit of currency)
    "subtotal": number, // e.g. 1000 (smallest unit of currency)
    "currency": string, // e.g. USD
    "coupon_code": string, // e.g. VIP10
    "merchant_id": string, // e.g. myid
    "store_code": string, // e.g. us
    "items": Array of InstantOrderPlacedItem items
}

An example of what InstantOrderPlaced can look like is below. 

{
    "email": "test@instant.one",
    "first_name": "Instant",
    "last_name": "Demo",
    "phone": "+10000000000",
    "street": "1 Park Ave",
    "store_name": "My Store",
    "city": "New York",
    "region": "New York",
    "postal_code": "12345",
    "country": "US",
    "id": "000001450",
    "grand_total": 29668,
    "shipping_total": 0,
    "tax_total": 100,
    "discounts_total": 1000,
    "subtotal": 29668,
    "currency": "USD",
    "coupon_code": "VIP10",
    "merchant_id": "myId",
    "store_code": "us",
    "items": [
        {
            "price": 15674,
            "name": "Test Item 2",
            "id": "My Item ID",
            "quantity": 1
        },
        {
            "price": 13994,
            "name": "Test Item 2",
            "id": "My Item ID",
            "quantity": 1
        }
    ]
}

Example Use Cases

1. Sending data to Google Adwords

You may be using Google Adwords to track orders for SEO purposes, which can aid with attribution and analysis into performance marketing efforts. See below for an example of how you can utilise this custom integration method to send data via gtag to adwords.

(function waitForInstantJS() {
  if (window.InstantJS) {
      window.InstantJS.on('instantOrderPlaced', (data) => {
          gtag('event', 'conversion', {
             'send_to': 'AW-{conversion_id}/{conversion_label}',
             'value': parseFloat(data.grand_total).toFixed(2),
             'currency': data.currency,
             'transaction_id': data.id
          });
      });
   } else {
      setTimeout(waitForInstantJS, 100); // Check for InstantJS every 100 ms
  }
})();

2. Sending data to a custom analytics platform

You may wish to send data to a custom analytics platform that you use on your site, such as Hotjar, Fullstory, Heap Analytics or any other analytics platforms which Instant does not natively support. 

To do this, you can utilise this custom integration method. See below as an example.

(function waitForInstantJS() {
  if (window.InstantJS) {
      window.InstantJS.on('instantOrderPlaced', (data) => {
          window.hj('event', 'Purchase Completed')
      });
   } else {
      setTimeout(waitForInstantJS, 100); // Check for InstantJS every 100 ms
  }
})();

3. Sending data in a custom format to Google Analytics 4

Instant already sends data to GA4 in a recommended structure. Please see here: https://help.instant.one/how-do-i-track-instant-purchase-events-with-ga4

However, you may wish to modify this structure for your needs.

To do this, you can utilise this custom integration method. See below as an example.

(function waitForInstantJS() {
  if (window.InstantJS) {
    window.InstantJS.on("instantOrderPlaced", (data) => {
      var event = {
        event: "purchase",
        ecommerce: {
          transaction_id: data.id,
          value: +(parseFloat(data.grand_total) / 100).toFixed(2),
          tax: +(parseFloat(data.tax_total) / 100).toFixed(2),
          shipping: +(parseFloat(data.shipping_total) / 100).toFixed(2),
          currency: data.currency,
          coupon: data.coupon_code,
          website_country: data.country,
          shipping_country: data.country,
          shipping_state: data.region,
          shipping_city: data.city,
          customer_type: "General",
          items: data.items.map(function (item) {
            return {
              item_id: item.id,
              item_name: item.name,
              price: +(parseFloat(item.price) / 100).toFixed(2),
              quantity: item.quantity,
            };
          }),
        },
      };
      window.dataLayer.push({
        ecommerce: null,
      });
      window.dataLayer.push(event);
    });
  } else {
    setTimeout(waitForInstantJS, 100); // Check for InstantJS every 100 ms
  }
})();