Single Page Applications
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. When the visitor changes pages within the website the <body> is updated, however 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 on any page change within the SPA.
<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>
Cookie Policy
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 only 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>
Updated about 1 year ago