How to integrate Clickio Consent with Shopify Customer Privacy API
1. Place the Clickio implementation code.
1. In your Shopify admin, go to Online Store under Sales channels, then click Themes.
2. Next to your current theme, click the ⋯ (More) menu and select Edit code.
3. In the Layout section, open the theme.liquid file.
4. Insert the code snippet below immediately before the closing
</head> tag:<script>
(function(){
let global = window['Shopify'];
if (global
&& global['loadFeatures']
&& global['loadFeatures'].length >= 0
) {
let loadCallback = function () {
let setTracking = global['customerPrivacy']['setTrackingConsent'];
setTracking({
'analytics': '',
'marketing': '',
'preferences': '',
'sale_of_data':''
});
window['__lxG__'] = window['__lxG__'] || {};
let clickioGlobal = window['__lxG__'];
clickioGlobal['consentQueue'] = clickioGlobal['consentQueue'] || [];
clickioGlobal['consentQueue'].push(function(){
clickioGlobal['onConsentStateUpdate'](function (consentData) {
let consentApplicable = clickioGlobal['getConsentApplicable'](); // true/false
let consentType = clickioGlobal['getConsentType'](); // possible values: usnat, nonusnat, nontcf, tcf
if (consentApplicable) {
if (consentType === 'usnat') {
setTracking({
'sale_of_data': consentData['parsedSections']['usnat']['SaleOptOut'] === 2
});
} else if (consentType === 'tcf') {
setTracking({
'analytics': consentData['purpose']['consents'][1] && consentData['purpose']['consents'][8] && consentData['purpose']['consents'][9],
'marketing': consentData['purpose']['consents'][1] && consentData['purpose']['consents'][3] && consentData['purpose']['consents'][4] && consentData['purpose']['consents'][7],
'preferences': consentData['purpose']['consents'][1] && consentData['purpose']['consents'][5] && consentData['purpose']['consents'][6]
});
} else if (consentType === 'nontcf') {
setTracking({
'analytics': !!consentData['purpose']['consents'][2],
'marketing': !!consentData['purpose']['consents'][6],
'preferences': !!(consentData['purpose']['consents'][3] && consentData['purpose']['consents'][4])
});
} else {
setTracking({
'analytics': true,
'marketing': true,
'preferences': true,
'sale_of_data': true
});
}
} else {
setTracking({
'analytics': true,
'marketing': true,
'preferences': true,
'sale_of_data': true
});
}
});
});
};
global['loadFeatures']([
{
name: 'consent-tracking-api',
version: '0.1'
}
], loadCallback);
}
})();
</script>2. Enable “Use Custom Cookie Banner” in Shopify
To ensure that Shopify does not show its own built-in cookie banner (so it does not conflict with Clickio CMP), you must switch Shopify into Custom Banner Mode.
Follow these steps:
-
Go to your Shopify Admin.
-
In the left sidebar, open Settings.
-
Open Customer Privacy settings.
- Click to Cookie banner.
-
Click to More actions > Use Custom Cookie Banner
-
Select All regions if you use the All users (Global) consent scope or Europe for Only EEA, UK and CH consent scope.
-
Save your changes.
After this, Shopify will no longer display its default cookie banner and will rely entirely on the consent signals provided by Clickio CMP through the Customer Privacy API.