How to track e-commerce events and revenue

E-commerce tracking shows you how people interact with your products and what leads to a purchase. By the end of this guide, you'll track product views, cart events and revenue in your store.

Pieowl has a purchase() method that links each payment to the visitor who made it. Then you can see which traffic sources, campaigns and referrers bring in the most money. You can track revenue from your frontend for a quick start, or from your backend for exact numbers.

The examples are React components that use the script tag and window.pieowl. The method names are the same in the JavaScript SDKs.

Prerequisites

• A Pieowl account
• Your Client ID from the dashboard
• The Pieowl script on your site

Track product views

Product views show you which items catch people's eye. When a user opens a product page, send an event with the product details. Later you can see which products get viewed but not bought.

import { useEffect } from 'react';

function ProductPage({ product }) {
  useEffect(() => {
    window.pieowl('track', 'product_viewed', {
      product_id: product.id,
      product_name: product.name,
      product_category: product.category,
      product_price: product.price,
      currency: 'USD',
    });
  }, [product.id]);

  return <div>{product.name}</div>;
}

Use the same properties on all your product events. The same product_id format everywhere makes it easy to connect views to purchases.

Track cart activity

Cart events show you where users drop out of the purchase. Track both adds and removes to understand abandoned carts.

When a user adds an item, send the product details and the new cart value. That shows you order sizes at each step of the funnel.

function ProductCard({ product, cart }) {
  const handleAddToCart = () => {
    window.pieowl('track', 'product_added_to_cart', {
      product_id: product.id,
      product_name: product.name,
      product_price: product.price,
      quantity: 1,
      cart_value: cart.total + product.price,
      currency: 'USD',
    });

    addToCart(product);
  };

  return (
    <button onClick={handleAddToCart}>Add to Cart</button>
  );
}

Track removals the same way. Matching add and remove events make it easy to work out net cart changes.

const handleRemoveFromCart = (item) => {
  window.pieowl('track', 'product_removed_from_cart', {
    product_id: item.id,
    product_name: item.name,
    product_price: item.price,
    quantity: item.quantity,
    currency: 'USD',
  });

  removeFromCart(item);
};

Track purchases and revenue

Revenue is where e-commerce analytics pays off. Pieowl links each payment back to the visitor, so you can see which sources bring in the most value.

Two rules apply to every purchase:

• Send the order number and the amount in normal units. For €49.99, send id: 'A-1001', amount: 49.99 and currency: 'EUR'. The same order number sent twice counts once. Pieowl converts other currencies to your site currency.
• Revenue needs a trusted source. Calls with your client secret (from your backend) always work. Calls from the browser are rejected unless you turn on Accept revenue sent from the browser in your site settings. It is off by default, because anyone could send fake revenue from a browser.

From the frontend

For a quick start, call purchase() on your success page, when your site learns the payment went through. If the page is reloaded, the order number keeps it from counting twice. Remember to turn on the Accept revenue sent from the browser setting first.

function SuccessPage({ order }) {
  useEffect(() => {
    window.pieowl('purchase', {
      id: order.number,
      amount: order.total, // 49.99
      currency: order.currency, // 'EUR'
      order_items: order.items.length,
    });
  }, [order.number]);

  return <div>Thank you for your purchase!</div>;
}

If your success page doesn't know the order, look it up on your server first, for example with the checkout session ID your payment provider adds to the success address. Then call purchase() as above. Or send the purchase from your payment webhook, as shown next. Pieowl stores nothing in the browser to carry a purchase across the redirect.

Revenue sent from the browser is conversion measurement. In some countries it needs your visitors' consent. See Do you need a cookie banner?.

From the backend (recommended)

For exact numbers, track revenue in your payment webhook. Then you only count payments that went through. To link the payment to the visitor, send their deviceId when you create the checkout.

// Frontend: send the deviceId when starting checkout
const deviceId = window.pieowl.getDeviceId();

const response = await fetch('/api/checkout', {
  method: 'POST',
  body: JSON.stringify({
    deviceId,
    items: cart.items,
  }),
});

getDeviceId() returns an empty string until the first event of the visit has been sent. On a checkout page, a page view has almost always been sent already.

Store the deviceId in your payment provider's metadata. In your webhook handler, use it to credit the revenue to the right visitor. This backend instance uses @pieowl/sdk with your client secret.

// Backend: webhook handler
import { Pieowl } from '@pieowl/sdk';

const pieowl = new Pieowl({
  clientId: process.env.PIEOWL_CLIENT_ID,
  clientSecret: process.env.PIEOWL_CLIENT_SECRET,
});

export async function POST(req) {
  const event = await req.json();

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;

    await pieowl.purchase({
      id: session.id, // a resent webhook counts once
      amount: session.amount_total / 100, // Stripe sends cents
      currency: session.currency.toUpperCase(),
      deviceId: session.metadata.deviceId,
    });
  }

  return Response.json({ received: true });
}

Some currencies, like JPY, have no decimals, so don't divide those by 100. If your payment provider gives you the amount with decimals, send that.

If your users are logged in, pass profileId instead of deviceId. Then you don't need to capture the device ID during checkout.

When you give money back, call pieowl.refund({ id: session.id }). Pass amount for a partial refund.

Verify your setup

Open the Pieowl dashboard and trigger a few events by hand. Add a product to your cart, then check the realtime view to see the events arrive with the right properties.

For revenue, make a small test purchase or use your payment provider's test mode. Find the revenue event in the dashboard and check that the amount is right. If 49.99 shows as 4,999, you sent cents instead of normal units.

No events? Check that your Client ID is correct and that no ad blocker is in the way. The Network tab in your browser shows whether requests are sent. If revenue calls from the browser fail, check the Accept revenue sent from the browser setting.

Next steps

Once e-commerce tracking works, build purchase funnels to see conversion rates at each step. The revenue tracking documentation covers more flows in detail. To learn how Pieowl links visits without cookies, read about cookieless tracking.

For the basics of event names, properties and common patterns, see the track custom events guide.