Quickstart: Tracking purchases & key conversions with datalayer collector
Introduction
You've learned how to track what users see and click on. The next crucial step is to track when they perform a meaningful action, known as a conversion. A conversion is any user action that is important to your business, but the most significant one is a completed purchase. Tracking purchases provides the strongest possible positive signal to the Luigi's Box AI models, directly teaching them which products are most valuable and helping to improve search ranking and recommendations for all future users.
What you'll learn
- How to send an add_to_cart event using the DataLayer Collector.
- How to send a purchase event to record a completed transaction.
- Best practices for tracking conversion events accurately.
Who is this guide for
- Developers who have already completed one of the initial quickstart guides and have a working setup for tracking page views and clicks.
Prerequisites
Before you start, please ensure you have the following in place:
- A working analytics setup for the DataLayer Collector.
- The ability to add tracking code that fires when a user adds an item to the cart and completes a purchase.
Step-by-step
Step 1: Track the "add to cart" event
Tracking when a user adds an item to their cart is a key "micro-conversion" that signals strong interest. You should push an add_to_cart
event every time this action occurs.
Example: Push an add_to_cart
event
window.dataLayer.push({
event: "add_to_cart",
ecommerce: {
currency: "EUR",
value: 7.77, // Price of the item being added
items: [
{
item_id: "SKU_12345" // The ID of the item added to the cart
}
]
}
});
Key fields explained
-
event
: Must be exactly"add_to_cart"
-
value
andcurrency
: Optional fields that represent the monetary value of the item being added.
Step 2: Track the purchase event
On your order confirmation page, push a purchase
event to the dataLayer
. this event should contain details about the entire transaction.
Example: Push a purchase
event to your dataLayer
window.dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T_12345", // The unique ID for this transaction
value: 72.05, // The total monetary value of the transaction
currency: "EUR", // The transaction currency
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
price: 10.01, // Price of a SINGLE unit
quantity: 3
},
{
item_id: "SKU_12346",
item_name: "Grey Women's Tee",
price: 21.01, // Price of a SINGLE unit
quantity: 2
}
// ... all other items in the transaction
]
}
});
Key fields explained
-
transaction_id
: A unique identifier for this specific order. -
value
: The total value of the sale, including all items. -
price
: In theitems
array for apurchase
event, this should be the price of a single unit of item.
Best Practices
-
Track on confirmation: Fire the
purchase
event only after payment is confirmed. This prevents tracking abandoned or failed transactions and keeps your data clean. -
Include all items: The
items
array should contain every single item from the order to give the AI a complete picture of what was purchased together. -
Verify your events Use the Web Linter (
Luigis.lint = true
) to get immediate feedback in your browser's console. For end-to-end verification, use the Live Session Explorer in the Luigi's Box application to confirm the server received the event correctly.
Next Steps
Beyond adding to the cart and purchasing, you can track other important conversions that signal user interest: