Add-to-cart (ATC) Pixel
What are ATC Pixels
Add-to-cart Pixel is implemented on all “Add to Cart” buttons on your site. Any time a user adds an item to their cart, Bloomreach's Add To Cart Event should fire.
Typically they are on the product display pages, 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 Collection pages), implement this tag there as well.
How to Implement ATC Pixels
Follow the steps below:
- Copy & paste the ATC Event Tracking Snippet inside all your ATC buttons to install the Pixel.
- Configure the ATC Pixel Variables in the ATC Event Tracking Snippet. Check the implementation scenarios for examples.
ATC Pixels Variables Checklist
Listed below are the tracking variables required specifically for ATC Event Pixels.
Required Variables
| Variable | Value type, Example | Description |
|---|---|---|
| acct_id | String, “1235” | The Bloomreach-provided Account identifier. Value must be consistent with the account_id value passed in API call. |
| prod_id | String (case sensitive), “prod1234” | The unique product ID, which describes a product, product bundle, product collection or SKU set. |
| group | String, “cart” | This specifies the event grouping. Allowed values: suggest, cart, product, widget |
| etype | String, “click” | Specifies the event’s action type. Allowed values: click, click-add, quickview, submit |
Optional Variables
| Variable | Value type, Example | Description |
|---|---|---|
| user_id | String, “61WwurfPU9f9dB5” | If you track users via a universal customer ID, populate this parameter with that ID. This should be an anonymized string and not any PII. |
| prod_name | String, “Men’s Fleece Jacket” | The name of the product being viewed or added to the cart. |
| sku | String, “sku7778” | Unique sku ID representing the selected variant of this product (e.g., size M, color blue of a t-shirt). This must match the SKU ID field in the feed. |
| prod_collection_id | String, “collection5678” | The unique ID of a Product Collection. This needs to be passed when the relevant Event occurs from a Product Collection page. |
Conditional variables - based on your implementation
| Variable | Value type, Example | Description |
|---|---|---|
| view_id | String (Case sensitive), “10200” | The name of the product catalog view that would be searched against on the page where the event occurred. It identifies the catalog view to show when one Bloomreach account ID hosts multiple site versions. |
| domain_key | String (Case sensitive), “bloomreach_fr” | The Bloomreach-provided ID of the domain receiving the request. Set Domain Key to the name of the product catalog that would be searched against on the page where the event occurred. |
| title | String, “Best Sellers” | This is the title of the current page or screen name of the app view. |
| ref | String, “https://www.homeoasis.com/category/mens-clothes" | This is the URL from the referrer screen. For a native mobile app, “ref” follows a synthetic structure that is used for identifying the content within the app rather than actual navigable URLs. |
For a full list of required and optional variables, see Pixel Reference
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'});
| Scenario | Examples |
| 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' : ''});
| Scenario | Examples |
|---|---|
| ATC on a Product Collection page with a unique collection ID | If your Product Collection page has their own unique ID and is sold exactly like a standalone product, enter the collection ID. - Set prod_id to the Product Collection ID to specify the id of the product added to cart. - Set prod_collection_id to the Product Collection ID to indicate that the product added to cart is part of the Product Collection. If your collection ID is collection5678, your ATC event should look like: |
BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'collection5678', 'sku': '', 'prod_collection_id': 'collection5678'});
| Scenario | Examples |
| 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' : ''});
If you sell Collections, you can implement the pixel in several different ways. The table below outlines multiple scenarios and the pixel requirements for each.
| Scenario | Examples |
|---|---|
| Product Collections have their own unique ID and are sold exactly like standalone products | Set prod_id to the Product Collection ID to specify the id of the product added to cart. Set prod_collection_id to the Product Collection ID to indicate that the product added to cart is part of the Product Collection. If your collection ID is collection5678, your ATC event should look like: |
BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'collection5678', 'sku': '', 'prod_collection_id': 'collection5678'});
| Scenario | Examples |
|---|---|
| Product Collections have their own unique ID, but cannot be purchased as a whole. Only individual products can be purchased | 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. In each ATC pixel:
|
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': '', 'prod_collection_id': 'collection5678'});
The ATC event for the second product should look like:
BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'product5678', 'sku': '', 'prod_collection_id': 'collection5678'});
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': '', 'prod_collection_id': 'collection5678'});
BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'product5678', 'sku': '', 'prod_collection_id': 'collection5678'});
Alternatively, fire a single ATC event with a comma-separated list of product IDs:
BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'product1234,product5678', 'sku': '', 'prod_collection_id': 'collection5678'});
| Scenario | Examples |
|---|---|
| A product that is part of a Product Collection but is added to cart from its own individual Product Detail Page. | Set prod_id to the id of the product added to cart. Do not include the prod_collection_id variable. If your product ID is product1234, your ATC event should look like: |
BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': 'product1234', '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>', 'sku' : '<Sku ID>'})>
Tracking Snippet for ATC Pixel
JavaScript Implementation
BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': '<Product ID>', 'sku' : '<Sku ID>'});
Non-JavaScript Implementation
To integrate Bloomreach Pixels in a Non-JS Environment, you can choose one of the following options:
ATC Event from a Product Screen
https://p.brsrvr.com/pix.gif?
&acct_id=6702
&cookie2=uid%3D1e7724c751a3f6e6241018d150144832e7528383%3Av%3Dapp%3Ats%3D0%3Ahc%3D1
&rand=86838131966165760
&type=event
&title=Blue%20Lace%20Dress
&url=http%3A%2F%2Fmerchantname.app%2Fproduct%2Fblue%2520lace%2520dress
&ref=http%3A%2F%2Fmerchantname.app%2Fcategory%2Fdresses
&group=cart
&etype=click-add
&ptype=product
&prod_id=prod1234
&prod_name=Blue%20Lace%20Dress
&sku=123-45
ATC Event from a Category Screen
https://p.brsrvr.com/pix.gif?
acct_id=6702
&cookie2=uid%3D1e7724c751a3f6e6241018d150144832e7528383%3Av%3Dapp%3Ats%3D0%3Ahc%3D1
&rand=86838131966165760
&type=event
&title=Dresses
&url=http%3A%2F%2Fmerchantname.app%2Fcategory%2Fdresses
&ref=http%3A%2F%2Fmerchantname.app%2Fhomepage
&group=cart
&etype=click-add
&ptype=category
&prod_id=prod1234
&prod_name=Blue%20Lace%20Dress
&sku=123-45
&cat=home%7Cdresses
&cat_id=dresses
Validate Pixel Implementation
Once Pixel implementation is complete, use the Pixel Validator Chrome Plug-in to validate if the ATC Event Pixel is working as expected. Follow the scenarios listed in the Test Scenarios - Search guide.
Troubleshooting
Refer to the following help articles to troubleshoot issues related to the Add-to-cart Event Pixel:
- Missing Product ID in the Add to Cart Event
- Missing SKU ID in the Add to Cart Event
- Percentage of Conversion Product IDs is not Seen in the Add to Cart
- Percent of Add to Cart prod_id is not Visible in the Product View Page
Monitor and Manage Pixel Data
For long-term monitoring, use Pixel Monitor to get more detailed trend lines and set pixel error alerts. We recommend that you subscribe to pixel alerts.
Updated 6 months ago