{"type":"doc","content":[{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Real-Time Injections (RTI)","type":"text","marks":[{"type":"strong"}]},{"text":" 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.","type":"text"}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":4171,"alt":"BART_and_RTI_infosR5_RTI_detail.jpg","id":"f8a5f538-b27a-4ece-9bf3-ac62159224d9","collection":"contentId-926023683","type":"file","height":2584}}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"4a5d530a-a32d-4fec-bc47-1fdbeb2d732a"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"a6094cfa-7b3f-46a1-89ee-b31af6f625e7"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"How it works","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1313,"alt":"Real-Time Injections (RTI) Process Simplified (2).png","id":"b08770dd-dbe4-4eb3-83bc-8c5023996e67","collection":"contentId-926023683","type":"file","height":821}}]},{"type":"paragraph","content":[{"text":"Steps:","type":"text","marks":[{"type":"strong"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"During the user engagement with the e-shop, ","type":"text"},{"text":"pageView & scroll events ","type":"text","marks":[{"type":"em"}]},{"text":"are observed by the Boxalino Tracker ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://boxalino.atlassian.net/wiki/spaces/BPKB/pages/8716641"}},{"text":" ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When the RTI module is enabled, the Tracker API is pushing ","type":"text"},{"text":"injection content","type":"text","marks":[{"type":"em"}]},{"text":" to the RTI module (similar to an API response object)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The RTI module is able to render the content and display it on the e-shop, based on the configured use-cases.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Injection Use-Cases","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Dynamically generated labels & descriptives about viewed content (ex: #1 in Category X, #7 from Weekly Best Buys, etc)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Dynamically generated related content (ex: top X products, etc)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Overlays","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click-driven modal windows","type":"text"}]}]}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"The components are developed by the clients` integration team. RTI is providing helping structures that encapsulates Boxalino-specific HTML tags.","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Integration","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Deployment","type":"text"}]},{"type":"paragraph","content":[{"text":"After the preparation of the business use-cases, the following script must be included on the project:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For production","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"codeBlock","content":[{"text":" ","type":"text"}]},{"type":"orderedList","attrs":{"order":2},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For testing/stage servers","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"codeBlock","content":[{"text":" ","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Any resource required for the injection is loaded on run-time. ","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"error"},"content":[{"type":"paragraph","content":[{"text":"The RTI script is dependent on the ","type":"text"},{"text":"tracking scipt bav2.min.js","type":"text","marks":[{"type":"strong"}]},{"text":". ","type":"text"},{"type":"hardBreak"},{"text":"The account name must be available before rti.min.js is added to the page:","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n\n","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"When the script is added on the page, the following additional resources are being requested:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"rti.init.js","type":"text","marks":[{"type":"code"}]},{"text":" - initialization scripts for generic flows (ex: adding HTML tracking attributes on PDP/search/homepage/etc)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"rti.json","type":"text","marks":[{"type":"code"}]},{"text":" - default injections (also used as fallback)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Development & Testing","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Injection Definition","type":"text"}]},{"type":"paragraph","content":[{"text":"The injection is defined by ","type":"text"},{"text":"a selector","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"a template","type":"text","marks":[{"type":"em"}]},{"text":". ","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"selector","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"selector","type":"text","marks":[{"type":"code"}]},{"text":" property is declaring ","type":"text"},{"text":"where and how","type":"text","marks":[{"type":"strong"}]},{"text":" is the element to be injected.","type":"text"}]},{"type":"codeBlock","content":[{"text":"\"selector\": [\n {\n \"value\": \".col-lg-5.product-detail-buy\",\n \"mode\": \"beforeend\"\n }\n]","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"value","type":"text","marks":[{"type":"code"}]},{"text":" is the CSS Selector ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/cssref/css_selectors.php"}},{"text":" ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mode","type":"text","marks":[{"type":"code"}]},{"text":" is the injection location (","type":"text"},{"text":"beforebegin","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"afterbegin","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"beforeend","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"afterend","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"replace","type":"text","marks":[{"type":"code"}]},{"text":" )","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"template","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"template","type":"text","marks":[{"type":"code"}]},{"text":" property is declaring ","type":"text"},{"text":"what component (inline, web-component, flutter)","type":"text","marks":[{"type":"strong"}]},{"text":" is managing the display.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"inline","type":"text","marks":[{"type":"em"}]},{"text":" element","type":"text"}]},{"type":"codeBlock","content":[{"text":"\"template\": [\n {\n \"type\": \"inline\",\n \"value\": \"

${label.value}

\",\n \"class\": \"\"\n }\n]","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"type","type":"text","marks":[{"type":"code"}]},{"text":" is the renderer (","type":"text"},{"text":"inline","type":"text","marks":[{"type":"code"}]},{"text":" for HTML source)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"value","type":"text","marks":[{"type":"code"}]},{"text":" is the HTML template. Use ","type":"text"},{"text":"${.

Browser not supported