[ Web Proxy ]
URL:
Viewing: https://usefathom.com/docs/integrations/shopify [Back]  [Original]
Shopify - Fathom Analytics Skip to main content
Fathom Analytics [Fathom Analytics]
Product Why Fathom Pricing Resources
Free trialLogin
Fathom Analytics [Fathom Analytics]
Support home / Integrations

Shopify

Adding the Fathom script to your Shopify website is a quick and easy process. Heres 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.
    Editing a theme's code [Editing a theme's code]
  5. Within the Layout section, select the theme.liquid file.
  6. Paste your Fathom Analytics script just above the closing </head> tag.
    Editing a theme&#x27;s code [Editing a theme&#x27;s code]
  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 Shopifys web pixel. Heres 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, youll 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. Its 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 items 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 havent covered above that you may want to track, or you may want to customise the code examples weve provided above to include additional data in your Fathom events.

You can find more information about Shopifys 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.


If you still have questions or require help with anything, please reach out to us and we'll happily get things sorted out for you.

Search...:
Fathom Analytics [Fathom Analytics]

We've counted billions of pageviews for thousands of customers, all without ever compromising anyone's digital privacy. We hope you'll join us.

2018-2026 Fathom Analytics.

Get started

Learn

Our software

Legal

Details

Web Proxy Viewer  |  New URL  |  Original Page