Analytics

Hightouch

Hightouch Events collects customer behavior from websites and sends it into Hightouch for warehouse-backed analytics, activation, and real-time workflows. The hightouch() helper creates Hightouch's window.htevents queue, records the write key and optional API host for the standalone loader, optionally queues the initial page() call, and loads the browser SDK when measurement consent is available.

Integrate with c15t

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { hightouch } from '@c15t/scripts/hightouch';

const scripts = [
  hightouch({
    writeKey: 'WRITE_KEY',
    apiHost: 'us-east-1.hightouch-events.com',
  }),
];

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

How c15t loads it

  • Category: measurement (Analytics)
  • Loads when: measurement consent is granted
  • On revocation: unloaded - c15t removes the script element it created. The window.htevents runtime object is left in place until the next page load (c15t reloads the page on revocation by default), so treat the load gate as the consent boundary.

The helper maps Hightouch's browser snippet into the manifest engine:

hightouch({
  writeKey: 'WRITE_KEY',
  apiHost: 'us-east-1.hightouch-events.com',
});

It creates window.htevents, defines the official queue methods, queues:

window.htevents.load('WRITE_KEY', {
  apiHost: 'us-east-1.hightouch-events.com',
});
window.htevents.page();

and loads:

https://cdn.hightouch-events.com/browser/release/v1-latest/events.min.js

writeKey is required and must be a non-empty string after trimming. apiHost is optional; Hightouch's SDK defaults to us-east-1.hightouch-events.com, so pass it only when your Event Source uses another region or a first-party tracking host.

Configure page tracking

By default the helper queues htevents.page() before the vendor bundle loads. If you want to handle page views yourself, set trackPageView to false.

import { hightouch } from '@c15t/scripts/hightouch';

hightouch({
  writeKey: 'WRITE_KEY',
  trackPageView: false,
});

To proxy or self-host the loader, pass a custom URL:

hightouch({
  writeKey: 'WRITE_KEY',
  scriptUrl: 'https://analytics.example.com/events.min.js',
});

c15t blocks the Hightouch SDK from loading until measurement consent is granted and unloads it on revocation. Hightouch does not expose a browser API that prevents collection while loaded — the SDK writes identifiers and delivers events to Hightouch as soon as it runs — so gating the load is the only default that reliably honors missing or denied consent. See the RudderStack consent notes for the full reasoning behind this model versus vendor consent-API mapping (as used for Google Tag Manager).

Tracking events in your app

c15t gates the Hightouch browser SDK from loading until measurement consent is granted. Your application code that calls Hightouch's runtime API (window.htevents.track, identify, etc.) is not automatically gated - window.htevents does not exist until c15t initializes the integration, so unguarded calls made before that (or while consent is denied) throw. Once the integration is initialized with consent, early calls queue normally until the SDK finishes loading.

Guard event calls by checking consent state. From React:

import { useCallback } from 'react';
import { useConsentManager } from '@c15t/react';

function SignupExample() {
  const { has } = useConsentManager();

  const trackSignup = useCallback(() => {
    if (has('measurement')) {
      window.htevents?.track('Signup Completed', { plan: 'pro' });
    }
  }, [has]);
}

From plain JavaScript:

import { getOrCreateConsentRuntime } from 'c15t';

const { consentStore } = getOrCreateConsentRuntime();

if (consentStore.getState().has('measurement')) {
  window.htevents?.track('Signup Completed', { plan: 'pro' });
}

Types

HightouchOptions

Warning: ExtractedTypeTable: Could not extract "HightouchOptions" from "./packages/scripts/src/vendors/analytics/hightouch.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…

Script

Warning: ExtractedTypeTable: Could not extract "Script" from "./packages/core/src/libs/script-loader/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…