Skip to main content

How to Integrate Microsoft UET with Consent Mode Using Termly

Rogelyn
Updated

This 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>

Learn More

 

Related articles