Shopify

Adding the Fathom script to your Shopify website is a quick and easy process. Here's how you set up your Shopify site to work with our analytics:

Setting up the script

1. Copy your Fathom Analytics script from your site settings.
2. Sign in to your Shopify account.
3. In the sidebar, click on Sales channels > Online Store > Themes.
4. Click the ellipsis menu on your current theme and select Edit code.
   
5. Within the Layout section, select the theme.liquid file.
6. Paste your Fathom Analytics script just above the closing </head> tag.
   
7. Click Save.
8. To check the script is working, head over to your site and then check your Fathom dashboard to see if your visit was recorded.

Collecting data for purchases

If you would like to capture data for events like purchases, add to cart, checkouts, etc, you can do so using our events within Shopify's web pixel. Here's how:

Setting up a Web Pixel in Shopify

1. In your Shopify account, search for "Customer events" in the search bar and then click Customer events.
2. Click Add custom pixel.
3. Give the pixel a relevant name.
4. In the Code text box, add your pixel code (see more about this below).
5. Click Save in the top right.
6. Click Connect.

Putting your pixel code together

Below are individual event tracking snippets that you can add to your Web Pixel, depending on which events you want to track. At the bottom, you'll find the full script with all events combined.

Adding the Fathom script

This snippet of code ensures Fathom Analytics is loaded on your Shopify store. It's important to add this first.

Note: On the third line in the code below, replace YOUR-SITE-ID inside the single quote marks with your actual Fathom Site ID.

const script = document.createElement('script');
script.id = 'fathom';
script.dataset.site = 'YOUR-SITE-ID';
script.src = "https://cdn.usefathom.com/script.js";
script.setAttribute('defer', '');
script.setAttribute('data-auto', 'false');
document.getElementsByTagName('head')[0].appendChild(script);

Tracking Product Additions to Cart

Tracks when a customer adds a product to their cart and adds the product name and price to the event.

analytics.subscribe("product_added_to_cart", (event) => {
  const productName = event.data.cartLine.merchandise.product.title;
  const productPrice = event.data.cartLine.cost.totalAmount.amount * 100;
 
  fathom.trackEvent(`Add to cart: ${productName}`, {
    _value: productPrice
  });
});

Tracking Cart Views

Tracks when a customer views their cart and adds the total cart price to the event.

analytics.subscribe("cart_viewed", (event) => {
  const totalCartPrice = event.data.cart.cost.totalAmount.amount * 100;
 
  fathom.trackEvent('Cart Viewed', {
    _value: totalCartPrice
  });
});

Tracking Checkout Initiation

Tracks when a customer starts the checkout process and adds the total checkout price to the event.

analytics.subscribe("checkout_started", (event) => {
  const checkoutTotalPrice = event.data.checkout.totalPrice.amount * 100;
 
  fathom.trackEvent('Checkout Started', {
    _value: checkoutTotalPrice
  });
});

Tracking Completed Checkouts (Orders Placed)

Tracks when an order is successfully placed and adds the total order price to the event.

analytics.subscribe("checkout_completed", (event) => {
  const checkoutTotalPrice = event.data.checkout.totalPrice.amount * 100;
 
  fathom.trackEvent('Order Placed', {
    _value: checkoutTotalPrice
  });
});

Tracking Product Sales

Tracks when an order is successfully placed and adds each line item's product name and price to the event.

analytics.subscribe("checkout_completed", (event) => {
  const checkoutTotalPrice = event.data.checkout.totalPrice.amount * 100;
 
  event.data.checkout.lineItems.forEach((item) => {
    fathom.trackEvent(`Product Sold: ${item.title}`, {
      _value: item.variant.price.amount * 100
    });
  });
});

Tracking Search Queries

Tracks when a customer submits a search query on your store.

analytics.subscribe("search_submitted", (event) => {
  fathom.trackEvent(`Search Query: ${event.data.searchResult.query}`);
});

Full Web Pixel script (All events combined):

If you want to track all of the above events, use this complete script:

Note: On the third line in the code below, remember to replace YOUR-SITE-ID inside the single quote marks with your actual Fathom Site ID.

const script = document.createElement('script');
script.id = 'fathom';
script.dataset.site = 'YOUR-SITE-ID';
script.src = "https://cdn.usefathom.com/script.js";
script.setAttribute('defer', '');
script.setAttribute('data-auto', 'false');
document.getElementsByTagName('head')[0].appendChild(script);
 
script.onload = () => {
  analytics.subscribe("product_added_to_cart", (event) => {
    const productName = event.data.cartLine.merchandise.product.title;
    const productPrice = event.data.cartLine.cost.totalAmount.amount * 100;
    fathom.trackEvent(`Add to cart: ${productName}`, { _value: productPrice });
  });
 
  analytics.subscribe("cart_viewed", (event) => {
    const totalCartPrice = event.data.cart.cost.totalAmount.amount * 100;
    fathom.trackEvent('Cart Viewed', { _value: totalCartPrice });
  });
 
  analytics.subscribe("checkout_started", (event) => {
    const checkoutTotalPrice = event.data.checkout.totalPrice.amount * 100;
    fathom.trackEvent('Checkout Started', { _value: checkoutTotalPrice });
  });
 
  analytics.subscribe("checkout_completed", (event) => {
    const checkoutTotalPrice = event.data.checkout.totalPrice.amount * 100;
    fathom.trackEvent('Order Placed', { _value: checkoutTotalPrice });
    event.data.checkout.lineItems.forEach((item) => {
      fathom.trackEvent(`Product Sold: ${item.title}`, { _value: item.variant.price.amount * 100 });
    });
  });
 
  analytics.subscribe("search_submitted", (event) => {
    fathom.trackEvent(`Search Query: ${event.data.searchResult.query}`);
  });
};

Further customisation

Shopify provide an API for subscribing to customer events using their analytics.subscribe function. There are other customer events available that we haven't covered above that you may want to track, or you may want to customise the code examples we've provided above to include additional data in your Fathom events.

You can find more information about Shopify's customer events here. Click on the event name to see more information about the event, how to subscribe to it, and what data is available.

We also have a detailed guide on how our events work here.