# Gainsight PX

The c15t gainsightPx helper loads Gainsight PX only after visitors allow measurement in Inth. On withdrawal, it turns the PX tag off through the PX config API and c15t reloads the page.

## Key facts

- **Tool:** Gainsight PX
- **Category:** Analytics
- **Consent categories:** Measurement
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/gainsight-px)
- [Gainsight PX](https://www.gainsight.com/product-experience/)

Run Gainsight PX analytics and in-app engagements under one consent choice. On withdrawal, c15t turns the PX tag off through the PX config API.

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 product key from Administration, then Products, in Gainsight PX.

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 Gainsight PX

The c15t gainsightPx helper creates no window.aptrinsic and requests no PX SDK before measurement has permission. The same gate covers product analytics and in-app engagements.

After permission, the helper builds the PX queue, turns the tag on and loads the SDK. If you pass user, it queues identify too.

On withdrawal, the helper sends aptrinsic('config', 'enableTag', false) and then a reset. Gainsight says that enableTag: false stops PX cookies, network calls and engagements.

Use category to pick a different consent category, such as experience. c15t owns enableTag, so do not set it in config.

[Read the Gainsight PX config API guide](https://support.gainsight.com/PX/API_for_Developers/02Usage_of_Different_APIs/Use_Config_API)

## Installation

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

### Wait for permission

No request goes to Gainsight PX until the visitor accepts measurement. On withdrawal, the helper turns the PX tag off.

```ts
gainsightPx({ productKey })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then Gainsight PX 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 the PX SDK.

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

#### Add your product key

The helper sends the product key to the PX loader. Pass config, user and account with JSON values only.

```
import { gainsightPx } from '@c15t/integrations/gainsight-px';

export const scripts = [gainsightPx({ productKey: 'AP-PRODUCT-KEY-2' })];
```

An empty product key logs an error, and PX does not load. A change of productKey or config after PX starts throws an error. Reload the page to change them.

### 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 old PX snippet and each tag manager copy, so PX loads only through c15t. Keep reloadOnConsentRevoked on, because the reload stops PX timers and listeners.

## Verify your setup

Use a private window with an opt-in policy. Open DevTools Network and Application, and filter by aptrinsic. Then test the three states.

- **Before a choice**: No request goes to web-sdk.aptrinsic.com or esp.aptrinsic.com. There is no window.aptrinsic and no apt.uid or apt.sid storage.

- **After you allow measurement**: The PX SDK loads without a page reload. Your PX product gets the events that you expect.

- **After you withdraw measurement**: Save your choice. c15t reloads the page. The new page sends no request to Gainsight PX.

c15t does not gate PX calls in other parts of your app. Call identify after a login only while the visitor still gives permission.

[Open the full Gainsight PX guide](https://c15t.com/docs/integrations/gainsight-px)

## Related guides

- [Heap](/integrations/heap)

- [Mixpanel](/integrations/mixpanel-analytics)

- [Pendo](/integrations/pendo)