PostHog Device Mode Integration

Send events to PostHog using RudderStack web device mode.

3 minute read

RudderStack lets you send your event data to PostHog via device mode using the native web SDK.

Prerequisites

RudderStack JavaScript SDK integrated with your website.
An active PostHog account and project.

Identify

To identify a user in PostHog, use the identify call:

rudderanalytics.identify("1hKOmRA4GRlm", {
  name: "Alex Keener",
  first_name: "Alex",
  last_name: "Keener",
  email: "alex@example.com",
  createdAt: "2019-07-23T23:45:56.000Z",
})

RudderStack passes the user traits within the identify call to PostHog under the $set key according to the PostHog Identify API.

Track

RudderStack’s track call lets you capture the user events along with their associated properties and send this data to PostHog.

A sample track call is shown below:

rudderanalytics.track("Order Completed", {
  checkout_id: "C324532",
  order_id: "T1230",
  revenue: 16.98,
  shipping: 3.0,
  coupon: "FY21",
  currency: "INR",
  products: [
    {
      product_id: "product-mixedfruit-jam",
      sku: "sku-1",
      category: "Food",
      currency: "INR",
      value: 6.0,
      typeOfProduct: "Food",
      url: "https://www.example.com/product/bacon-jam",
      image_url: "https://www.example.com/product/bacon-jam.jpg",
    },
  ],
})

PostHog supports the RudderStack track call as type capture. and sends the user action as an event to PostHog according to the PostHog Capture API.

Page

The page call lets you record your app’s page views with any additional relevant information about the viewed page.

A sample page call is shown below:

rudderanalytics.page({
  path: "/best-seller/1",
  url: "https://www.estore.com/best-seller/1",
  title: "EStore Bestsellers",
  search: "estore bestseller",
  referrer: "https://www.google.com/search?q=estore+bestseller",
})

In the above example, RudderStack captures information related to the viewed page such as its path, URL, referrer, etc.

For the page call, RudderStack sends $pageview as an event to PostHog according to the PostHog Page API.

Group

You can use the group call to associate an identified user with a group, such as a company, organization, or an account.

It is mandatory to include groupId and groupType in your group calls to create or update the group details.

A sample group call is shown below:

rudderanalytics.group("group01", {
  groupType: "Lead",
  name: "Sample Group",
  total: 100
});

If you pass name in the group traits, then the group is created in PostHog with that name. Otherwise, it is created by the groupId.

RudderStack removes the groupType field from the traits and passes them to PostHog as the group properties.

In device mode, RudderStack calls the group analytics function to create a group in PostHog. It also uses the PostHog Super Properties to assign the group to an identified user.

The traits mapping is summarized in the following table:

RudderStack group trait	Updated group mapping disabled	Updated group mapping enabled
`groupId` Required	`groupId`	`$group_key`
`groupType` Required	`groupType`	`$group_type`

Property mappings

RudderStack also maps the following properties to the PostHog standard contextual properties:

RudderStack field	PostHog field
`context.os.name`	`$os`
`context.page.url`	`$current_url`
`url`	`$host`
`context.page.path`	`$pathname`
`context.screen.height`	`$screen_height`
`context.screen.width`	`$screen_width`
`context.library.name`	`$lib`
`context.library.version`	`$lib_version`
`timestamp` `originalTimestamp`	`$time`
`context.device.id`	`$device_id`
`request_ip` `context.ip`	`$ip`
`timestamp` `originalTimestamp`	`$timestamp`
`anonymousId`	`$anon_distinct_id`
`userId` `anonymousId`	`distinct_id`
`context.screen.density`	`$screen_density`
`context.device.manufacturer`	`$device_manufacturer`
`context.os.version`	`$os_version`
`context.timezone`	`$timezone`
`context.locale`	`$locale`
`context.userAgent`	`$useragent`
`context.app.version`	`$app_version`
`context.device.name`	`$device_name`
`context.network.carrier`	`$network_carrier`
`context.app.name`	`$app_name`
`context.device.model`	`$device_model`
`context.app.namespace`	`$app_namespace`
`context.app.build`	`$app_build`
`properties.viewport_height`	`$viewport_height`
`properties.viewport_width`	`$viewport_width`
`context.page.loaded`	`$performance_page_loaded`
`context.campaign.source`	`utm_source`
`context.campaign.medium`	`utm_medium`
`context.campaign.name`	`utm_campaign`
`context.campaign.content`	`utm_content`
`context.campaign.term`	`utm_term`

The PostHog SDK autogenerates the property $insert_id when you send event via the RudderStack device mode.

FAQ

How can I prevent RudderStack from loading the PostHog SDK on my website?

To prevent RudderStack from loading the PostHog SDK on your website, you can load the JavaScript SDK as shown:

rudderanalytics.load("WRITE_KEY", "DATA_PLANE_URL", {
  integrations: {
    All: true,
    PostHog: {
      loadIntegration: false,
    },
  },
});

How do I set the RudderStack event’s `anonymousId` as the PostHog `anonymous_id`?

To set anonymousId in your RudderStack event as the PostHog anonymous_id, call PostHog’s identify function using the RudderStack anonymousId.

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.

Questions? Contact us by Email or on Slack