/
RTI (Real-Time Injections)

RTI (Real-Time Injections)

Owned by Dana Negrescu
Last updated: Sept 30, 2024

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 JS Tracker API

  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

Boxalino is preparing a developer`s codespace/sandbox to facilitate designing, testing and deploying the components. The release is expected by the end of November 2023. The steps presented bellow are in conformity with the codespace`s integration flow.

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.

"selector": [ { "value": ".col-lg-5.product-detail-buy", "mode": "beforeend" } ]

  • value is the CSS Selector W3Schools.com

  • 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
"template": [ { "type": "inline", "value": "<div class=\"rti\"><div class=\"category\">${label.value}</div></div>", "class": "" } ]

  • 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
"template": [ { "type": "web-component", "value": "RtiLabel", "source": "rti|client", "class": "" } ]

In the Boxalino scope, the client has access to it`s own privately-owned Google Cloud Storage bucket, with a specific CORS-policy for public access.

The purpose is to store all elements created for RTI.

When working with web-component or flutter sources, the elements are accessed from GCS (when source is rti or client).

For example, the RTI will load the modules defined for value (ex: RtiLabel) from the Boxalino`s public GCS (ex: component for RtiLabel) when source : rti .

When the integrator prepares their own specific/custom web-components - they can decide to either make them available in their GCS bucket (source: client) or (tbd) include them in their e-shop (source: local)

Development Practices

Web-Components

  1. Get familiar with concepts of Web Components

    1. Web Components - Web APIs | MDN

    2. https://web.dev/custom-elements-v1

  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)

 

The documentation is updated as integrations with RTI progress.