@adv-re/universal-consents-cookies-widget
v1.20.0
Published
A widget for cookie consent management and Segment configuration, compatible with TCF. It includes the Adevinta Real Estate Segment Wrapper by default.
Downloads
636
Maintainers
oscar-raig-adevinta
andresadv
german.gonzalez.ext
adv-re-bot
alxsimo_adv
oscar_ramirez
alfredo.narvaez
oriol.puig
eric-darbra
guillemgc3
marc.benito
jenifer.lopez
candymd
arturo.vicente
oriol.hilari
ignacio.rodriguez
victor.perez.adevinta
alex.castells
pablo.rey-adevinta
a.ferrer
alverd004
fernando.coca
fernando.aparicio.advnta
marian.lucaci
sergio.escano
andresin87.adevinta
oscar.gomez
david.nieto
florinz
turo-lopez
adria.velardos
carlos.gonzalezl
zecafernandez
ruben-martin
rusabe
aitor.rodriguez
mirceasima-adv
biancamateiu-advKeywords
Readme
@adv-re/universal-consents-cookies-widget 
A widget for cookie consent management and Segment configuration, compatible with TCF. It includes the Adevinta Real Estate Segment Wrapper by default.
A full example is available here.
Getting Started
Add third-party scripts
Insert the following scripts into the <head> of your HTML document.
<!-- Segment -->
<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"); // your write key must be set here
}}();
</script>
<!-- TCF -->
<script type="text/javascript">
(function(){function i(e){if(!window.frames[e]){if(document.body&&document.body.firstChild){var t=document.body;var n=document.createElement("iframe");n.style.display="none";n.name=e;n.title=e;t.insertBefore(n,t.firstChild)}else{setTimeout(function(){i(e)},5)}}}function e(n,o,r,f,s){function e(e,t,n,i){if(typeof n!=="function"){return}if(!window[o]){window[o]=[]}var a=false;if(s){a=s(e,i,n)}if(!a){window[o].push({command:e,version:t,callback:n,parameter:i})}}e.stub=true;e.stubVersion=2;function t(i){if(!window[n]||window[n].stub!==true){return}if(!i.data){return}var a=typeof i.data==="string";var e;try{e=a?JSON.parse(i.data):i.data}catch(t){return}if(e[r]){var o=e[r];window[n](o.command,o.version,function(e,t){var n={};n[f]={returnValue:e,success:t,callId:o.callId};if(i.source){i.source.postMessage(a?JSON.stringify(n):n,"*")}},o.parameter)}}if(typeof window[n]!=="function"){window[n]=e;if(window.addEventListener){window.addEventListener("message",t,false)}else{window.attachEvent("onmessage",t)}}}e("__tcfapi","__tcfapiBuffer","__tcfapiCall","__tcfapiReturn");i("__tcfapiLocator")})();
</script>Basic global configuration
Place this script after the third-party scripts and before the widget script.
<script>
window.__SEGMENT_WRAPPER = {
ADOBE_ORG_ID: "05FF6243578784B37F000101@AdobeOrg",
TRACKING_SERVER: "schibstedspain.d3.sc.omtrdc.net",
};
window.__mpi = window.__mpi || {};
window.__mpi.segmentWrapper = {};
window.__mpi.universalConsentsCookiesWidget = {};
</script>Widget Configuration
Customize the widget by setting options in window.__mpi.universalConsentsCookiesWidget.
<script>
window.__mpi.universalConsentsCookiesWidget = {
cookiePolicyUrl: 'https://your-domain.com/cookie-policy?disable-cmp',
logo: 'https://your-domain.com/logo.png',
site: 'fotocasa'
}
</script>
<script defer src='https://unpkg.com/@adv-re/universal-consents-cookies-widget/umd/index.js'></script>Segment Wrapper configuration
Customize the segment wrapper by setting options in window.__mpi.segmentWrapper.
<script>
window.__mpi.segmentWrapper = {
defaultContext: {
vertical: "realestate",
site: "<site>",
},
defaultProperties: {
language: "<language>",
vertical: "realestate",
site: "<site>",
},
googleAnalyticsMeasurementId: '<api-key>'
importAdobeVisitorId: true,
sendXandrId: true,
isUserTraitsEnabled: true,
}
</script>Add widgets scripts
<script
defer
src="https://unpkg.com/@adv-re/universal-consents-cookies-widget/umd/index.js"
></script>
<link
rel="stylesheet"
href="https://unpkg.com/@adv-re/universal-consents-cookies-widget/umd/styles.css"
/>Add widget tag
Inside the <body> add a tag where the widget will be rendered.
<div id="adevinta_consents_cookies_universal_widget"></div>Link to open the 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="#"
alt="Gestionar consentimientos de cookies"
onclick="window.__callUniversalConsentsCookiesWidget()"
>Gestionar consentimientos de cookies</a
>Load Scripts based on user consents
Once the consent widget is implemented on your site, you can dynamically load third-party scripts only after the user has granted the necessary consents.
This allows you to remain compliant with privacy regulations while deferring non-essential scripts until the appropriate permissions are given.
Use the following example to load specific vendors only when the user consents to the required purposes.
<script>
// init vendors loader by consents
window.onload = () => {
window.sui.vendors.initVendorConsentsLoader({
vendors: {
tealium: {
// script to load
script: 'https://frtassets.fotocasa.es/external-scripts/utag-pro.js',
// consents needed for this script
consents: {
purposes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
specialFeatureOptins: [1]
}
},
addThis: {
// script to load
script: 'https://www.addthis.com/script.js',
// consents needed for this script
consents: {
purposes: [1], // example of a script with a single purpose
specialFeatureOptins: [1]
}
}
}
})
}
</script>Please, keep in mind that if the user doesn't provide needed consents the script won't be loaded.