RESOURCE CENTERRTI DOCUMENTATION

This page is a dedicated section of our RTI documentation to get step by step help for using the Single Page Application Implementation(s)

Single Page Application Implementation

In standard RTI implementation, the baynote.js script that runs RTI on store webpages is provided in the footer. This script loads Kibo’s RTI API and fires listener2 events to record user actions and trigger additional behaviors (events such as visit, impression, entity update, linger, etc).

However, if the webpage is loaded with a single page framework implementation, then the DOM doesn’t reload when a link on the page is clicked. Therefore, those events that are dependent on baynote.js are not fired automatically. In this case, additional work is required to support these events.

First, additional code will have to be added to the page scripts to support visit events. Once this is in place, the steps to perform updates based on onClick events should be added to the page.

Visit Event Scripting

A “visit” is the event that marks when a user lands on the webpage. This is a two-step process that can be enabled in a single page application through one of two ways:

  • Kibo adds the below function to the custom script that is hosted and updated by Kibo (custom-script.js)
  • The client manually performs the same calls as the below function on their end

The code is listed below, but if the first approach is being used then it is irrelevant to the client – the custom script is managed by Kibo, so it does not need to be added anywhere else. Only the second approach requires the client to implement any of their own code based on this reference.

function bnVisitOccurred(document, referrer) {
	var d = document;
	if (!BaynoteAPI.isNotEmpty(d)){
		console.log("document URL cannot be empty");
		return false;
	}
	var r = referrer;
	if (!BaynoteAPI.isNotEmpty(r)){
		console.log("referrer URL cannot be empty");
		return false;
	}
	var ev = bnObserver.makeEvent("v");
	ev.d = d;
	ev.r = r;
	bnObserver.sendEvent(bnCommon.valueToJSON(ev));
}

Page Updating

When the user clicks a link, a sequence of events should be followed in order to update the DOM and reload RTI functionality. First, the document.referrer value must be set as it does not automatically change on click.

var r = location.href;

When the user clicks on a link, the click event happens normally, the URL changes, and the next page loads. After the click occurs, set the referrer for bnObserver.

bnObserver.myTag.referrer = r;

Then, identify the new document URL.

var d = location.href;
bnObserver.url = location.href;

Fire a visit event.

bnVisitOccurred(d, r);

Fire an impression event. Note that if there are no tracking tags on the page, then this will have no effect.

bnObserver.impressionOccurred();

If the user stays on the page for 30 seconds (or, more specifically, for bnPolicy.get(“baynoteObserver”,”dt”) seconds), fire a linger event.

bnObserver.lingerOccurred(bnPolicy.get("baynoteObserver","dt"));

Repeat this sequence each time a link is clicked.