# Microsoft UET

The c15t microsoftUet helper loads Microsoft UET on every page and sets ad_storage from marketing consent in Inth. Each change sends a consent update.

## Key facts

- **Tool:** Microsoft UET
- **Category:** Advertising
- **Consent categories:** Marketing
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/microsoft-uet)
- [Microsoft UET](https://ads.microsoft.com/)

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](/dashboard/sign-up)

## 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](https://c15t.com/docs/frameworks)

## 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.

```ts
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

#### Install the integration package

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

```
pnpm add @c15t/integrations
```

#### Add your UET tag ID

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

```
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.

### Register it with your existing setup

#### Next.js

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.

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

export default defineConsentConfig({ scripts });
```

#### TanStack Start

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

```
import { scripts } from '../consent-scripts';

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

#### React

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

```
import { scripts } from './consent-scripts';

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

#### Nuxt

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.

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

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

#### Vue

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

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

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

#### Astro

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.

```
import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;
```

#### Svelte

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

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

#### SvelteKit

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.

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

#### HTML: 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.

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

#### JavaScript

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

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

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

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](https://c15t.com/docs/integrations/microsoft-uet)

## Related guides

- [OpenAI Pixel](/integrations/openai-pixel)

- [Pinterest Tag](/integrations/pinterest-tag)

- [Reddit Pixel](/integrations/reddit-pixel)