@adv-re/universal-consents-cookies-widget
Advanced tools
A widget for cookie consent management and Segment configuration, compatible with TCF. It includes the Adevinta Real Estate Segment Wrapper by default.
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.
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>
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>
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>
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>
<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"
/>
Inside the <body> add a tag where the widget will be rendered.
<div id="adevinta_consents_cookies_universal_widget"></div>
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
>
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.
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.