# Google Tag Manager

The c15t googleTagManager helper loads your GTM container and sends Google Consent Mode v2 defaults and updates from each choice in Inth.

## Key facts

- **Tool:** Google Tag Manager
- **Category:** Tag management
- **Consent categories:** Measurement, Marketing
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/google-tag-manager)
- [Google Tag Manager](https://marketingplatform.google.com/about/tag-manager/)

Keep your Google Tag Manager container and send Google Consent Mode v2 signals from each banner choice. You pick if gtm.js loads on every page or waits for consent.

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 and c15t in that app. You also need the container ID from your GTM workspace. It starts with GTM-.

Remove the existing GTM snippet, its noscript iframe and any framework plugin that loads the same container.

[Open the quickstart for your framework](https://c15t.com/docs/frameworks)

## How consent works with Google Tag Manager

In both modes, the c15t googleTagManager helper sends the Consent Mode default before the container starts. Each later change sends an update, then a consent-update event.

Measurement controls analytics\_storage. Marketing controls ad\_storage, ad\_user\_data and ad\_personalization.

Tags in the container that are not from Google ignore these signals. Give each of them a consent requirement in GTM, or fire it on the consent-update event.

If a vendor must make no request before consent, remove it from the container. Then register its own c15t helper.

## Installation

The helper has two modes for when gtm.js loads. Pick the mode that your policy needs.

### Load on every page

gtm.js loads before a choice, under the necessary category. While the visitor denies a type, Google tags send cookieless pings, so Google can model visitors who refused.

```ts
loadMode: 'always'
```

### Wait for permission

No request goes to Google until measurement or marketing has permission. Visitors who refuse send nothing, so reports cover only visitors who allowed the category.

```ts
loadMode: 'after-consent'
```

With after-consent, an opt-out policy or no policy gives optional categories permission before a choice. Then gtm.js loads on the first page. If the container holds only Analytics tags, pass category: 'measurement'.

## Setup steps

#### Install the integration package

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

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

#### Add your container ID

The helper trims the ID. An empty ID logs an error, and the container does not load.

```
import { googleTagManager } from '@c15t/integrations/google-tag-manager';

export const scripts = [googleTagManager({ id: 'GTM-XXXXXXX' })];
```

To hold the container until consent, add loadMode: 'after-consent' to the same call.

### 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="measurement">
  // 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,
});
```

Use the helper or the c15t Consent Management template from the GTM Community Template Gallery on a page, never both. Otherwise Google receives two sets of consent commands.

## Verify your setup

Use a private window with an opt-in policy and Google Tag Assistant. Then test the three states with the default mode.

- **Before a choice**: gtm.js loads. The first consent command is default, with analytics\_storage and ad\_storage denied.

- **After you allow measurement**: Tag Assistant shows an update that grants analytics\_storage, then a consent-update event.

- **After you withdraw measurement**: c15t reloads the page, and the new page starts with analytics\_storage denied.

With after-consent, no request goes to Google and window.dataLayer stays undefined until you allow a category. Then gtm.js loads once.

[Open the full Google Tag Manager guide](https://c15t.com/docs/integrations/google-tag-manager)

## Related guides

- [Hightouch](/integrations/hightouch)

- [RudderStack](/integrations/rudderstack)

- [Segment](/integrations/segment)