Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
@adv-ui/universal-consents-cookies-widget
Advanced tools
## How to use?
Weekly downloads
Readme
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 type="text/javascript">window.gdprAppliesGlobally=!0,function e(i,a,o,d,r){function e(i,o,d,s){if("function"==typeof d){window[a]||(window[a]=[]);var c=!1;r&&(c=r(i,s,d)),c||window[a].push({command:i,version:o,callback:d,parameter:s})}}function t(a){if(window[i]&&!0===window[i].stub&&a.data){var r,s="string"==typeof a.data;try{r=s?JSON.parse(a.data):a.data}catch(i){return}if(r[o]){var c=r[o];window[i](c.command,c.version,(function(i,o){var r={};r[d]={returnValue:i,success:o,callId:c.callId},a.source.postMessage(s?JSON.stringify(r):r,"*")}),c.parameter)}}}e.stub=!0,e.stubVersion=2,"function"!=typeof window[i]&&(window[i]=e,window.addEventListener?window.addEventListener("message",t,!1):window.attachEvent("onmessage",t))}("__tcfapi","__tcfapiBuffer","__tcfapiCall","__tcfapiReturn"),function n(i){if(!window.frames[i])if(document.body&&document.body.firstChild){var a=document.body,o=document.createElement("iframe");o.style.display="none",o.name=i,o.title=i,a.insertBefore(o,a.firstChild)}else setTimeout((function(){n(i)}),5)}("__tcfapiLocator");</script>
<script defer 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'>
‼️ Do not duplicate the first line(stub) several times. It's only needed once.
Also, you need to have a div
element with the needed id
where the widget will be rendered. Please, try to keep this div on the root level of your body
in order to avoid problems with the modal.
<div id="adevinta_consents_cookies_universal_widget"></div>
When the user accepts or rejects it, the modal will disappear.
Check a working demo: https://codesandbox.io/s/long-star-62xc9?file=/index.html
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
>
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 = {
cookiePolicyUrl: 'https://your-domain.com/cookie-policy?disable-cmp',
logo: 'https://your-domain.com/your-awesome-logo.png',
site: 'fotocasa'
}
</script>
<script defer src='https://unpkg.com/@adv-ui/universal-consents-cookies-widget/umd/index.js'></script>
site The allowed sites are a map to resolve the notice id. Check here
If you consider that you need to add a new site(because some configuration is different than the vertical main site), please, contact with Advertising IT team on Slack channel #es-advertising-it-help
.
cookiePolicyUrl
🚧 This is not working properly now. The cookie policy is set in the notice on the Didomi console.
disable-cmp
query param to disable the CMP if it's included in the cookie policy pageThe 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.
This snippet should be placed BEFORE the one mentioned before.
<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>
<script>
window.onload = () => {
window.sui.analytics.identify('your user id', {});
window.sui.analytics.track('Your Event', {});
window.sui.analytics.reset();
}
</script>
You could then use the config from Segment Wrapper. This should be placed before loading the widget.
<script>
window.__mpi = {
segmentWrapper: {
googleAdsPixelId: '1054970353',
facebookPixelId: '448176625351232',
importAdobeVisitorId: true,
defaultProperties: {
site: 'infojobs'
}
}
}
</script>
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>
// 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
## How to use?
The npm package @adv-ui/universal-consents-cookies-widget receives a total of 2,524 weekly downloads. As such, @adv-ui/universal-consents-cookies-widget popularity was classified as popular.
We found that @adv-ui/universal-consents-cookies-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 83 open source maintainers collaborating on the project.
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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.