The Real-Time Injections (RTI) module directly pushes timely and dynamic content, including personalized experiences or A/B tests, to the client's front-end (browser client), ensuring immediate and relevant content adaptation based on real-time interactions.

1 How it works
2 Injection Use-Cases
3 Integration
- 3.1 Deployment
- 3.2 Development & Testing
  - 3.2.1 Injection Definition
    - 3.2.1.1 selector
    - 3.2.1.2 template
      - 3.2.1.2.1 inline element
      - 3.2.1.2.2 web-component element
- 3.3 Development Practices
  - 3.3.1 Web-Components

How it works

The following sequence diagram illustrates the Real-Time Injections (RTI) process, beginning with the client activating the Boxalino Tracker and RTI library. The Boxalino Tracker is responsible for tracking page views and scroll events on the client side. When a custom event needs to be sent to RTI, the client communicates with the Boxalino Tracker to handle such cases. The RTI Module maintains a long connection with the Real-Time Platform, which, upon determining the appropriate action, pushes selector and template changes or a JavaScript callback with a JSON object back to the RTI Module. The RTI Module then implements these changes on the client side, dynamically altering content or behavior. Finally, the client tracks interactions with these newly injected elements, feeding this data back to the Boxalino Tracker to complete the cycle of real-time content personalization and optimization.

Real-Time Injections (RTI) Process Simplified (2).png

Steps:

During the user engagement with the e-shop, pageView & scroll events are observed by the Boxalino Tracker JS Tracker API
When the RTI module is enabled, the Tracker API is pushing injection content to the RTI module (similar to an API response object)
The RTI module is able to render the content and display it on the e-shop, based on the configured use-cases.

Injection Use-Cases

Dynamically generated labels & descriptives about viewed content (ex: #1 in Category X, #7 from Weekly Best Buys, etc)
Dynamically generated related content (ex: top X products, etc)
Overlays
Click-driven modal windows

The components are developed by the clients` integration team. RTI is providing helping structures that encapsulates Boxalino-specific HTML tags.

Integration

Deployment

After the preparation of the business use-cases, the following script must be included on the project:

For production

<script async src="//bx-cdn.com/static/rti.min.js"></script>

For testing/stage servers

<script async src="//r-st.bx-cloud.com/static/rti.min.js"></script>

Any resource required for the injection is loaded on run-time.

The RTI script is dependent on the tracking scipt bav2.min.js.
The account name must be available before rti.min.js is added to the page:

<script type="text/javascript">
   window._bxq = window._bxq || [];
   function bxq(arguments) { _bxq.push(arguments); }
   bxq(['setAccount', "account>"]);
</script>
<script async src="//bx-cdn.com/static/bav2.min.js"></script>
<script async src="//bx-cdn.com/static/rti.min.js"></script>

When the script is added on the page, the following additional resources are being requested:

rti.init.js - initialization scripts for generic flows (ex: adding HTML tracking attributes on PDP/search/homepage/etc)
rti.json - default injections (also used as fallback)

Development & Testing

Injection Definition

The injection is defined by a selector and a template.

selector

The selector property is declaring where and how is the element to be injected.

value is the CSS Selector https://www.w3schools.com/cssref/css_selectors.php
mode is the injection location (beforebegin, afterbegin, beforeend, afterend, replace )

template

The template property is declaring what component (inline, web-component, flutter) is managing the display.

inline element

type is the renderer (inline for HTML source)
value is the HTML template. Use ${<property>.<key} to access data from the API response provided to RTI
class is a dynamic class to be added on the parent element (ex: for dynamic styling with same template)

web-component element

type is the renderer ( web-component for a Web-Component element) https://developer.mozilla.org/en-US/docs/Web/API/Web_components | https://blog.openreplay.com/an-introduction-to-native-web-components/
value is the class of the Web-Component element name (ex: RtiLabel)
source indicates if it`s a Boxalino-owned component (rti), client-specific (client)
- (tbd) local for elements already available in clients` project
class is a dynamic class to be added on the parent element (ex: for dynamic styling for the same component)

Development Practices

Web-Components

Get familiar with concepts of Web Components
1. https://developer.mozilla.org/en-US/docs/Web/API/Web_components
2. https://web.dev/custom-elements-v1
The HTML tag used for the component is dynamic (created by RTI)
We recommend to extend from the base Web Component: RtiBase (https://storage.googleapis.com/rtux-rtux-data-integration-rti/component/RtiBase.js).
1. add the HTML tracking elements from the RTI response (getJsMarkup)
2. create dynamic HTML tags for the children web-components (getRtiElementId)
3. adds extra resources (js/css) for the web-component shadow root (registerAssets)

Boxalino Public Knowledge Base

RTI (Real-Time Injections)