Collecting cookie consent

The legal.js cookie-consent widget is under heavy development. It currently supports analytical cookies and necessary cookies; support for marketing cookies will be added soon.

Integration

This guide assumes that you have successfully created your cookie-widget in the Legal Monster app, and have its JavaScript snippet ready to integrate.

Categorisation of scripts that set cookies on your website

legal.js currently uses manual categorisation to properly block cookies that are set on your website, so you must make changes to your HTML for blocking to work. In future, an automatic option will be available that will not require this step.

Necessary cookies will always be enabled, so there is no need to categorise scripts that set them, unless those scripts also set cookies in another category. If that applies to a script on your website, you should categorise the script appropriately (e.g. as setting analytics cookies).

legal.js currently supports blocking (and enabling) of analytics cookies; more categories will be available in the future.

To ensure that cookies set by scripts are properly blocked or allowed, you must update how you include those scripts on your website. They will normally look something like this example for Google Analytics:

<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-0"
>
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123456789-0');
</script>

The next step is essential to make cookie-blocking work correctly. If you do not change/set these attributes as described, cookies will not be blocked when expected.

You must update the way you include all scripts that set analytics cookies, adding (or changing, if present) the type attribute with a value of text/plain, and adding a data-cookieconsent attribute with a value of analytics.

The example above would look like this when correctly updated to add the extra attributes to the scripts:

<script
type="text/plain"
data-cookieconsent="analytics"
async
src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-0"
>
</script>
<script
type="text/plain"
data-cookieconsent="analytics"
>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123456789-0');
</script>

To collect cookie-consent with legal.js, you must embed the widget using its generated JavaScript snippet.

The snippet must be included immediately before the closing-tag of the body element, like this:

...
...
<script>
!function(){var i,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="3.0.0",i="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.info&&console.info("legal.js: The initialisation snippet is included more than once on this page, and does not need to be.");else{for(s.invoked=!0,s.methods=["cookieConsent","document","ensureConsent","handleWidget","signup","user"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.setAttribute("data-legalmonster","sven"),o.type="text/javascript",o.async=!0,o.src=i,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}},s.widget=function(e){s.__project||s.load(e.widgetPublicKey),s.handleWidget(e)}}}();
legal.widget({
type: "cookie",
widgetPublicKey: "Your cookie-consent widget's public-key",
});
</script>
</body>
</html>

If you are unable to do this, you must ensure that the call to legal.widget(...) occurs after the DOM is ready, using a combination of the DOMContentLoaded event and the document.readyState property. This reference article provides a good overview of the events involved. Contact us if you are in doubt.