Free Cookie Consent

How to implement Cookie Consent.

Just 5 easy steps to implement our free Cookie Consent notice banner.

Cookie Consent screenshots.

Here's how the Cookie Consent notice banner looks.

How to tag your JavaScript scripts.

Instructions

1. Tag any JavaScript <script> that you're using by changing type="text/javascript" to type="text/plain".

2. Add the corresponding consent level for each tagged <script>. For example: data-cookie-consent="functionality".

Example

<!-- Login Cookies -->
<script type="text/plain" data-cookie-consent="strictly-necessary" src="/js/login-session.js"></script>
                                            

<!-- Google Analytics -->
<script type="text/plain" data-cookie-consent="tracking">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', GOOGLE_PROPERTY_ID_GOES_HERE, 'auto');
ga('send', 'pageview');
</script>
                                            

Cookie Consent & Google Consent Mode V2.

Google Consent Mode V2 can be easily integrated with Cookie Consent. Create the gtag function with the default consent states as denied. Then, load the Google Analytics script. And then, using the callbacks functionality from Cookie Consent, update the consent states based on user acceptance.

Instructions

1. Create the gtag function with the default consent states as denied.

   <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){
   	dataLayer.push(arguments);
   }
   gtag('consent', 'default', {
   	'ad_storage': 'denied',
   	'ad_user_data': 'denied',
   	'ad_personalization': 'denied',
   	'analytics_storage': 'denied'
   });
   </script>

2. Load Google Analytics on your page without tagging it to a specific category. Google Analytics will adjust its behavior accordingly in order to preserve analytics measurement.

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

3. Update your Cookie Consent config code to include a new parameter called callbacks that updates the consent states based on user consent.

   "callbacks": {
   	"scripts_specific_loaded": (level) => {
   		switch(level) {
   			case 'targeting':
   				gtag('consent', 'update', {
   					'ad_storage': 'granted',
   					'ad_user_data': 'granted',
   					'ad_personalization': 'granted',
   					'analytics_storage': 'granted'
   				});
   				break;
   		}
   	}
   },
   "callbacks_force": true
   

Example

Cookie Consent & Microsoft UET Consent.

Microsoft UET Consent Mode can be easily integrated with Cookie Consent. Load the Microsoft UET script. Create the uetq function with the default consent states as denied. Using the callbacks functionality from Cookie Consent, update the consent states based on user acceptance.

Instructions

1. Load the Microsoft UET script.

   <script>
   (function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"TAG_ID", enableAutoSpaTracking: true};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");
   </script>

2. Load the default consent state as denied.

   <script>
   window.uetq = window.uetq || [];
   window.uetq.push('consent', 'default', {
       'ad_storage': 'denied'
   });
   </script>

3. Update your Cookie Consent config code to include a new parameter called callbacks that updates the consent states based on user consent.

   "callbacks": {
   	"scripts_specific_loaded": (level) => {
   		switch(level) {
   			case 'targeting':
   				window.uetq = window.uetq || [];
   				window.uetq.push('consent', 'update', {
   						'ad_storage': 'granted'
   				});
   				break;
   		}
   	}
   },
   "callbacks_force": true
   

Example

Cookie Consent levels and categories.

The following levels are available in our free Cookie Consent solution.

Cookie Consent video tutorials.

Learn how to integrate and use the Cookie Consent tool through our video tutorials.

Frequently asked questions.

Answers to the most common questions about the Cookie Consent tool.