Track ecommerce events

Besides page views, the script can record four steps of the purchase. They show where visitors give up, and they give attribution more information to work with. On Shopify, the Clakta Script records these for you. On other stores, a developer adds the calls below.

The four events

All of them come from the same package, and none of them need the script id again:

import clakta from "@clakta/javascript"

Product view

Call it on a product page:

clakta.pageViewWithProduct({
  id: "sku-1042",
  name: "Blue shirt",
  price: 29.99,
  currency: "USD",
})

Add to cart

clakta.addToCart({
  id: "sku-1042",
  name: "Blue shirt",
  price: 29.99,
  currency: "USD",
  quantity: 1,
})

Checkout started

clakta.checkoutStarted({
  orderId: "1042",
  token: "checkout-token-abc",
  email: "customer@example.com",
  currency: "USD",
  value: 59.98,
  lineItems: [
    { id: "sku-1042", name: "Blue shirt", price: 29.99, quantity: 2 },
  ],
})

Payment submitted

Send it when the shopper submits payment, before you know if it was approved:

clakta.paymentSubmitted({
  orderId: "1042",
  currency: "USD",
  value: 59.98,
})

Fields Clakta reads

Products: id, name, price, currency, quantity

Orders and carts: orderId, token, email, currency, value, lineItems

Anything else you send is kept as extra information. Prices are plain numbers in the main unit (29.99, not 2999), and currencies use the three-letter code, such as USD.

In privacy-friendly projects, don't send email: it is personal data that mode doesn't collect.

Custom events

For anything outside the purchase steps:

clakta.trackEvent("hero-cta", "click", { variant: "A" })

The first value is your own name for what you are tracking (a button, a section), the second is the kind of event, and the third is optional extra information.

Where to put the calls

• Product view: when the product page opens, including when the visitor moves between products without reloading the page.
• Add to cart: after the product was actually added, not on the click, or failed attempts are counted too.
• Checkout started: when the checkout page first shows.
• Payment submitted: when the payment form is sent, right before the visitor goes to the payment provider.

You can call them before the script finishes loading: Clakta holds them and sends them as soon as it is ready.