Conditional Script Variant Loading
This page demonstrates how to conditionally load different Osano script variants based on user location using third-party API detection. Users in California will see the Osano banner with variant two, while all other users see the standard variant.
The page uses the Osano JavaScript API and third-party location detection to dynamically load the appropriate script variant.
To implement this, add the following script to your page before any Osano script tags:
⚠️ Critical Implementation Note: This script must be loaded in the global header of your site as the very first script to run, and it must be loaded synchronously (not async). This ensures the conditional Osano script loading happens before any other scripts that might depend on Osano.
// Function to call the third-party API & conditionally load Osano script variants
fetch('https://ipinfo.io/json?token=YOUR_API_TOKEN')
.then(response => response.json())
.then(data => {
const stateName = data.region || '';
const country = data.country || '';
const normalizedState = `${country}-${stateName.toUpperCase().replace(/\s/g, '_')}`;
// Check if user is in California
if (normalizedState === 'US-CALIFORNIA') {
// Load Osano with variant two for California
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js?&variant=two';
osanoScript.async = true;
document.head.appendChild(osanoScript);
} else {
// Load standard Osano script for all other regions
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js';
osanoScript.async = true;
document.head.appendChild(osanoScript);
}
})
.catch(err => {
console.warn('Could not determine location. Loading standard variant as fallback.', err);
// Load standard Osano script as fallback
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js';
osanoScript.async = true;
document.head.appendChild(osanoScript);
});
Note: Replace YOUR_API_TOKEN, YOUR_ACCOUNT_ID, and YOUR_CUSTOMER_ID with your actual values.
How to customize for other regions or variants:
Use the examples below as templates to customize for different regions, variants, or targeting strategies.
To target every state except California, use a negative condition to exclude specific regions.
// Example: Load variant=one for all US states EXCEPT California
if (normalizedState.startsWith('US-') && normalizedState !== 'US-CALIFORNIA') {
// Load variant one for all US states except California
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js?&variant=one';
osanoScript.async = true;
document.head.appendChild(osanoScript);
} else {
// Load standard variant for California and all other countries
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js';
osanoScript.async = true;
document.head.appendChild(osanoScript);
}
To change the target region, replace 'US-CALIFORNIA' with your desired region format.
// Example: Target Texas instead of California
if (normalizedState === 'US-TEXAS') {
// Load variant for Texas
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js?&variant=two';
osanoScript.async = true;
document.head.appendChild(osanoScript);
} else {
// Load standard variant for all other regions
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js';
osanoScript.async = true;
document.head.appendChild(osanoScript);
}
To change the script variant, replace ?&variant=two with your desired variant parameter.
// Example: Use variant two instead of variant three
if (normalizedState === 'US-CALIFORNIA') {
// Load Osano with variant two for California
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js?&variant=two';
osanoScript.async = true;
document.head.appendChild(osanoScript);
} else {
// Load standard Osano script for all other regions
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js';
osanoScript.async = true;
document.head.appendChild(osanoScript);
}
To target multiple regions, use an array to check for multiple states.
// Example: Target multiple US states
const variantStates = ['US-CALIFORNIA', 'US-TEXAS', 'US-NEW_YORK'];
if (variantStates.includes(normalizedState)) {
// Load variant for specified states
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js?&variant=two';
osanoScript.async = true;
document.head.appendChild(osanoScript);
} else {
// Load standard variant for all other regions
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js';
osanoScript.async = true;
document.head.appendChild(osanoScript);
}
To target entire countries, check for country prefix instead of specific states.
// Example: Target all US states (any region starting with 'US-')
if (normalizedState.startsWith('US-')) {
// Load variant for all US states
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js?&variant=two';
osanoScript.async = true;
document.head.appendChild(osanoScript);
} else {
// Load standard variant for all other countries
const osanoScript = document.createElement('script');
osanoScript.src = 'https://cmp.osano.com/YOUR_ACCOUNT_ID/YOUR_CUSTOMER_ID/osano.js';
osanoScript.async = true;
document.head.appendChild(osanoScript);
}