Events

This guide will help you set up tracking events using Shopify custom pixels. For more information on Shopify web pixels technology, visit the Shopify documentation.

Create the Pixel

To create a custom pixel, start from your store’s home page. Click on the Settings menu located at the bottom left, then select Customer Events and click on Add custom pixel.

Shopify Add custom pixel

Give your pixel a name, such as “fitle-events”.

Shopify custom pixel name

Configure the Pixel

In the pixel settings, select the permissions that are in line with your policy. Options Not required (for permissions) and Data collected does not qualify as data sale (for data sale) ensure the maximum of alignment between your transactions and our aggregated metrics. Keep all the other configurations as they are by default, except for the code.

Two triggering events from Shopify’s analytics functionality are required to be set up:

Product added to cart: Learn more here.
Checkout completed: Learn more here.

In the Code section, insert the following code:

const CLIENT_ID = '<client_id>';

const sendEvent = function (event) {
  const url = 'https://api.fitle.com/events/pixel/shopify';
  const body = JSON.stringify(event);
  fetch(url, {
    body: body,
    headers: { 'Content-Type': 'application/json' },
    method: 'POST'
  }).then(function(response) {
    if (!response.ok) {
      throw new Error(`Error HTTP: ${ response.status }`);
    }
  }).catch(function (error) {
    throw new Error(`${ error.message } (POST: ${ url })`);
  });
};

analytics.subscribe('product_added_to_cart', event => {
  const origin = event.context.window.origin;
  const variant_id = event.data.cartLine.merchandise.id;
  const product_id = <product_id>;
  const timestamp = event.timestamp;
  browser.localStorage.getItem('ftl_device_id').then(tracking_id => {
    const cartEvent = {
      origin,
      client_id: CLIENT_ID,
      event: 'cart',
      tracking_id,
      product_id,
      variant_id,
      timestamp
    };
    sendEvent(cartEvent);
  });
});

analytics.subscribe('checkout_completed', event => {
  const origin = event.context.window.origin;
  const checkout = event.data.checkout;
  const products = checkout.lineItems.map(item => {
    return {
      variant_id: item.variant.id,
      product_id: <product_id>,
      quantity: item.quantity,
      price: item.variant.price
    };
  });
  const totalAmount = checkout.totalPrice;
  const timestamp = event.timestamp;
  const order_id = checkout.order.id;
  browser.localStorage.getItem('ftl_device_id').then(tracking_id => {
    const checkoutEvent = {
      origin,
      client_id: CLIENT_ID,
      event: 'checkout',
      tracking_id,
      order_id,
      products,
      timestamp,
      total: totalAmount
    };
    sendEvent(checkoutEvent);
  });
});

Save and Connect

Click Save at the top of the page, then click Connect to activate the pixel. When you return to the Customer Events page, it should display as “Connected”.

Shopify Add custom pixel