Single Page Applications (SPA) function differently from normal websites in that the <head> section of the page is not reloaded when a web visitor navigates to another page within the site. The only element that changes is the <body> of the page.
Below you will find what can be done for a SPA to ensure the OneTrust banner functions correctly.
Note
Both scripts below should come after the OneTrust Banner Script Main Tag.
Cookie Banner and Preference Center
By default, the Cookie Banner will load on first page visit. However, if the visitor changes pages within the website the <body> is updated, but your main script is not called again. This means your banner will not reappear on the page.
You can use the function reloadOTBanner(), which is generated by the script below to force the banner to be reloaded on the page. This function should be called within the body of any page change within the SPA. This function uses public methods from the OneTrust Banner Script to reinitialize the SDK and reload the banner.
<script>
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) {
return true;
}
}
function reloadOTBanner() {
var otConsentSdk = document.getElementById("onetrust-consent-sdk");
if (otConsentSdk) {
otConsentSdk.remove();
}
if (window.OneTrust != null) {
OneTrust.Init();
setTimeout(function() {
OneTrust.LoadBanner();
var toggleDisplay = document.getElementsByClassName(
"ot-sdk-show-settings"
);
for (var i = 0; i < toggleDisplay.length; i++) {
toggleDisplay[i].onclick = function(event) {
event.stopImmediatePropagation();
window.OneTrust.ToggleInfoDisplay();
};
}
}, 1000);
}
}
</script>
When publishing the OneTrust script, enable the setting Enable Single Page Application Support. This setting allows you to force the banner to reload as it would on an actual page change.
For more information on publishing scripts, see Publishing and Implementing Cookie Consent Scripts.
If the script below is not implemented on your page, there is a chance the Cookie Policy may appear duplicated on the page. In order to prevent this, you need to call the function clearDup() only on the page featuring their Cookie Policy or Cookie List. For the Cookie Policy page, both clearDup() and reloadOTBanner() will be called when the page is loaded.
<script>
//SHOULD BE USED ONLY ON COOKIE POLICY. TRIGGER FUNCTION BELOW TO REMOVE DUPLICATE CATEGORIES
function clearDup() {
var sec = document.getElementById("ot-sdk-cookie-policy")
var tally = [];
for (var i = sec.length - 1; i >= 0; i--) {
if (tally[sec[i].firstChild.innerText] === undefined) {
tally[sec[i].firstChild.innerText] = 1;
} else {
//console.log(i,sec[i].firstChild.innerText);
sec[i].remove();
//return true;
}
}
//return false;
}
</script>
If you are planning on using Authenticated Consent, see Cross-Domain and Cross-Device Consent. As mentioned in the article, when authenticating your users (most likely via a login page), the following snippet should be executed before the OneTrust Banner script is loaded. Because the OneTrust Banner script needs to be called during authentication, one option is to reload the entire page so that the <head> is also reloaded.
var OneTrust = {
dataSubjectParams: {
id: "[Insert User ID Here]",
isAnonymous: false,
token : '[Insert JWT Token Here]'
}
};
