RTI (Real-Time Injections)

Owned by Dana Negrescu
Last updated: Sept 30, 2024
4 min read

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.

 

BART_and_RTI_infosR5_RTI_detail.jpg

 

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:

  1. During the user engagement with the e-shop, pageView & scroll events are observed by the Boxalino Tracker https://boxalino.atlassian.net/wiki/spaces/BPKB/pages/8716641

  2. When the RTI module is enabled, the Tracker API is pushing injection content to the RTI module (similar to an API response object)

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

  1. Dynamically generated labels & descriptives about viewed content (ex: #1 in Category X, #7 from Weekly Best Buys, etc)

  2. Dynamically generated related content (ex: top X products, etc)

  3. Overlays

  4. 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:

  1. For production

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

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

  1. rti.init.js - initialization scripts for generic flows (ex: adding HTML tracking attributes on PDP/search/homepage/etc)

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

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

Development Practices

Web-Components

  1. Get familiar with concepts of Web Components

    1. Web Components - Web APIs | MDN

    2. Custom Elements v1 - Reusable Web Components  |  Articles  |  web.dev

  2. The HTML tag used for the component is dynamic (created by RTI)

  3. 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)