@adv-ui/universal-consents-cookies-widget
How to use?
Add the next code on the <head>
of your website in order to show the Consent Cookies Widget in case it's needed for the user.
<script src='https://unpkg.com/@adv-ui/universal-consents-cookies-widget/umd/index.js'></script>
<link rel='stylesheet' href='https://unpkg.com/@adv-ui/universal-consents-cookies-widget/umd/styles.css'>
When the user accepts or rejects it, the modal will disappear.
Adding a link to open manually Consents Cookies Widget
You must offer to the user the possibility to open the widget to change the consents anytime. For that, you could add this HTML in order to give this feature to the user.
<a href='#' onclick="window.__callUniversalConsentsCookiesWidget()">Gestionar consentimientos de cookies</a>
Configuration
You could config some aspects of the widget by using a window object called universalConsentsCookiesWidget
.
Important: Config should be placed BEFORE loading the widget.
<script>
window.__mpi.universalConsentsCookiesWidget = {
logo: 'https://your-domain.com/your-awesome-logo.png'
}
</script>
<script src='https://unpkg.com/@adv-ui/universal-consents-cookies-widget/umd/index.js'></script>
Using Segment Wrapper
The widget comes with Segment Wrapper. You only need to add the needed snippet for Segment SDK with the expected write key in order to use it. This needs to be done before loading the widget.
After that, you could safely use the window.sui.analytics
method in order to track with Segment Wrapper and it will send the correct tracking with the consents well informed.
<script>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
analytics.load("YOUR_WRITE_KEY");
}}();
</script>
<script src='https://unpkg.com/@adv-ui/universal-consents-cookies-widget/umd/index.js'></script>
<script>
window.sui.analytics.identify('your user id', {});
window.sui.analytics.track('Your Event', {});
window.sui.analytics.reset();
</script>
Load scripts for some consents
Once you have the consents widget implemented in your site, you'll be able to listen when the user has consented some purposes in order to load some specific tags.
For example, for adding loading tealium after user is giving consents you should do:
<script>
window.sui.vendors.initVendorConsentsLoader({
vendors: {
tealium: {
script: 'https://frtassets.fotocasa.es/external-scripts/utag-pro.js',
consents: {
purposes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
specialFeatureOptins: [1]
}
},
addThis: {
script: 'https://www.addthis.com/script.js',
consents: {
purposes: [1],
specialFeatureOptins: [1]
}
}
}
})
</script>
Please, keep in mind that if the user doesn't provide needed consents the script won't be loaded.
Check list of purposes by ID..