Skip to content
Start for free

Microsoft UET

Start Microsoft UET on every page with ad_storage set from the visitor choice, and update it the moment that choice changes.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

Start for free
pnpm add @c15t/integrations
Microsoft UETWaiting for consent
Before a choice

bat.js loads from bat.bing.com, and UET sends its page load. Reject and reload, and the page starts with ad_storage denied.

Turn the switch on, then off, to see what loads.

Before you start

You need an Inth project that connects to your app, c15t in that app and your UET tag ID from Microsoft Advertising.

New to c15t? Complete the quickstart for your framework first. Keep its Inth endpoint, policy, styles and consent UI.

Open the quickstart for your framework

How consent gets to Microsoft UET

The c15t microsoftUet helper uses alwaysLoad, so bat.js loads on every page before the visitor chooses.

Before bat.js loads, the helper pushes consent default with ad_storage set to granted or denied from marketing. Then it sets up UET with automatic SPA tracking and pushes pageLoad.

When marketing changes, the helper pushes a consent update with the new value. It never removes UET. Consent mode at Microsoft decides what UET does while ad_storage stays denied.

So c15t sends the consent state to UET. It does not block the request.

Installation

Microsoft UET has one load mode in c15t. UET loads on every page and gets the marketing choice as ad_storage.

Load with consent mode. bat.js loads before a choice and starts with ad_storage from marketing. Each change sends an update.

microsoftUet({ id })

An opt-out policy or no policy gives optional categories permission before a choice. Then UET starts with ad_storage granted. This guide uses an opt-in policy.

Setup steps

  1. Install the integration package

    Add the helpers next to c15t. An import alone does not start UET.

    pnpm add @c15t/integrations

  2. Add your UET tag ID

    The helper creates the uetq queue and sets up UET itself.

    src/consent-scripts.ts
    import { microsoftUet } from '@c15t/integrations/microsoft-uet';

export const scripts = [microsoftUet({ id: 'YOUR_UET_TAG_ID' })];

    Automatic SPA tracking sends page loads on client navigation. Do not push pageLoad from your router.

  3. Register it with your existing setup

    Add scripts to the c15t configuration that you have now. Keep your Inth endpoint, mode, policy, styles and consent UI.

    Add scripts to c15t.config.ts, next to next.config.ts. Keep the rest of your config, such as mode, in the same call. App Router, Pages Router and static export read the same file.

    c15t.config.ts
    import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });

    Pass scripts to the ConsentRoot in your root route. Import helpers in the route module, not in a server function: script configurations carry callbacks.

    src/routes/__root.tsx
    import { scripts } from '../consent-scripts';

<ConsentRoot state={consent} scripts={scripts}>

    Add scripts to the options of your ConsentProvider, next to mode. Keep the banner, dialog and preferences link inside the provider.

    src/consent.tsx
    import { scripts } from './consent-scripts';

<ConsentProvider options={{ mode, scripts }}>

    Register scripts under the c15t key in app.config.ts. Keep them out of nuxt.config.ts, which reaches the browser as JSON and drops the helper callbacks.

    app/app.config.ts
    import { scripts } from '../src/consent-scripts';

export default defineAppConfig({
  c15t: { scripts },
});

    Pass scripts to the c15tVue plugin call you have now. The plugin starts one script loader when the app mounts.

    src/main.ts
    import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { scripts } from './consent-scripts';

app.use(c15tVue, {
  mode: manifest(),
  scripts,
});

    Add scripts to the client entrypoint, which the integration finds on its own. Keep helpers out of astro.config.mjs: its options are serialized into the page.

    src/c15t.client.ts
    import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;

    Pass scripts as a prop to the ConsentProvider you have now. The provider owns the loader and disposes it on unmount.

    src/App.svelte
    <script lang="ts">
  import { ConsentProvider, manifest } from 'c15t/svelte';
  import { scripts } from './consent-scripts';
</script>

<ConsentProvider mode={manifest()} {scripts}>
  <!-- Your app and consent UI -->
</ConsentProvider>

    Add scripts to the ConsentRoot in the root layout. Import helpers in the layout component, not in +layout.server.ts: a server load cannot send functions to the browser.

    src/routes/+layout.svelte
    <script lang="ts">
  import { ConsentRoot } from 'c15t/svelte';
  import { scripts } from '../consent-scripts';

  let { children, data } = $props();
</script>

<ConsentRoot state={data.consent} {scripts}>
  {@render children()}
</ConsentRoot>

    Paste the vendor’s snippet behind consent

    The helpers need a bundler. On a page with the c15t script tag, paste the vendor’s own snippet instead and keep it inert until visitors allow its category. Helper options, such as loadMode, do not apply.

    index.html
    <script type="text/plain" data-c15t-category="marketing">
  // The vendor's snippet, unchanged
</script>

    Pass scripts to init() from @c15t/browser, next to your mode. With createConsentRuntime, pass scripts to it instead.

    src/consent.ts
    import { init, manifest } from '@c15t/browser';
import { scripts } from './consent-scripts';

const consent = init({
  mode: manifest(),
  scripts,
});
All frameworks

Remove the UET snippet and each tag manager entry for the same tag.

Verify your setup

Use a private window with an opt-in policy. Open DevTools Network and filter by bat.bing.com. Then test the three states.

  • Before a choice

    bat.js loads from bat.bing.com, and UET sends its page load. Reject and reload, and the page starts with ad_storage denied.

  • After you allow marketing

    No second bat.js request appears. The helper sends a consent update to the tag that runs now.

  • After you withdraw marketing

    Save your choice. c15t reloads the page, and the new page starts with ad_storage denied.

In a single page app, change the route and make sure that UET sends one page load, not two.

Open the full Microsoft UET guide