Skip to main content

How to Integrate Microsoft UET with Consent Mode Using Termly

Ronald
Updated

How to use Termly with Google Tag ManagerThis guide will walk you through setting up Microsoft UET with Termly’s Consent Management Platform, using a simple JavaScript implementation that responds to consent updates in real time.

Step 1: Set the Default Consent Mode

To comply with Microsoft’s Consent Mode policy, you must set a default value for tracking permissions. In this case, the default is denied, and will only be updated if the user explicitly consents to advertising cookies.

Add the following script inside your <head> tag:

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

This ensures that tracking cookies are blocked unless the user opts in.

Step 2: Configure Consent Update Handling

Configure the script to listen for Termly’s consent event and update UET's tracking behavior accordingly.

Below is the recommended script, which you should place in the <head> section after the default consent script and before the Termly script:

    <script>
      function onTermlyLoaded() {
        let consentMode = "opt_in";

        Termly.on("initialized", (data) => {
          consentMode = data?.region_settings?.consent_mode || "opt_in";
        });

        Termly.on("consent", (data) => {
          const advertisingConsent = data?.consentState?.advertising;
          let adStorage;

          if (advertisingConsent === true) {
            adStorage = "granted";
          } else if (
            advertisingConsent === undefined ||
            advertisingConsent === null
          ) {
            adStorage = consentMode === "opt_out" ? "granted" : "denied";
          } else {
            adStorage = "denied";
          }

          window.uetq = window.uetq || [];
          window.uetq.push("consent", "update", {
            ad_storage: adStorage,
          });
        });
      }
    </script>

Step 3: Configure Consent Update Handling

Lastly, include Termly’s resource blocker script with the onload attribute calling your consent handler function:

<script
  type="text/javascript"
  src="https://app.termly.io/resource-blocker/{yourWebsiteUUID}?autoBlock=on"
  onload="onTermlyLoaded()"
></script>

Example: Full Working Integration

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Microsoft UET with Termly Consent</title>

    <!-- Default Consent Mode: Denied -->
    <script>
      window.uetq = window.uetq || [];
      window.uetq.push("consent", "default", {
        ad_storage: "denied",
      });
    </script>

    <!-- Consent Update Based on Termly -->
    <script>
      function onTermlyLoaded() {
        let consentMode = "opt_in";

        Termly.on("initialized", (data) => {
          consentMode = data?.region_settings?.consent_mode || "opt_in";
        });

        Termly.on("consent", (data) => {
          const advertisingConsent = data?.consentState?.advertising;
          let adStorage;

          if (advertisingConsent === true) {
            adStorage = "granted";
          } else if (
            advertisingConsent === undefined ||
            advertisingConsent === null
          ) {
            adStorage = consentMode === "opt_out" ? "granted" : "denied";
          } else {
            adStorage = "denied";
          }

          window.uetq = window.uetq || [];
          window.uetq.push("consent", "update", {
            ad_storage: adStorage,
          });
        });
      }
    </script>

    <!-- Termly Script with AutoBlock -->
    <script
      type="text/javascript"
      src="https://app.termly.io/resource-blocker/{yourWebsiteUUID}?autoBlock=on"
      onload="onTermlyLoaded()"
    ></script>
  </head>

  <body>
   Content here
  </body>
</html>

Google Tag Manager Integration

If you have installed the Termly consent banner using Termly's official tag template in GTM, you can configure your Microsoft UET tag directly in GTM using Termly’s consent signals by adding the Termly.consentSaveDone as a trigger and adding Ad_storage in the Require additional consent for tag to fire field.

Learn More

 

Related articles