Skip to main content

Analytics

Marblism integrates Posthog for web (visitors, referrering domains) and product (user actions, session recordings) analytics.

Activation​

Posthog is activated by default.

Navigate to the tab Analytics to see the number of visitors, page views, top page paths and referring domains.

app.marblism.com
analytics-screenshot

Use your own Posthog​

Navigate to the tab Hosting and set the following environment variables:

PUBLIC_POSTHOG_KEY=YOUR_PUBLIC_KEY
PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

The analytics will then flow to your Posthog Dashboard.

Integration on old apps​

If your app was created before the 17th of Oct 2024, you will have to add the integration on your codebase. Here is how to do it.

1). Install Posthog

pnpm add posthog-js

2). Create a file app/plugins/analytics/client/index.tsx

import { Api } from '@/core/trpc'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { ReactNode, useEffect } from 'react'
import { Configuration } from '~/core/configuration'

type Props = {
  children: ReactNode
}

export const AnalyticsProvider = (props: Props) => {
  const { data, isLoading } = Api.configuration.getPublic.useQuery()

  useEffect(() => {
    const isProduction = Configuration.isProduction()
    const canActivate =
      typeof window !== 'undefined' && !isLoading && data && isProduction

    if (canActivate) {
      const key = data['PUBLIC_POSTHOG_KEY']
      const host = data['PUBLIC_POSTHOG_HOST']

      try {
        posthog.init(key, {
          api_host: host,
        })
      } catch (error) {
        console.log(`Could not start analytics: ${error.message}`)
      }
    }
  }, [data, isLoading])

  return <PostHogProvider client={posthog}>{props.children}</PostHogProvider>
}

3). Update app/root.tsx


export default function RootLayout({ children }: Props) {
  return (
     <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <DesignSystemProvider>
          <TrpcClient.Provider>
            <AnalyticsProvider>  // <---- Add AnalyticsProvider here
              <WorkspaceProvider>
                <UserProvider>
                  {children}
                </UserProvider>
              </WorkspaceProvider>
            </AnalyticsProvider>
          </TrpcClient.Provider>
        </DesignSystemProvider>

        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

5). Deploy your app.