Skip to main content
A shop sends six events. Five of them have a template method in Analytics Web (@grainql/analytics-web). The dashboard reads the template events by their fixed names. Every block on this page uses Analytics Web. For a full React shop, read E-commerce store.

​
The funnel

Every property is optional. Each item in items holds id, name, price, and quantity. An item of purchase can also hold category. Every template method takes an options object as the second argument. { flush: true } sends the event at once. The TypeScript types of the package win over this table when they disagree. Read Template events. Call trackSearch after the results arrive, so results holds the count.

​
Product view

There is no template method for a product view. Use track with one name for the whole site.

​
Add to cart and remove from cart

Send the unit price and the quantity of the change, not the cart total. When a visitor changes a quantity, send add_to_cart or remove_from_cart with the difference.

​
Checkout

Call trackCheckout when the checkout starts. If the payment fails, call it again with success: false and the errorMessage. Send the same orderId later in purchase.

​
Purchase

Call trackPurchase one time per order, on the confirmation page, with { flush: true }. The flush sends the event before the visitor leaves the page.

​
Where to see the results

A track shows every path from one event to another and where the visitors stop. Create a track from product_viewed to purchase, or from add_to_cart to checkout. Read Tracks. A goal counts one event against a target for a period. Create a goal on purchase with a monthly target. Read Mission Control.

​
Rules for the client

  1. Use the template methods for the five template events. Do not send purchase or add_to_cart with track under a different name. The dashboard reads the fixed names.
  2. Send currency with every price. A total without a currency cannot be compared with another total.
  3. Send the same orderId in checkout and purchase. A query on orderId then returns both events of one order.
  4. Send purchase one time per order. A page reload on the confirmation page must not send it again.
  5. Pass { flush: true } to trackPurchase and to the last trackCheckout before a navigation. Without it, the batch timer can fire after the page unloads, and the event is lost.
  6. Send items on checkout and purchase. A total alone does not show which products sell.
  7. Send the price per unit and the quantity, not a line total. A line total hides the quantity.