< Back to blog

Powerful eCommerce analytics with Plausible and Commerce.js

Implementing eCommerce analytics is a crucial part of building an online store. Using analytics to understand how customers are interacting with your website allows you to make data-driven decisions about how to drive more online sales.

Commerce analytics typically involves the tracking of events like product views, page dropoffs, which sites your users are coming from, which buttons they’re clicking (and not clicking), and many other things. All of this is made easy with Plausible Analytics — a simple, open-source and privacy-friendly analytics tool.

Plausible combined with Commerce.js is a powerful combination for building progressive eCommerce websites. Using these tools to build the Ira Concept website has allowed us to quickly and constantly iterate, all with the aim of optimising our customers’ online shopping experience.

Why Plausible and Commerce.js?

It’s the same reason for both tools: they’re developer-friendly. Both Plausible and Commerce.js offer just the right amount of functionality allowing them to remain simple yet powerful. And of course, they’ve got great API documentation too.

Plausible will automatically track basic events like page views and user device types, and you can use “goals” to track any kind of custom events such as clicks and errors. Commerce.js is a “headless commerce” solution that takes care of the complex backend (checkouts, orders, products, etc.) but leaves you in full control of the frontend experience.

Both tools will fit seamlessly into any web framework, but especially with Next.js as we’ll see later on.

const handleAddToCart = async (productId: string, quantity: number) => {
  const { cart } = await commerce.cart.add(productId, quantity)
  setCart(cart)
  plausible("addProductToCart")
}

Above is a minimal example of using both Plausible and Commerce.js: a function for adding a product to a cart.

Plausible over Google Analytics

When adding analytics to a website, many people will choose to use Google Analytics. It’s a well-known tool and it’s free to use, but it’s also overly complex for the majority of businesses and can easily cause unwanted data privacy problems.

These problems are why I prefer to use Plausible. The Plausible team take data privacy seriously, and so they’ve built an analytics tool that doesn’t collect any personal data or personally identifiable information (PII) and doesn’t even use cookies.

The goal of Plausible Analytics is to track overall trends in your website traffic, it is not to track individual visitors — plausible.io

Unlike the Google Analytics dashboard, the Plausible dashboard makes sense immediately and to everybody. The Google Analytics dashboard is overwhelming, filled with menus, custom dashboards and reports, which for most people aren’t even necessary. Plausible provides an easy-to-use dashboard with clear summaries and the ability to drill down into each section for more details. plausable dashboard Not only is the dashboard easier to digest, but the underlying Plausible code is also incredibly clean. That’s why the Plausible script is significantly smaller than the Google Analytics script: it’s 17 times smaller than Google Analytics on its own and 45 times smaller than the recommended Google Analytics + Google Tag Manager. A smaller script means a faster page load, critical in the world of eCommerce where increased loading has proven to reduce customer conversion.

There is one small downside to all of this though: unlike Google Analytics, Plausible isn’t free to use. There’s a free 30-day trial period, followed by a subscription plan of $6 per month (or a slightly cheaper yearly plan). In my opinion, it's a small price to pay and totally worth it.

Start tracking with Plausible, Commerce.js and Next.js

Both Plausible and Commerce.js can be used with any web development framework, but like many others, I love to use Next.js.

Setting up Plausible

First, create a Plausible account and enter the domain of the site to be tracked. You’ll be given a small JavaScript snippet that you can copy and paste straight into your website Head to get started. Or with Next.js, you can use the next-plausible package to make the integration even easier, and more familiar for React developers. Just wrap your entire application (in the _app.tsx file) with a PlausibleProvider.

import PlausibleProvider from "next-plausible";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <PlausibleProvider domain="best-ecommercesite.com">
      <Component {...pageProps} />
    </PlausibleProvider>
  );
}

This alone will trigger Plausible to start tracking page views, entry/exit pages, user locations, and much more (everything from the dashboard screenshot above). It also means that we can use the usePlausible hook anywhere allowing us to send custom events to Plausible, as we’ll see a bit later.

Setting up Commerce.js

Create an account and get your API keys. Install @chec/commerce.js and use your public key to instantiate a Commerce.js client. Export the client so that it’s ready to be imported anywhere in your application.

import Commerce from "@chec/commerce.js";

const commercePublicKey = process.env.NEXT_PLUBIC_COMMERCEJS_PUBLIC_KEY;
export const commerce = new Commerce(commercePublicKey);

And remember to install types if using TypeScript: @types/chec__commerce.js

Tracking an eCommerce event

We can now track our first event: adding a product to a cart. Custom events are tracked through “goals” which must be first added in Plausible the dashboard: Plausible goals

Now we can write some code to track the event — each time a user clicks on the “add to cart” button, we’ll send an event to Plausible. To make the event more meaningful, we’ll include the name of the product in the event payload:

import { usePlausible } from "next-plausible"
import { commerce } from "libs/commercejs"
import { useCart } from "context/cart"

function AddToCartButton({ product, quantity }) {
  const { setCart } = useCart()        // <-- a custom hook to manage cart state
  const plausible = usePlausible()     // <-- access the plausible API

  const handleAddToCart = async () => { 
    const { cart } = await commerce.cart.add(product.id, quantity)
    setCart(cart)

    plausible("addProductToCart", {
      props: {
        productName: product.name,
      }
    })
  }

  return (
    <Button onClick={handleAddToCart}>Add to cart</Button>
  )
}

Remember to never include personal data in event payloads, so as to stick with Plausible’s focus on data privacy— never add customer names or emails! The Plausible dashboard will give an overview of all custom events, and for each one, we can see the details which in this case includes the product name: Plausible analytics info

Usually, when tracking important events like this, it’s equally important to know when they’re not working. We can send a custom event when the “add to product” action throws an error, and include the error message in the event payload:

  try {
    const { cart } = await commerce.cart.add(product.id, quantity)
    setCart(cart)

    plausible("addProductToCart", {
      props: {
        productName: product.name,
      }
    })
  } catch (error) {
    plausible("addProductToCartError", {
      props: {
        productName: product.name,
        error: error.message,
      }
    })
  }
}

Advanced tracking using the Plausible Events API

Most insights will come from events that involve users interacting directly with your website, like clicking buttons and viewing certain pages. But maybe you want to get creative and also track events that are happening outside of the browser — like an API handling payments, or one receiving your Commerce.js webhooks. For these, you can use the Plausible Events API to send events from anywhere using HTTP requests. Whilst the use-cases for this might not be as obvious, it’s worth considering when deciding what kind of analytics you need.

Entirely plausible eCommerce

With Commerce.js, you can build feature-rich eCommerce sites, and Plausible is the perfect tool to help you gain insights into how your customers are using these features. Both tools feel lightweight and flexible compared to their traditional alternatives, leaving you as a developer feeling much more in control of the eCommerce experience that you’re building for your customers.

Ready to take control of your commerce?

Leverage our headless backend to build product, cart, and checkout experiences as per your requirements.

Speak to our expert team or sign up for free today.

Contact sales
Contact us