This section outlines how to track key shopper interactions on your site using Pulse events, including category page views, product clicks, cart updates, and order completions. These events help capture critical user behavior signals that power Unbxd’s analytics, search relevance, and recommendation models.

You can skip this event if you have NOT purchased Netcore Unbxd Browse.

The mandatory page and pageType payloads should be triggered on all category pages.

Activating the categoryPage event relies on the configuration of category fields in your feed and the method used to request the category API. To enable this event, make sure the UnbxdAnalyticsConf object is properly set on the window with correct page and page_type values.

In this reference markup, the page and page_type values are extracted by targeting the UnbxdAnalyticsConf object from the window.

window.UnbxdAnalyticsConf = window.UnbxdAnalyticsConf || {};
window.UnbxdAnalyticsConf["page"] =
  "{{categoryPath used for category api call (value of 'p' parameter)}}";
window.UnbxdAnalyticsConf["page_type"] = "BOOLEAN";

Click Event

The mandatory pid payload is captured from the product element of the Products Listing Page, and the click event is triggered when the shopper clicks on the product.

Key points:

The pid can be obtained from an HTML attribute or a URL, such as the img_url or href on the product card.
If the unique ID for the product has not been added to the product element, refer to the Netcore Unbxd Search API response to pass it.

<div class="search-results-grid" pageType="search">
  <div class="search-result" data-item-id="371823">
    <a href="https://www.example.com/product/productname">
      <img src="https://www.example.com/images/productname.png" />
      <span>Organic Honeycrisp Apple</span>
    </a>
  </div>
  <div class="search-result" data-item-id="371811">
    <a href="https://www.example.com/product/productname">
      <img src="https://www.example.com/images/productname.png" />
      <span>Organic Banana</span>
    </a>
  </div>
</div>

Cart Event

Quick view/Product details page

The mandatory pid and variantid (if your catalog contains product variants) payloads are captured from the DOM or from a URL, such as the browser URL, img_url, or href in the product details section. The event is triggered when the respective CTA button is clicked.

Example browser URL: https://www.example.com/product/product_107440/107440_green?sale=clearance

<div class="pdp-page" id="quickLook">
  <div
    class="product-details"
    data-item-id="107440"
    data-variant-id="107440_green"
  >
    <div class="hero-img">
      <img
        src="https://www.example.com/images/product_107440/107440_green.png"
      />
    </div>
    <div id="productInfo">
      <h3>Fresh Blackberry Holland 125 gm</h3>
      <input type="number" class="qty-inputbox" />
      <span class="price">$10.99</span>
      <button class="add-to-wishlist" type="button"></button>
      <button class="add-to-cart" type="button"></button>
    </div>
  </div>
</div>

Cart dropdown/Cart page

<div class="cart-list-grid">
  <div class="cart-item" data-item-id="107440">
    <a href="https://www.example.com/product/product_107440">
      <img src="https://www.example.com/images/product_107440.png" />
    </a>
    <div id="productInfo">
      <h3>Fresh Blackberry Holland 125 gm</h3>
      <span class="qty">2</span>
      <span class="price">$10.99</span>
      <div class="qty-wrap">
        <span class="quantity-increase"> + </span>
        <input type="text" class="quantity-value" />
        <span class="quantity-decrease"> - </span>
      </div>
    </div>
  </div>

  <div class="cart-item" data-item-id="245102">
    <a href="https://www.example.com/product/product_245102">
      <img src="https://www.example.com/images/product_245102.png" />
    </a>
    <div id="productInfo">
      <h3>Fresh Orange Navel Box</h3>
      <span class="qty">1</span>
      <span class="price">$20.99</span>
      <div class="qty-wrap">
        <span class="quantity-increase"> + </span>
        <input type="text" class="quantity-value" />
        <span class="quantity-decrease"> - </span>
      </div>
    </div>
  </div>
</div>

window.unbxdOrderData = [
  {
    pid: "107440", // Required - Product ID
    variantId: "107440_01", // Required only if your catalog has variants
    qty: "1",
    price: "29.99",
  },
  {
    pid: "245102", // Required - Product ID
    variantId: "245102_red", // Required only if your catalog has variants
    qty: "2",
    price: "10.99",
  },
];

Order Event

It should ideally be tracked on the order-success page. The script below demonstrates how to use the Unbxd.trackMultiple analytics API, which allows one or more products to be passed into the payload to trigger the event.

Payload Details

Attribute Name	Datatype	Value to Pass
`pid`	`string`	Unique ID for the product, to be taken from the Search API response.
`variantId`	`string`	Variant ID of the selected product variant.
`qty`	`string`	Quantity being added by the user.
`price`	`string`	Unit price of the product.

Refer to the following code snippet.

 <script type="text/javascript">
       var payload = [
       {
           pid: '{{uniqueId-of-the-product}}',
           variantId: '{{variantId-of-selected-variant}}',
           qty: '{{quantity-selected}}',
           price: '{{unit-price-for-product}}'
       },
       {
           pid: '{{uniqueId-of-the-product}}',
           variantId: '{{variantId-of-selected-variant}}',
           qty: '{{quantity-selected}}',
           price: '{{unit-price-for-product}}'
       }]


       if(Unbxd && typeof Unbxd.track === 'function') {
           Unbxd.trackMultiple('order', payload)
       } else {
           console.error('Pulse SDK is missing or initialized out of sequence; ensure it is fully loaded before using it.')
       }
   </script>