Example: initialize web client and execute Real-Time decision

Overview

This topic demonstrates how to initialize the client with a tag manager and include a function to capture double opt in information if it is provided as parameters on the URL.

Initialize web client with a function to call immediately after initialization

This is a code sample that can be used by the tag manager to insert onto all the pages on which tracking and decisions will occur.

The function "postInit()" is used to make multiple calls after the rpiWebClient is initialized. In the example configuration, it is setting the web form tracking and capturing the double opt in if a query string parameter with Message Intent(mint) has the values listed below.

Initialization and post initialization function call

JS

 <script type="text/javascript">
	  //Initalize the web client
      rpiWebClient.init({}, () => postInit());
   function postInit() {
    if (rpiWebClient && rpiWebClient.isInitialized) {
	
	  //Set form tracking in case a for is added to the page
      rpiWebClient._setFormTracking();
	  
	  //Check the URL parameters to determine if the parameter mint is related to double opt in and if so then generate a web event to capture the double opt in.  This process is expecting that the double opt in message is generated from a form submission fsid.
      const urlParams = new URLSearchParams(location.search);
      if (
        urlParams.get("mint") === "double_opt_in" ||
        urlParams.get("mint") === "double_opt_in-hipaa"
      ) {
        console.log("If mint equals: " + urlParams.get("mint"));
        //Submit Realtime Web Event for Double Opt In
        rpiWebClient.pushWebEvent(
          "Message_Intent",
          1,
          urlParams.get("mint"),
          null,
          [
            { Name: "SVID", Value: urlParams.get("svid") },
            { Name: "FSID", Value: urlParams.get("fsid") },
            { Name: "EMID", Value: urlParams.get("emid") },
          ]
        );
      }
    }
  }
  </script>

JavaScript to put on pages after client initialization

This is a code sample to place on a webpage that will execute a Real-Time decision once the WebClient is initialized.

When using this code on multiple pages, the renderPageSmartAssets function and the red section that is the layout/context path ([<context-path>]) need to be updated to the context path of the decision(s) you are looking to execute on that page.

Script to validate client initialization and execute Real-Time decision

JS

<script type="text/javascript">
	//This first section checks to see if the rpiWebClient is initalized and if not then it adds an event listener to wait for the rpiWebClient to initialize.  Once it is initialized it executes the function renderPageSmartAsset which will call the realtime decision based on the context provided in that function.
    if (window.rpiWebClient) {
        if (rpiWebClient.isInitialized) {
            renderPageSmartAssets();
        } else {
            window.addEventListener("rpiWebClientInit", function (event) {
                renderPageSmartAssets();
            });
        }
    } else {
        window.addEventListener("rpiWebClientLoad", function (event) {
            if (rpiWebClient.isInitialized) {
                renderPageSmartAssets();
            } else {
                window.addEventListener("rpiWebClientInit", function (event) {
                    renderPageSmartAssets();
                });
            }
        });
    }

//This function is called after the rpiWebClient is initialized, and it will execute a realtime decision based on the context path that is provided.  The context path is defined in RPI
function renderPageSmartAssets() {
    rpiWebClient.renderContextDecisions(["<context-path>"]);
}