Suggestion: Posthog [analytics]

[alexcroox]

Docs: https://posthog.com/docs/libraries/js

For reference this is how I currently instrument it:

import { Capacitor } from '@capacitor/core'
import { posthog } from 'posthog-js'
import { appVersion } from '~/shared/version'

export default defineNuxtPlugin({
  name: 'analytics',
  setup() {
    if (import.meta.env.TEST) {
      return
    }

    const config = useRuntimeConfig()
    const router = useRouter()

    if (config.public.analyticsReportingEnabled) {
      posthog.init(config.public.posthog.dsn, {
        capture_pageview: false,
        capture_pageleave: true,
        api_host: config.public.posthog.apiHost,
        disable_session_recording: true,
        advanced_disable_decide: true,
        advanced_disable_feature_flags: true,
        advanced_disable_feature_flags_on_first_load: true,
        enable_recording_console_log: false,
        autocapture: false
      })

      posthog.register({
        environment: config.public.appEnvironment,
        countryCode: config.public.appCountryCode,
        release: appVersion,
        platform: Capacitor.getPlatform(),
        native: Capacitor.isNativePlatform()
      })

      router.afterEach(to => {
        posthog.capture('$pageview', {
          $current_url: to.fullPath
        })
      })
    }

    return {
      provide: {
        analytics: posthog
      }
    }
  }
})

and after the user has logged in or we detect they are already logged in on page load:

this.analytics.identify(userId, {
  email
  roles
})

Thanks!

[alexcroox]

This button brought me here, on reflection this should be in the discussions?

[toniengelhardt]

Small improvement suggestions for instantiation.

Override $pathname to use dynamic route names and capture $pageleave events.

// Init
posthog.init(apiKey, {
  api_host: apiHost,
  ui_host: uiHost,
  person_profiles: 'identified_only',
  capture_pageview: false,
  capture_pageleave: false,
})

// Plugin
export default defineNuxtPlugin({
  name: 'posthog',
  enforce: 'pre',
  setup: async () => {
    const router = useRouter()
    router.afterEach((to, from) => {
      // Track page view events.
      usePosthogEvent('$pageview', {
        $current_url: to.fullPath,
        $pathname: to.matched[0]!.path, // properly capture dynamic routes
      })
      // Track page leave events.
      // Make sure that to and from are not the same.
      // This happens on initial page load.
      if (from.fullPath && from.fullPath !== to.fullPath)
        usePosthogEvent('$pageleave', {
          $current_url: from.fullPath,
          $pathname: from.matched[0]!.path,
        })
    })
  },
})

This might be better served with a module though?

[harlan-zw]

Thank you for the suggestion, seems like a popular one so will likely implement when I'm doing next round of scripts.

I've added it to #177 so will close this to make tracking easier for myself.