Customer.io

Customer.io collects events and visitor identity on your site through its Data Pipelines JavaScript source, for use in its messaging. The c15t customerIo helper waits for marketing consent before it creates the cioanalytics global or downloads the SDK.

When the visitor withdraws, the helper calls cioanalytics.reset() to clear the stored identity, and c15t reloads the page. reset() is not an opt-out. The reload is what stops the SDK.

Configure Customer.io

Create a JavaScript source in Customer.io Data Pipelines and copy its write key. Note the region of your workspace. Then remove the original Customer.io snippet from your site, so that c15t controls when it loads.

npm install @c15t/integrations

pnpm add @c15t/integrations

yarn add @c15t/integrations

bun add @c15t/integrations

import { customerIo } from '@c15t/integrations/customer-io';

export const scripts = [customerIo({ writeKey: 'YOUR_WRITE_KEY' })];

Register the scripts

Complete your framework quickstart first. Keep its Inth endpoint, policy, styles and consent UI. Remove the vendor's original script, SDK initializer or tag-manager entry, so the vendor loads only through c15t.

The vendor pages put the helper in src/consent-scripts.ts. If your framework quickstart already has a scripts array, such as the one in c15t.config.ts in the Next.js guide, add the helper to that array instead of creating a second file. The scripts export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration point for your framework below. These are edits to that provider, not a second provider.

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

export default defineConsentConfig({ scripts });

Options

Use a proxy

Set cdnUrl to your proxy's HTTP(S) origin. The helper trims whitespace and trailing slashes. Any path, query, fragment or credentials, or a value without a scheme, throws customerIo: cdnUrl must be an HTTP(S) origin. cdnUrl sets cioanalytics._cdn as well as the default loader URL, so source settings and SDK files come from your proxy too. The proxy must keep Customer.io's paths and forward to the source's regional host. A scriptUrl override alone doesn't change where the SDK loads its files from.

cdnUrl doesn't move collected events. To proxy Data Pipelines events, set apiHost for the Customer.io Data Pipelines integration in loadOptions to your collection proxy host plus /v1, without a scheme, and set protocol to https:

import { customerIo } from '@c15t/integrations/customer-io';

export const proxiedScripts = [
	customerIo({
		cdnUrl: 'https://analytics.example.com',
		loadOptions: {
			integrations: {
				'Customer.io Data Pipelines': {
					apiHost: 'collect.example.com/v1',
					protocol: 'https',
				},
			},
		},
		writeKey: 'YOUR_WRITE_KEY',
	}),
];

Replace both example domains with your own proxies. Neither option redirects traffic that destinations send themselves. Configure each destination separately where it supports a proxy.

Loading and revocation

After consent, the helper creates Customer.io's array queue and method stubs, sets _writeKey, _cdn and _loadOptions, and loads the SDK. The script element carries the namespace attribute Customer.io requires. If the page already has a loaded cioanalytics, the helper keeps it.

The helper sends the first page() call itself, once the SDK has loaded and consent is still granted, and again on each new grant after that. That's why it forces initialPageview to false. It copies loadOptions, so your object stays unchanged. It doesn't wait for ready(), because a destination can fail to initialize and some destinations need page() before they can start. A revoked or disposed loader doesn't send a pending first page view.

While the SDK downloads, each method stub returns the same cioanalytics queue. Calls such as cioanalytics.identify('customer-123').track('Signed up') queue both calls in order. cioanalytics is undefined before consent, so check marketing consent before your own code calls it.

On withdrawal, the helper calls reset() to clear identity. That doesn't stop the SDK, its retries or destination SDKs from sending, so keep reloadOnConsentRevoked enabled. The SDK loads once per page. A new grant on the same page reuses it instead of adding another copy. On the next page, while marketing is denied, the helper creates no queue and makes no vendor requests.

Cookies and storage

Customer.io can use analytics identity cookies and localStorage keys including ack, reclaimStart, reclaimEnd, inProgress and queue. Destinations can add storage of their own. reset() doesn't erase all destination data.

Verify Customer.io

Filter the Network panel by customer.io, or by your proxy's domain. Before consent, and after you allow an unrelated category, check that there is no snippet request, no cioanalytics global and no vendor cookies or browser storage. Allow marketing and check that the SDK initialized. Withdraw marketing and confirm the page reloads and the next page stays quiet. A 200 JSON response for an invalid write key doesn't prove the SDK initialized.

With a proxy, check that the snippet, /v1/projects/<writeKey>/settings and the SDK files come from the CDN proxy. Check event collection separately against the apiHost you set. A successful load doesn't prove that events reach your workspace or destinations.

Sources: Customer.io's JavaScript source, in-app snippet, proxy setup and utility methods.

Test in a private window with an opt-in policy. Open DevTools Network, disable the cache and filter by the vendor's domain:

1. Load the page. No request goes to the vendor before you choose.
2. Click Reject, then reload. There is still no vendor request.
3. Open Privacy settings and allow the helper's category. The vendor script loads without a page reload.
4. Turn the category off again and save. c15t reloads the page, and the new page makes no vendor request.

c15t reloads on revocation because removing a script element does not stop code that already ran. The vendor's listeners, timers and queued events stay alive until the page unloads. If you set reloadOnConsentRevoked: false, stop the vendor yourself. Register a callback-only script whose onConsentChange calls the vendor's opt-out API, as shown in custom integrations, and check the permission before each of your own event calls. The reload does not delete cookies the vendor already set; see clear on revocation for your framework.

The helper lists its vendor by name in the preference dialog, so a visitor can turn it off inside an allowed category. See vendor consent for your framework. The consent verification guide covers navigation, expiry and hosting checks.