Tracking checkouts, purchases and revenue attribution on Shopify

Here's how to add Plausible Analytics to your Shopify store and set up the tracking of events such as add to cart, checkout, purchase, revenue attribution and more.

Add Plausible snippet to Shopify

Log in to your Shopify account and click on Sales Channels > Online Store > Themes in the left-hand side menu.
Click on the icon with three dots next to your current theme and choose Edit code from the drop-down menu.

In the Layout folder, select your theme.liquid file and paste your Plausible snippet in the Head Code section. We display your snippet during the process of adding a new site to your account. You can also see the snippet within the Site Installation area of the General section in your site settings.
Do click on the Save Changes to publish your changes.

Track checkouts and revenue attribution

Even after having added the Plausible snippet into your theme.liquid file, checkout pages such as /checkouts/cn/:id/review or /checkouts/cn/:id/thank-you will not be tracked yet. That's because they're not using the same theme layout. To enable pageview tracking on checkout pages, you need to create a custom pixel. The same pixel can also be used for tracking Shopify's customer events (e.g. "product_added_to_cart", "checkout_completed", etc...) with revenue attribution and custom properties.

To create the custom pixel, follow these steps:

Go to your Shopify admin page
Click on the Settings button at the bottom left

Open the Customer events section, and click on Add custom pixel
Choose a name for your pixel (e.g. Plausible)
Copy and paste the snippet into the Code block according to your tracking needs as instructed below
Click Save at the top, then connect the pixel
That's it - your custom Plausible pixel should now be tracking!

Snippet options for the custom pixel

The code that will end up in your pixel depends on what you want to track. The first code block (Setup block) is required for everything else to work. Everything that follows the Setup block is optional. You can copy and paste the code blocks that you're interested in, one after another.

Setup block [Required]

This snippet is required for everything else that follows, but doesn't track anything by itself. Make sure to replace yourdomain.com on the first line with the name of your site in Plausible.

Note that this snippet should be placed at the top of the code block.

const DATA_DOMAIN = 'yourdomain.com';

const script = document.createElement('script');
script.defer = true;
script.dataset.domain = DATA_DOMAIN;
script.dataset.api = 'https://plausible.io/api/event';
script.src = 'https://plausible.io/js/script.manual.revenue.js';
document.head.appendChild(script);

window.plausible = window.plausible || function() {
  (window.plausible.q = window.plausible.q || []).push(arguments)
}

Track pageviews on checkout pages

Track pageviews on checkout page paths such as:

/checkouts/cn/Z2NwLWV1cm9wZS13ZXN0N/
/checkouts/cn/Z2NwLWV1cm9wZS13ZXN0N/review
/checkouts/cn/Z2NwLWV1cm9wZS13ZXN0N/processing
/checkouts/cn/Z2NwLWV1cm9wZS13ZXN0N/thank-you

// Track pageviews on checkout pages
analytics.subscribe('page_viewed', async (event) => {
  const loc = event.context.document.location;

  // This "if" condition makes sure only checkout paths are tracked.
  // The "page_viewed" customer event is also fired for other pages,
  // but those should be tracked by the global snippet installed in
  // the `theme.liquid` file.
  if (loc.pathname.startsWith('/checkouts')) {
    plausible('pageview', {u: loc.href})
  }
});

You can then group all visits to checkout pages into one set of pages in your Plausible dashboard to better analyze your marketing campaigns and performance.

Click on the Filter button on the top right of your dashboard and then choose Page. Here you can combine URLs to analyze them as one group. Filter by "contains" thank_you to combine all the purchase confirmations or by "contains" checkouts to group all the checkouts.

Doing this will segment your dashboard by the traffic that went through the checkout process and successfully placed orders. You'll be able to see the referral sources and landing pages that drove the most conversions. You'll also be able to see the location and device details of the buyers too.

If you'd like to see these grouped order confirmations or checkout page visits permanently in your dashboard, you can add them as pageview goals.

Track started checkouts

Send a custom event called Begin Checkout to Plausible every time the checkout process is started. The total price of the shopping cart will be recorded under this event.

// Track started checkouts
analytics.subscribe('checkout_started', async (event) => {
  const amount = event.data.checkout.totalPrice.amount;
  const currency = event.data.checkout.currencyCode;

  plausible('Begin Checkout', {
    revenue: {amount: amount, currency: currency},
    u: event.context.document.location.href
  })
});