Introduction
Unlike other systems, the Boxalino tracker automatically leverages structured information related to the layout and the content of the page and identifies the key engagement behaviors of the user on the page (scrolling, clicks, etc.).
The tracking of the behavior of the user is automatically connected to the content of the request and the response of what appeared on the page (based on Boxalino Narrative (Layout) API).
So unlike other tracking mechanisms which force you to add almost more information in your tracking JavaScript to have more and more contextual information to use in your report, Boxalino doesn’t require it as each engagement event on the page is simply connected to a part of the layout of the page with a unique identifier. All the information about it is available in the request and response data directly available in the Boxalino Open Data Warehouse.
How does it work?
Each content returned by the Boxalino API is provided with HTML tagging attributes which provide unique identifiers for each part of the layout. These data are then simply exposed in the HTML as attributes and classes.
The Boxalino Trackers automatically detects when the HTML tags with these attributes and classes enter in the viewport (adapted to the screen and therefore device of the visitor) and if the user simply scrolls through or if there is a pause to look at the displayed content.
As each part of the layout has unique identifiers (the data-bx-variant-uuid for the container elements and the data-bx-item-id for the inner content elements), the tracker knows exactly what is currently being viewed by the user.
The Boxalino tracker sends top, bottom, left and right % information of the display, in case a part of the layout is only not fully visible (e.g.: from 0% on the top to 80% on the bottom).
Any click on the layout is automatically detected, as well as the special case of a click on an add-to-basket link.
For the add-to-basket click, make sure to add the following classes:
(optional) : bx-baskset-quantity, bx-basket-price, bx-basket-currency
Advanced cases
In addition to tracking the on-page user engagement (scrolls and clicks) on the layout, Boxalino will also capture structured information about the connection of related and nested dynamic and personalized content.
Tracking Related Content
In your layout, you might have a block which content is related to the content of another block.
For example, the products appearing next to a banner might be related to the currently selected banner (as in this example).
For such case, 4 additional attributes are returned automatically by the API:
data-bx-related-variant-uuid
data-bx-related-narrative-name
data-bx-related-narrative-group-by
data-bx-related-item-id
The tracker will automatically detect them in the HTML container and will track that the content events on within this container are related to the content of the other content.
Don’t worry, you don’t have to implement any special logic to manage this case. You only need to tag your HTML automatically with all the returned bx-attributes and the rest will happen automatically. We only provide this explanation here to document the advanced cases the Boxalino tracker manages automatically.
Tracking Nested Content
In your Layout, you might have a block of dynamic content which includes an inner block of dynamic content (and on forward on several depth levels), like in this example of the dynamic topics containing each a block of product recommendations.
In this case, much like in the other advanced case of related content, the tracker will also track the parent contents of each inner container are and add them to the tracked data.
Don’t worry, you don’t have to implement any special logic to manage this case. You only need to tag your HTML automatically with all the returned bx-attributes and the rest will happen automatically. We only provide this explanation here to document the advanced cases the Boxalino tracker manages automatically.
Can you integrate through the GTM (or other alternatives)?
As the Boxalino tracker behavior is quite complex and relies on many HTML attributes and classes to work automatically (see the advanced cases above), it is best to integrate the Boxalino tracker directly on your web-page.
The tracking is however very transparent and every event is sent directly to our tracking server with clear URLs as described in the Tracking URLs documentation. It is therefore technically possible (even if possibly quite complicated) to implement all the tracking events by yourself.
There are also many simple other events (see the section below) which can either be integrated directly or through such Tag Manager as described here.
Other events
The other events tracked by the Boxalino are very similar to the standard Google Analytics tracking:
The special case of Add-To-Basket
The Add-To-Basket is a special case as it is tracked automatically by the tracker when it is part of the Layout returned by Boxalino API (as in the section How does it work? above), but it can also occur on other parts of the web-site which are not a part of a Boxalino Narrative Layout.
For such cases, it is recommended to tag the add-to-basket with the same classes as described in the above section (bx-basket-add and others), as the Boxalino tracker will automatically detect it even if it is not part of a Boxalino Layout zone.
However, it is also possible to track it as part of the Other events with the event trackAddToBasket.
Doing it with this event over a tag manager will typically generate the add-to-basket event to be triggered sometimes twice (once through the GTM and once through the automated), therefore it is not recommended, however, it will not have any problematic effect as Boxalino automatically detects such duplicated cases in its data processing and can resolve it automatically in its analytics.
Tracking HTML markups
In order for the Boxalino API tracker to be able to identify the events and connect them to API response Layout elements - the HTML markups must be part of the HTML/user view.
The HTML markups are part of the Boxalino API response.
Every Layout Block has the bx-attributes with relevant information that should be displayed for the case:
the class property must be part of the CSS classes of the element
the other (data-bx-item-id, data-bx-variant-uuid, data-bx-variant-group-by, data-bx-narrative-name, data-bx-related-X, etc) are to be displayed as they are provided (key-value)
0 Comments