{"type":"doc","content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Learn more about ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://boxalino.atlassian.net/wiki/spaces/BPKB/pages/331644929"}},{"text":" ! ","type":"text"}]}]},{"type":"paragraph","content":[{"text":"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’.","type":"text"}]},{"type":"paragraph","content":[{"text":"In this document we provide the guidelines of how to integrate this HTML markup in your page in the typical use-cases.","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Sliders and list of clickable choices (tabs or variants)","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":926,"id":"9fcef9b5-93ea-47fd-9ec7-286779b38be1","collection":"contentId-854556679","type":"file","height":458}}]},{"type":"paragraph","content":[{"text":"Example of a slider of images from hauptner.ch","type":"text","marks":[{"type":"em"}]}]},{"type":"table","attrs":{"layout":"default","localId":"92fcc1f8-c116-43a6-9692-5ff9f8ad0804"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"HTML element ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"attribute","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"value","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"comments","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"container ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"class","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"bx-narrative","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"container ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-type*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[PAGE]|[PARAMETERS]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"must be simple names without any special character, like ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"pdp","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"home","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"container ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-name*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[COMPONENT]|[PARAMETERS]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"must be simple names without any special character, like ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"images","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"banners","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"container ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-field*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[unique page identifier like ‘sku’]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required ","type":"text"}]},{"type":"paragraph","content":[{"text":"attribute name of the field as described in data-bx-narrative-page-value","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"container ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-value*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[unique page identifier like ‘A86204101’]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required ","type":"text"}]},{"type":"paragraph","content":[{"text":"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)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"container ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-variant-uuid*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[unique identifier from other tracking]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"(optional) in case you have a unique display identifier to map to your own analytics tracking","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"container ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-group-by*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"id","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required","type":"text"},{"type":"hardBreak"},{"text":"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’","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"item(s)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"class","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"bx-narrative-item","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[157.0]},"content":[{"type":"paragraph","content":[{"text":"item(s)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-item-id*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[unique item identifier like ‘media/70/50/08/1654078585/12db0292cd7e43c88fc450e0c4cd900d.jpg’]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required","type":"text"},{"type":"hardBreak"},{"text":"a unique identifier providing the value for each element of the list matching the field defined in the container data-bx-narrative-group-by","type":"text"}]}]}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"* You are free to set the values you want, but we highly recommend to use, as much as possible, our ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://boxalino.atlassian.net/wiki/spaces/BPKB/pages/860028979"}},{"text":" ","type":"text"}]}]},{"type":"paragraph","content":[{"text":"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):","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Isolated clickable (and displayable) elements","type":"text"}]},{"type":"paragraph","content":[{"text":"This is for cases which are isolated visual elements (clickable or not) like a “add to wishlist” button or a copy article.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":470,"id":"62c7ec88-9bc9-4824-b698-fb037e31529e","collection":"contentId-854556679","type":"file","height":444}}]},{"type":"paragraph","content":[{"text":"Example of a product information and buttons from ","type":"text","marks":[{"type":"em"}]},{"type":"inlineCard","attrs":{"url":"http://hauptner.ch"}},{"text":" . 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.","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"8ba6aad0-34ec-4799-a78d-e58b28fdad20"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"attribute","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"value","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"comments","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"class","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"bx-narrative-item bx-narrative-root-item","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-type*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[PAGE]|[PARAMETERS]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"must be simple names without any special character, like ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"pdp","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"home","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-name*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[COMPONENT]|[PARAMETERS]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"the name of the front-end component (possibly with a section parameter to indicate the page section), like:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"image-slider|section=main-pdp-images","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"banners-slider-full-width|section=top-campaigns","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-field*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[unique page identifier like ‘sku’]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required ","type":"text"}]},{"type":"paragraph","content":[{"text":"attribute name of the field as described in data-bx-narrative-page-value","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-narrative-value*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[unique page identifier like ‘A86204101’]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required ","type":"text"}]},{"type":"paragraph","content":[{"text":"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)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-variant-uuid*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[unique identifier from other tracking]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"(optional) in case you have a unique display identifier to map to your own analytics tracking","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"data-bx-item-id*","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"[VALUE]|[PARAMETERS]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[189.0]},"content":[{"type":"paragraph","content":[{"text":"required","type":"text"},{"type":"hardBreak"},{"text":"a unique identifier providing information of the component’s value, like ‘orange|date=17.02.22’ for the delivery of the example","type":"text"}]}]}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"* You are free to set the values you want, but we highly recommend to use, as much as possible, our ","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://boxalino.atlassian.net/wiki/spaces/BPKB/pages/860028979"}},{"text":" ","type":"text"}]}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

\n...\n

--you could set 1 in case already in wishlist\n...\n

\n...\n

","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Long texts (with or without expand feature)","type":"text"}]},{"type":"paragraph","content":[{"text":"Same as isolated element (expand should trigger a click event).","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1120,"id":"5797e0e4-f2ff-4937-83b8-921273494c46","collection":"contentId-854556679","type":"file","height":581}}]},{"type":"paragraph","content":[{"text":"Example from zubischuhe.ch","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Overlays and side layers","type":"text"}]},{"type":"paragraph","content":[{"text":"Same as container or isolated element depending on what appears inside.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":440,"id":"32993d98-7daf-45f2-85d5-2a6063df6c7d","collection":"contentId-854556679","type":"file","height":347}}]},{"type":"paragraph","content":[{"text":"Example from PerfectHair.ch","type":"text"}]}],"version":1}

Browser not supported