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.

Permission: Not required.
Data Sale: Data collected does not qualify as data sale.

Shopify pixel permission and data sale configuration settings

In the Code section, insert the following code:

const CLIENT_ID = '<client_id>';
const COUNTRY_CODE = init?.data?.shop?.countryCode;

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,
      shop_country: COUNTRY_CODE,
      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,
      shop_country: COUNTRY_CODE,
      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