What is Pulse?

Integration method recommended by Netcore Unbxd onboarding experts.

Netcore Unbxd Pulse is a JavaScript snippet added to your website to capture anonymous data on user interactions. This data is sent to our servers, where it fuels Unbxd’s AI models, enhancing your shoppers’ ability to find the products they’re looking for.

Pulse is engineered to function without impacting site performance. It operates efficiently, utilizing event listeners to track shopper activity without interfering with the browser’s event loop.

Why is Netcore Unbxd Pulse the preferred integration method?

How to integrate Netcore Unbxd Pulse?

Review prerequisites

Every event requires mandatory attributes to form its payload. Ensure these values are accessible in the page, DOM, or URL for sending the event. Additionally, specific HTML attributes may need to be added for each document or event type. Refer to the event payload section for detailed information.

Add the integration code

Add the following <script> tag at the end of your site’s HTML body.

<script
type="text/javascript"
defer
charset="utf-8"
src="https://libraries.unbxdapi.com/sdk-clients/PROD_SITEKEY/ua/ua.js">
</script>

The use of the defer attribute is to load the script in parallel with HTML parsing, ensuring the script executes only after the HTML is fully parsed. This improves the load performance of the page.

Validate payload data retrieval

Verify that Netcore Unbxd Pulse can retrieve event payload data from sources such as DOM, URL, or browser windows.

How to check if event payload data is retrieved?

Search event

The mandatory query payload is captured from the search input box, and the event is triggered when the shopper either presses the Enter key or clicks the search submit button.

In this reference markup, the query value is extracted by targeting the input value from the class selector.

Example markup of the universal search bar

<form id="searchQueryForm" method="method" action="/action">
  <input
    class="search-inputbox"
    id="searchInput"
    type="text"
    placeholder="find amazing products"
  />
  <button class="search-submit-button" id="searchBtn" type="submit">
    <i class="fas fa-search-icon"></i>
  </button>
</form>

Browse event

💡 You can skip this event if you’ve 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 accurate 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.

Example markup of the category page

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.

Example markup of the product listing page

<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

1. 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

Example markup of the product description page

<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>

Example markup of the 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>

Order event

The ownership of the Order event lies with the retailer. Details of successfully ordered products should be stored as a variable on the browser’s window, as demonstrated in the example below. Netcore Unbxd Pulse will retrieve this data from the window object and trigger the order event accordingly.

💡 The key names need to be maintained as shown in the example below given the ownership of the event will not be with Netcore Unbxd.

Example JSON of the order success page

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",
  },
];