c15t/docs/integrations/google-tag.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: GA4 + Google Ads (gtag.js)
description: Send data to Google Analytics 4 and Google Ads with automatic
  Consent Mode v2 support.
icon: google-analytics
group: integrations
---
Google Tag (`gtag.js`) is Google's unified tracking script for sending data to Google Analytics 4 (GA4), Google Ads, and Floodlight. It measures user behavior, tracks conversions, and powers Google's advertising ecosystem.

c15t initializes Google Tag with Consent Mode v2 defaults set to denied and automatically updates the consent state when users make choices. You don't need to configure Google Consent Mode yourself.

> ℹ️ **Info:**
> Use GTM if your team needs centralized tag management in the GTM UI. Use gtag.js if you only need GA4/Google Ads directly in code. Don't run both for the same destination unless intentional, or you may duplicate events.

**Choosing the right category:**

* Use `category: 'measurement'` for analytics-only tracking (GA4 events)
* Use `category: 'marketing'` for advertising and conversion tracking (Google Ads)

## Integrate with c15t

**React**

```tsx
import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { gtag } from '@c15t/scripts/google-tag';

const scripts = [
  gtag({
    id: 'G-XXXXXXXXXX',
    category: 'measurement', // or 'marketing'
  }),
];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**Next.js**

```tsx
'use client';

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/nextjs';
import { gtag } from '@c15t/scripts/google-tag';

const scripts = [
  gtag({
    id: 'G-XXXXXXXXXX',
    category: 'measurement', // or 'marketing'
  }),
];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: '/api/c15t',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**JavaScript**

```ts
import { getOrCreateConsentRuntime } from 'c15t';
import { gtag } from '@c15t/scripts/google-tag';

getOrCreateConsentRuntime({
  mode: 'hosted',
  backendURL: 'https://your-instance.c15t.dev',
  scripts: [
    gtag({
      id: 'G-XXXXXXXXXX',
      category: 'measurement', // or 'marketing'
    }),
  ],
});
```

## How c15t loads it

* **Category:** configurable — `measurement` (default, Analytics) or `marketing`
* **Loads when:** [`alwaysLoad`](/docs/frameworks/react/script-loader#always-load) — runs on page start regardless of consent state, with Consent Mode v2 defaults set to denied
* **On consent change:** [persists](/docs/frameworks/react/script-loader#persist-after-revocation) — c15t pushes a Consent Mode v2 `update` to gtag instead of removing the script

## Tracking events in your app

`gtag.js` is `alwaysLoad: true`, so `window.gtag` is present from page start regardless of consent. Calls like `gtag('event', 'sign_up')` are **safe at any time** — c15t sets Consent Mode v2 defaults to denied before the user makes a choice, and Google's SDK suppresses transmission of events while the relevant consent is denied. When consent later changes, c15t emits a Consent Mode v2 `update` so events fire correctly going forward.

```ts
window.gtag?.('event', 'sign_up', { method: 'email' });
```

You do not need to wrap `gtag(...)` calls in a `useConsentManager().has(...)` check — Consent Mode handles the suppression for you.

## Types

### GtagOptions

|Property|Value|
|:--|:--|
|Type Name|\`GtagOptions\`|
|Source Path|\`./packages/scripts/src/vendors/analytics/google-tag.ts\`|

\*ExtractedTypeTable: Could not extract "GtagOptions" from "./packages/scripts/src/vendors/analytics/google-tag.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### Script

|Property|Value|
|:--|:--|
|Type Name|\`Script\`|
|Source Path|\`./packages/core/src/libs/script-loader/types.ts\`|

\*ExtractedTypeTable: Could not extract "Script" from "./packages/core/src/libs/script-loader/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*