Remix

Last updated:

|Edit this page

PostHog makes it easy to get data about traffic and usage of your Remix app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more.

This guide walks you through integrating PostHog into your Remix app using the JavaScript Web SDK.

Installation

Install posthog-js using your package manager:

Terminal
yarn add posthog-js
# or
npm install --save posthog-js

Then, go to app/entry.client.tsx and initialize PostHog as a component. You'll need both your API key and instance address (you can find these in your project settings).

entry.client.tsx
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode, useEffect } from "react";
import { hydrateRoot } from "react-dom/client";
import posthog from "posthog-js";
function PosthogInit() {
useEffect(() => {
posthog.init('<ph_project_api_key>', {
api_host: 'https://us.i.posthog.com',
person_profiles: 'identified_only',
});
}, []);
return null;
}
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
<PosthogInit/>
</StrictMode>
);
});

Next steps

For any technical questions for how to integrate specific PostHog features into Remix (such as analytics, feature flags, A/B testing, surveys, etc.), have a look at our JavaScript Web SDK docs.

Alternatively, the following tutorials can help you get started:

Questions?

Was this page useful?

Next article

Retool

Objective Integrating PostHog with Retool. Why is this useful? Retool is a platform you can use to quickly build internal tools that leverage your data from different sources with little to no-code. Prerequisites To follow this tutorial along, you should: Have deployed PostHog . Have a Retool account Step-by-step instructions Retool app setup First, create a new app from the Retool dashboard: You will then need to create a new resource i.e. set up the configuration for where you'll pull the…

Read next article