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.
As some of our script functionality relies on page refreshes, your site will need to include the configurations and functions below to ensure OneTrust operates correctly on SPAs.
Enable the SPA toggle in the OneTrust tenant
The first thing you need to do is turn on the 'Enable Single Page Application Support' toggle in your publish pane. Head to Cookie Consent > Scripts > Your Site > Publish Test/Publish Production > Toggle on 'Enable Single Page Application Support' > Continue > Publish. This toggle makes certain public methods available within the OneTrust script and will be used as part of the function reloadOTBanner() in the next step.
Cookie Banner and Preference Center UI
By default, the Cookie Banner will load on first page visit (if 'Show Banner' is enabled in geolocation rules). If the visitor navigates to the next page before dismissing the cookie banner, the site's <body> is updated but the OneTrust script (which resides in the <head>) is not executed again and causes the cookie banner to not reappear.
To address this scenario, add the function reloadOTBanner() which will resurface the cookie banner until it's dismissed by the user. This function should be called within the body of any page change in your SPA. It uses public methods from the OneTrust Script to reload the cookie banner. Code snippet below:
<script>
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) {
return true;
}
}
function reloadOTBanner() {
if (!getCookie("OptanonAlertBoxClosed")) {
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 List UI
If your site utilizing the Cookie List generated by the OneTrust SDK, add the function clearDup() to ensure that the list is not duplicated on the page. This function only needs to be executed on the page containing the cookie list.
Cookie List script for reference:
clearDup() code snippet below:
<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>
For the Cookie List page, both
clearDup()andreloadOTBanner()should be called when the page is loaded.
Note
Both scripts above should come after the main OneTrust script.
If you're not utilizing the Cookie List, disregard the
clearDup()function above.
Authenticated Consent
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), ensure that the dataSubjectParams script is injected before the main OneTrust script. The dataSubjectParams script should also be removed from the page upon logout.
var OneTrust = {
dataSubjectParams: {
id: "[Insert User ID Here]",
isAnonymous: false,
token : '[Insert JWT Token Here]'
}
};
//OneTrust Script
<script src="https://[CDN LOCATION]/consent/[YOUR DOMAIN ID]/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="[YOUR DOMAIN ID]" ></script>
<script type="text/javascript">
function OptanonWrapper() { }
</script>
IMPORTANT
Because the main OneTrust script also needs to be called during authentication and logout, the page needs to be reloaded so the
<head>of the page where the OneTrust script lives can be reloaded.
Alternatively, if your site can't reload the page, you can use the syncConsentProfile() method upon login and on all pages in the authenticated state. The syncConsentProfile method will need to be called after executing the main OneTrust script. Upon logout, this method should cease to be used.
Changing Languages
If your site allows users to change languages and you need the OneTrust UI to adapt accordingly, you can use the changeLanguage method wrapped in our OptanonWrapper function. This should be placed in your <body> as the <head> is not refreshed.
<script>
function OptanonWrapper() {
OneTrust.changeLanguage(‘langauge code’);
}
</script>
Updated 3 months ago