LogoLogo
Support
Product Discovery Developer Guide
Product Discovery Developer Guide
  • Product Discovery Developer Guide
  • 🛒Item catalog management
    • What is the Items API?
    • How to work with Items
      • Item Schema
        • Attributes
        • Nested Item Schemas
        • Using the Item Schema API
        • DefaultLocale API
        • Onboarding on/migrating to Fredhopper
        • List of Reserved Attributes
      • Category Tree
        • Using the Category Tree API
        • Onboarding on XO
      • Item Catalog
        • Using the Catalog API
      • Items
        • Using the streaming Items API
        • Using the batch Items API
    • Step by Step guide
      • Step by step guide for Fredhopper customers
    • Feedback
      • Using the Feedback API
    • Authorization to APIs
    • Troubleshooting API errors
  • 🎯XO Recommendations
    • Introduction
    • Using the Recommendations API
    • Setting up the Chrome extension
    • Micro-segmentation
    • XO Legacy APIs
  • 🔎XO Search
    • Introduction
    • Getting started
    • API Reference
      • Search API
      • Autocomplete API (Beta)
      • Product Suggest API
    • API Parameters
      • Search
      • Pagination
      • Faceting
      • Sorting
      • Grouping
      • Filtering
      • Disable features
      • Response mask
      • Context
    • Configuration limitation
  • 🧪A/B testing
    • Fredhopper A/B testing
      • Integration steps for a non-caching solution
      • Integration steps for a caching solution
        • Java SDK Integration
          • Setup
          • Retrieve running A/B tests - Java SDK
          • Filter and request variant - Java SDK
          • Extending the SDK
        • Manual A/B tests integration
          • Retrieve running A/B tests
          • Filter out irrelevant A/B tests
          • Assign variants to user
          • Request variant for page
        • Limitations and Best Practices
  • 📚Resources
    • Glossary
    • Best Practices
      • Tracker Best Practices
      • Items API Best Practices
      • Fredhopper Data Configuration Best Practices
      • Fredhopper Query Response Best Practices
      • Fredhopper Merchandising Studio Best Practices
    • Privacy Notice
  • Archived Pages
    • FHR Tracking plan
    • XO Tracking plan
    • The Tracking API and JS Library
      • What to Track
        • Generic Actions
          • View
          • Click
          • Add to Cart
          • Remove from Cart
          • Purchase
        • Custom Actions
      • Initializing the JavaScript Library
      • REST API Technical Documentation
Powered by GitBook

Copyright @ 2024 Crownpeak Technology, Inc. All rights reserved.

On this page
  • Lister page
  • Product detail page
  1. Archived Pages
  2. The Tracking API and JS Library
  3. What to Track
  4. Generic Actions

Add to Cart

When your user decides to add a product to cart, you should send an add-to-cart action. Add to cart actions are mostly used to calculate add to cart (or add to basket) conversion rates. You should send an add to cart event for each product the user adds to their cart and specify the quantity of the product added in the metadata.

Lister page

When the add to cart comes from navigation result page or a search result page, rather than from a product detail page, we consider this as adding to cart from a lister page. See example:

const addToCartAction = {
    "action":"add-to-cart",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "quantity": 1,
        "locale": "en_GB"
    },
    "sourceId": "5f0dfaf1-c79a-47fd-982f-b17de6533cf3" // optional, see below
}
xo.activity.send(addToCartAction);

The properties needed for sending an add to cart event from a lister page are as follows:

  • action - you need to specify the action as add-to-cart

  • target.product - you need to specify the product id that is added to cart. If you are implementing an FHR integration, this would be equal to the secondId available in the FHR query response.

  • metadata.quantity - you need to specify the quantity of the item added in the basket.

  • sourceId - if you are implementing an FHR integration you should send over the source id of the page which corresponds to the responseId **from the FHR query** response.

  • locale - the locale selected by the user.

Any additional information you wish to send(other than quantity) can also be included in the metadata _**_object.

Important! Don't forget, you need to send a separate event for every item.

Product detail page

When the add to cart comes from a product detail page, you should omit the source id. See example:

const addToCartAction = {
    "action":"add-to-cart",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "quantity": 1,
        "locale": "en_GB"
    }
}
xo.activity.send(addToCartAction);

The properties needed for sending an add to cart event from a product detail page are as follows:

  • action - you need to specify the action as add-to-cart

  • target.product - you need to specify the product id that is added to cart. If you are implementing an FHR integration, this would be equal to the secondId available in the FHR query response.

  • metadata.quantity - you need to specify the quantity of the item added in the basket.

  • locale - the locale selected by the user.

Any additional information you wish to send(other than quantity) can also be included in the metadata _**_object.

PreviousClickNextRemove from Cart

Last updated 3 years ago