# Segment

The c15t segment helper loads Segment Analytics.js only after visitors allow measurement in Inth. On withdrawal, c15t removes the script and reloads the page.

## Key facts

- **Tool:** Segment
- **Category:** Other
- **Consent categories:** Measurement
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/segment)
- [Segment](https://www.twilio.com/en-us/segment)

Collect events with Segment only from visitors who allow measurement. Until then, c15t defines no window.analytics and loads nothing from Segment.

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 write key of your Segment JavaScript source.

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 works with Segment

When measurement becomes allowed, the c15t segment helper creates the window.analytics queue. It queues one page view, then loads Analytics.js.

The helper sends no consent signal to Segment. On withdrawal, c15t removes the script element and calls no Segment API.

Segment sends events to every destination on the source. A measurement grant does not cover a destination that needs marketing.

Set destination consent in Segment, or load that vendor with its own c15t helper.

## Installation

Segment has one load mode in c15t. The helper waits for measurement permission.

### Wait for permission

No request goes to Segment until the visitor accepts measurement. On withdrawal, c15t removes the script and reloads the page.

```ts
segment({ writeKey })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then Segment loads on the first page. 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 Segment Analytics.js.

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

#### Add your write key

The helper builds the loader URL from the key. An empty key logs an error, and Analytics.js does not load.

```
import { segment } from '@c15t/integrations/segment';

export const scripts = [segment({ writeKey: 'YOUR_SOURCE_WRITE_KEY' })];
```

Set trackPageView: false to send page views yourself.

#### Guard your own Segment calls

Calls that your code makes, such as track and identify, need their own check. window.analytics still exists after withdrawal.

```
export function trackSignup(measurementAllowed: boolean, plan: string) {
	if (!measurementAllowed || !window.analytics) return;
	window.analytics.track('Signup', { plan });
}
```

Pass the current measurement permission, for example useConsent('measurement') in React. Analytics.js sends no page view on client route changes.

### 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,
});
```

Remove the original Segment snippet, so it cannot load without consent.

## Verify your setup

Filter DevTools Network by segment. Then test the three states.

- **Before a choice**: Nothing loads from Segment, and c15t defines no window.analytics.

- **After you allow measurement**: analytics.min.js loads from cdn.segment.com with your write key, and a page call goes to api.segment.io.

- **After you withdraw measurement**: Before the reload, a call to trackSignup sends nothing.

Check that each browser destination on the source loads only under the permission that it needs.

[Open the full Segment guide](https://c15t.com/docs/integrations/segment)

## Related guides

- [Google Tag Manager](/integrations/google-tag-manager)

- [Hightouch](/integrations/hightouch)

- [RudderStack](/integrations/rudderstack)