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 and currency: 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 the items array for a purchase 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: