Video: How to Integrate Microsoft UET Consent Mode with Free Cookie Consent

Here's how you can use Free Cookie Consent to integrate Microsoft UET Consent.

In our example, we assume that you have already implemented the Cookie Consent solution on your websites. If not, create it first.

In this example, we'll use a website powered by WordPress. If your website uses a different CMS, the steps remain roughly the same:

1. Load the Microsoft UET script
2. Load the default consent state as denied
3. Update the consent state based on user acceptance using Cookie Consent callbacks

Let's start:

1. Create the uetq function with the default consent states as denied:

   

   The code looks like this:

   <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. Add the code script before the start of the existing Cookie Consent code. Replace "TAG_ID" with your ID:

   

3. Load the default consent state as denied:

   

   The code to load the default consent state should be:

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

4. Add the code below the first code added from Step 1:

   

5. Now let's adapt your Cookie Consent config code. The config code is the code inside the "cookieconsent.run({ })" function.

   Add 2 new parameters in the Cookie Consent config code: callbacks and callbacks_force. The callbacks functionality is necessary to update the consent states based on user acceptance (after users click I Agree):

   

   The code should be:

   "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
   

6. Add the callbacks code inside the Cookie Consent config code:

   

7. Save your changes.

8. Your Cookie Consent notice banner now integrates Microsoft UET Consent Mode:

   

Done.

You've updated your cookie consent code with Microsoft UET tag consent mode.

To validate your UET tag, follow the Microsoft Edge or Google Chrome browser instructions or check our blog article: Microsoft UET Consent Mode.