Set up › Install

Send PostHog (web) data to Sequential

Keep posthog-js and point it at Sequential: your Sequential PostHog ingest key as the project token, and Sequential's API URL as api_host.

Install with your AI agent

Copy a complete instruction for a coding agent (Claude Code, Cursor, Copilot…) with your repo open. It says how to find an existing install, what to change, and how to check events arrive, and it includes this page.

Keys are placeholders; the agent will ask for them. Sign in to fill in your project's keys.

On this page

Sequential speaks the PostHog wire protocol, so nothing in your tracking code changes. capture, identify and autocapture keep working. Pick one of the three paths below.

Already using PostHog

Do not add a second copy. Find the posthog.init(…) call you already have — in your code, or in your PostHog tag's settings — and change two values: the project token and api_host. A tag-manager template has fields for both.

js
posthog.init('YOUR_POSTHOG_INGEST_KEY', { api_host: 'https://api.usesequential.com' });

Keep every other option you pass (person_profiles, capture_pageview, consent settings…). Remove a ui_host if you set one, because it points at PostHog’s app. If the init reads the token and host from environment variables, change the variables instead of the code.

New install: npm (bundled apps)

For React, Vue, Svelte, Next.js and other bundled apps. Install the package, then initialise it once, in browser-only code, as early as possible.

sh
npm install posthog-js
js
import posthog from 'posthog-js';

posthog.init('YOUR_POSTHOG_INGEST_KEY', { api_host: 'https://api.usesequential.com' });

The bundle is built by your own toolchain, so it is part of your supply chain. posthog-js still fetches a few optional modules at runtime from the API URL, which is why the Content-Security-Policy section below applies to this path too.

New install: script tag (plain HTML, tag managers)

Everything in one block: it loads the SDK from Sequential's CDN — no third-party origin in your page — and points it at Sequential. Paste it once into your site's <head>, or into a Google Tag Manager Custom HTML tag that fires on All Pages. Nothing else to change.

html
<!-- Sequential · analytics (PostHog SDK, served by Sequential) -->
<script>
  (function (d, api, key) {
    var s = d.createElement('script');
    s.src = 'https://cdn.usesequential.com/sdk/posthog-js/1.434.7/array.js';
    s.integrity = 'sha384-wgJLtT/T2y1y9sWIfzkTFpbeBdVyOiLVxN+ydM91CMYgsgb8UFbabiK3Tyba8dQj'; s.crossOrigin = 'anonymous'; s.async = true;
    s.onload = function () { posthog.init(key, { api_host: api }); };
    d.head.appendChild(s);
  })(document, 'https://api.usesequential.com', 'YOUR_POSTHOG_INGEST_KEY');
</script>

What is supported

What Sequential does with PostHog (web) traffic
CapabilitySupportNotes
Custom eventsYesposthog.capture(name, props); properties are kept.
Page / screen viewsYes$pageview, including SPA navigation.
Autocaptured clicks & formsYesClicks, form submits, rage clicks and dead clicks.
Identify (user id)Yesposthog.identify(id); the user id comes from distinct_id.
User propertiesPartial$set / $set_once are kept on the event but not stored as user properties.
Groups / accountsNoposthog.group() is accepted; $groups stays an event property, no accounts.
ErrorsPartial$exception events sent with captureException are kept; exception autocapture is switched off by remote config.
Session replayPartialPostHog's own web recording is off (remote config). Add Sequential's recorder: it joins PostHog's session id automatically.
DevTools: errors, console, network, performanceYesCaptured by Sequential's recorder once the session-replay line is on the page. captureException events and $web_vitals also show in the replay's DevTools drawer.
Feature flags, surveys, experimentsNoRemote config turns flags, surveys and heatmaps off; /flags and /decide have no route. Flags evaluate as off.
Server-side SDKsNoBrowser and PostHog mobile SDKs only. Server-side SDK user agents are rejected as bots (403).

Feature flags evaluate as off: Sequential tells posthog-js that flags, surveys, heatmaps and PostHog’s own web recording are switched off, so code behind isFeatureEnabled / getFeatureFlag takes its default path. If the app relies on PostHog flags or surveys, stop and tell the user before switching: they stop working once posthog-js points at Sequential.

Add session replay (optional)

Optional, one line. The recorder picks up PostHog's session and user ids on its own, so every event above lands on the replay timeline. Put it on every page you want to replay, after the SDK. What it records and masks is set per project in Sequential (Settings → Projects → Session replay), not in the page. See Session replay.

html
<script src="https://api.usesequential.com/rec/recorder.js/YOUR_REPLAY_INGEST_KEY"></script>

Content-Security-Policy

Only if the site sets a Content-Security-Policy. Add these origins to the directives it already has; do not replace them.

text
script-src https://api.usesequential.com https://cdn.usesequential.com
connect-src https://api.usesequential.com

Check it works

  1. Load a page of the site in a normal browser (headless and automated browsers are rejected as bots) and open the network panel.
  2. Look for requests to the Sequential API URL that answer 2xx. A 401 means the key is wrong, or belongs to another source (every key works with one SDK only). A 403 means the request looked like a bot.
  3. In Sequential, Settings → Projects → Setup shows your source as "receiving" once its first event arrives. Until then, the Sequential SDK and session replay read "no events yet", and another source's line does not show. The page checks again every few seconds for 5 minutes after you open it. After that, reload it. The first event can take up to about a minute to appear.

More in Check your install.