Track Add To Cart (ATC) Events - Bloomreach Experience - Open Source CMS

Track Add To Cart (ATC) Events

Any time a user adds an item to their cart, Bloomreach's Add To Cart Event should fire. Typically this includes the product display page, product listing pages such as category or search pages as well as Quick Views. If an Add To Cart button is located anywhere else on your site (e.g. Product Bundle, Collection or Sku Set pages) , please also fire this tag there as well. 

To get started, follow the steps given below:

1. Copy & paste the ATC Event Tracking Snippet & install on all of your ATC buttons. 
2. Map the ATC Event Variables in the ATC Tracking Snippet. Check the implementation scenarios for examples.

ATC Event Tracking Snippet for ATC Button

BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': '<Product ID>', 'sku' : '<Sku ID>'});

ATC Event Variables

Map Cart Data in your ATC Event code snippet

 prod_id

Variable

Type

Example

Dependencies

Description

prod_id String  pid123456 1.) Needs to match Product ID sent in feed

2.) Needs to match the prod_id in the conversion Page View Pixel.
This is the unique ID, which describes a product, product bundle, product collection or sku set. If a product is available in multiple SKUs (e.g. color/size combinations), this field refers to the id shared by all the SKUs for a product.

 sku

sku String  sku38738 Needs to match Sku ID sent in feed Unique SKU id that representing the selected variant of this product
(e.g. size M, color blue of a t-shirt).

If your site does not have SKUs, leave this blank.

Implementation Scenarios

Scenario

Examples

ATC on a Product Detail Page (PDP) with a product ID and a Sku ID

If your product ID is prod1234 and the sku ID is sku38738, your ATC event should look like:

BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'pid12456', 'sku' : 'sku38738'});

ATC on a Product Detail Page (PDP) with a product ID but no Sku ID

If your product ID is prod1234, but there is no Sku, your ATC event should look like:

BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'pid12456', 'sku' : ''});

ATC on a Product Bundle page with a unique Bundle ID

If your Product Bundle page has their own unique ID and is sold exactly like a standalone product, enter the Bundle ID.
If your bundle ID is bundle5678, your ATC event should look like:

BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'bundle5678', 'sku' : ''});

Product Collection page with a unique ID, but 
cannot be purchased as a whole. Only individual products can be purchased

If your Product Collection has their own unique ID, but cannot be purchased as a whole; only the collections' individual parts can be purchased and each of these individual parts have their own ID, then call the ATC Event for each individual product added to the cart.
If your Product Collection Page has an Add all ATC button, an ATC event for each single product added to the cart needs to be fired.

Example 1:
Your collection ID is collection5678 and a user adds two individual products with product ID product1234 and product5678 in the cart, then two ATC events need to be fired. 

The ATC event for the first product should look like:

BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'product1234', 'sku' : ''}); 

The ATC event for the second product should look like:

BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'product5678', 'sku' : ''});


Example 2:
Your collection ID is collection5678 and by clicking an Add all ATC button, product1234 and product5678 are added to the cart. Two ATC events need to be fired from the Add all ATC button:

BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'product1234', 'sku' : ''});
BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'product5678', 'sku' : ''});

ATC on a Quick View

If your site has an ATC button on a Quick View pop-up for an individual product and the product ID is prod1234, your ATC event should look like:

BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'prod1234', 'sku' : ''});

Implementation Example

Scenario

Implementation Example

ATC handler in your HTML code

ATC Event Snippet to add into an HTML element

<a href="#" onClick="BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': '<Product ID>', 
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?