HTML markup requirements without Narrative API Response

The Winning Interactions JS Tracker can capture impressions and clicks on any page and react-to it in a personalized engaging way in real-time.

Learn more about How Boxalino tracks structured data automatically !

You can achieve that by sending custom events in JavaScript to Boxalino, but there is a much easier way simply tagging your HTML markup with the ‘bx-attributes’.

In this document we provide the guidelines of how to integrate this HTML markup in your page in the typical use-cases.

The following use-cases are concerning only pages or zones of pages which are not covered by a Boxalino Narrative API response as, in such case, the bx-attributes will be automatically provided as part of the JSON response.

Sliders and list of clickable choices (tabs or variants)

This is for cases like a slider of images on a PDP, or a list of product variant from which the user can select one. It must not be that the user can click on the individual elements of the list (could be a list of logos which are not clickable) but it needs to be a clear list of visual element that belong together.

Example of a slider of images from hauptner.ch

HTML element	attribute	value	comments

HTML element	attribute	value	comments
container	class	bx-narrative	required
container	data-bx-narrative-type*	[PAGE]\|[PARAMETERS]	must be simple names without any special character, like pdp home
container	data-bx-narrative-name*	[COMPONENT]\|[PARAMETERS]	must be simple names without any special character, like images banners
container	data-bx-narrative-field*	[unique page identifier like ‘sku’]	required attribute name of the field as described in data-bx-narrative-page-value
container	data-bx-narrative-value*	[unique page identifier like ‘A86204101’]	required identifier of the page, for example for a pdp, you can put the product identifier (in other cases, you can put the full page path)
container	data-bx-variant-uuid*	[unique identifier from other tracking]	(optional) in case you have a unique display identifier to map to your own analytics tracking
container	data-bx-narrative-group-by*	id	required normaly, ‘id’ should be the value, unless you want to indicated that the item id value (below) is related to a specific field, like ‘src’ or ‘products_group_id’
item(s)	class	bx-narrative-item	required
item(s)	data-bx-item-id*	[unique item identifier like ‘media/70/50/08/1654078585/12db0292cd7e43c88fc450e0c4cd900d.jpg’]	required a unique identifier providing the value for each element of the list matching the field defined in the container data-bx-narrative-group-by

* You are free to set the values you want, but we highly recommend to use, as much as possible, our Best-Practice Pages, Components, Types, Names & Values for Tracking

Example as in the picture above, we have actually 2 containers, one for the thumbnails on the left and one for the actual image slider (first example includes the clickable left and right arrows of a slider):

<div class="bx-narrative" data-bx-narrative-type="pdp"
  data-bx-narrative-name="thumbnails" data-bx-narrative-field="sku"
  data-bx-narrative-value="A86204101" data-bx-narrative-group-by="src">
  <div class="bx-narrative-item bx-narrative-button" data-bx-item-id="arrow|dir=left" />
  <div>
    <div class="bx-narrative-item" data-bx-item-id="media/image1.jpg" />
    <div class="bx-narrative-item" data-bx-item-id="media/image2.jpg" />
  </div>
  <div class="bx-narrative-item bx-narrative-button" data-bx-item-id="arrow|dir=right" />
</div>
<div class="bx-narrative" data-bx-narrative-type="pdp"
  data-bx-narrative-name="images" data-bx-narrative-field="sku"
  data-bx-narrative-value="A86204101" data-bx-narrative-group-by="src">
  <div class="bx-narrative-item" data-bx-item-id="media/image1.jpg" />
  <div class="bx-narrative-item" data-bx-item-id="media/image2.jpg" />
</div>

Isolated clickable (and displayable) elements

This is for cases which are isolated visual elements (clickable or not) like a “add to wishlist” button or a copy article.

Example of a product information and buttons from http://hauptner.ch . In such a case the variants 300 l and 400 l are not isolated, they should be in a container (see prior use-case), but all the other elements are : price, delivery, cargo, qty selector, add to wish list and artickle nr with copy.

attribute	value	comments

attribute	value	comments
class	bx-narrative-item bx-narrative-root-item	required
data-bx-narrative-type*	[PAGE]\|[PARAMETERS]	must be simple names without any special character, like pdp home
data-bx-narrative-name*	[COMPONENT]\|[PARAMETERS]	the name of the front-end component (possibly with a section parameter to indicate the page section), like: image-slider\|section=main-pdp-images banners-slider-full-width\|section=top-campaigns
data-bx-narrative-field*	[unique page identifier like ‘sku’]	required attribute name of the field as described in data-bx-narrative-page-value
data-bx-narrative-value*	[unique page identifier like ‘A86204101’]	required identifier of the page, for example for a pdp, you can put the product identifier (in other cases, you can put the full page path)
data-bx-variant-uuid*	[unique identifier from other tracking]	(optional) in case you have a unique display identifier to map to your own analytics tracking
data-bx-item-id*	[VALUE]\|[PARAMETERS]	required a unique identifier providing information of the component’s value, like ‘orange\|date=17.02.22’ for the delivery of the example

Example as in the picture above, we have actually 2 containers, one for the thumbnails on the left and one for the actual image slider:

<div class="bx-narrative-item bx-narrative-root-item" data-bx-narrative-type="pdp"
  data-bx-narrative-name="price" data-bx-narrative-field="sku"
  data-bx-narrative-value="A86204101"
  data-bx-item-id="standard|price=6290.00">
...
</div>
<div class="bx-narrative-item bx-narrative-root-item" data-bx-narrative-type="pdp"
  data-bx-narrative-name="delivery" data-bx-narrative-field="sku"
  data-bx-narrative-value="A86204101"
  data-bx-item-id="orange|date=17.02.22">
...
</div>
<div class="bx-narrative-item bx-narrative-root-item" data-bx-narrative-type="pdp"
  data-bx-narrative-name="deliverytype" data-bx-narrative-field="sku"
  data-bx-narrative-value="A86204101"
  data-bx-item-id="cargo|active=true">
...
</div>
<div class="bx-narrative-item bx-narrative-root-item" data-bx-narrative-type="pdp"
  data-bx-narrative-name="qty" data-bx-narrative-field="sku"
  data-bx-narrative-value="A86204101"
  data-bx-item-id="selector|value=1">
...
</div><div class="bx-narrative-item bx-narrative-root-item"data-bx-narrative-type="pdp"
  data-bx-narrative-name="action" data-bx-narrative-field="sku"
  data-bx-narrative-value="A86204101"
  data-bx-item-id="wishlist|value=0"> --you could set 1 in case already in wishlist
...
</div></div><div class="bx-narrative-item bx-narrative-root-item" data-bx-narrative-type="pdp"
  data-bx-narrative-name="articlenr" data-bx-narrative-field="sku"
  data-bx-narrative-value="A86204101"
  data-bx-item-id="copy|value=A86204101">
...
</div>

Long texts (with or without expand feature)

Same as isolated element (expand should trigger a click event).

Example from zubischuhe.ch

Overlays and side layers

Same as container or isolated element depending on what appears inside.

Example from PerfectHair.ch