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

Keep all configurations as they are by default, except for the code. We will link two triggering events from Shopify’s analytics functionality:

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 = event.data.cartLine.merchandise.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: item.variant.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