Add PostHog analytics

.env.example

@@ -10,6 +10,9 @@
 # Optional (for fathom analytics)
 #NEXT_PUBLIC_FATHOM_ID=
 
+# Optional (for PostHog analytics)
+#NEXT_PUBLIC_POSTHOG_ID=
+
 # Optional (for rendering tweets more efficiently)
 #TWITTER_ACCESS_TOKEN=
 
@@ -18,4 +21,4 @@
 #REDIS_HOST=
 #REDIS_PASSWORD=
 #REDIS_USER='default'
-#REDIS_NAMESPACE='preview-images'
+#REDIS_NAMESPACE='preview-images'

lib/config.ts

@@ -6,8 +6,10 @@
  */
 
 import { parsePageId } from 'notion-utils'
-import { getSiteConfig, getEnv } from './get-config-value'
-import { PageUrlOverridesMap, PageUrlOverridesInverseMap } from './types'
+import posthog from 'posthog-js'
+import { getEnv, getSiteConfig } from './get-config-value'
+import { PageUrlOverridesInverseMap, PageUrlOverridesMap } from './types'
+import Config = posthog.Config
 
 export const rootNotionPageId: string = parsePageId(
   getSiteConfig('rootNotionPageId'),
@@ -119,13 +121,23 @@ export const api = {
 // ----------------------------------------------------------------------------
 
 export const fathomId = isDev ? null : process.env.NEXT_PUBLIC_FATHOM_ID
-
 export const fathomConfig = fathomId
   ? {
       excludedDomains: ['localhost', 'localhost:3000']
     }
   : undefined
 
+// PostHog automatically filters events coming from localhost
+export const postHogId = process.env.NEXT_PUBLIC_POSTHOG_ID
+export const postHogConfig: Config = {
+  // See https://posthog.com/docs/integrate/client/js#config
+  api_host: 'https://app.posthog.com',
+  loaded: (posthog_instance) => {
+    console.debug(`PostHog loaded`, posthog_instance)
+    // posthog_instance.identify(unique user id)
+  }
+}
+
 function cleanPageUrlMap(
   pageUrlMap: PageUrlOverridesMap,
   label: string

package.json

@@ -42,6 +42,7 @@
     "notion-utils": "^6.5.0",
     "p-map": "^5.3.0",
     "p-memoize": "^6.0.1",
+    "posthog-js": "1.20.2",
     "react": "^17.0.2",
     "react-body-classname": "^1.3.1",
     "react-dom": "^17.0.2",

pages/_app.tsx

@@ -30,7 +30,9 @@ import React from 'react'
 import { useRouter } from 'next/router'
 import { bootstrap } from 'lib/bootstrap-client'
 import { fathomId, fathomConfig } from 'lib/config'
+import { postHogId, postHogConfig } from 'lib/config'
 import * as Fathom from 'fathom-client'
+import posthog from 'posthog-js'
 
 if (typeof window !== 'undefined') {
   bootstrap()
@@ -41,17 +43,30 @@ export default function App({ Component, pageProps }) {
 
   React.useEffect(() => {
     function onRouteChangeComplete() {
-      Fathom.trackPageview()
+      if (fathomId) {
+        Fathom.trackPageview()
+      }
+      if (postHogId) {
+        // See https://posthog.com/docs/integrate/client/js#one-page-apps-and-page-views
+        posthog.capture('$pageview')
+      }
     }
 
     if (fathomId) {
       Fathom.load(fathomId, fathomConfig)
+    }
+    if (postHogId) {
+      console.debug(`PostHog loading with id "${postHogId}".`)
+      posthog.init(postHogId, postHogConfig)
+    }
+    if(!fathomId && !postHogId) {
+      console.debug('No Analytics id provided.')
+    }
 
-      router.events.on('routeChangeComplete', onRouteChangeComplete)
+    router.events.on('routeChangeComplete', onRouteChangeComplete)
 
-      return () => {
-        router.events.off('routeChangeComplete', onRouteChangeComplete)
-      }
+    return () => {
+      router.events.off('routeChangeComplete', onRouteChangeComplete)
     }
   }, [router.events])
 

readme.md

@@ -107,7 +107,7 @@ Every notion block gets its own unique classname, so you can target individual b
 ## Dark Mode
 
 <p align="center">
-  <img alt="Light Mode" src="https://transitive-bs.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F83ea9f0f-4761-4c0b-b53e-1913627975fc%2Ftransitivebullsh.it_-opt.jpg?table=block&id=ed7e8f60-c6d1-449e-840b-5c7762505c44&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2" width="45%"> 
+  <img alt="Light Mode" src="https://transitive-bs.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F83ea9f0f-4761-4c0b-b53e-1913627975fc%2Ftransitivebullsh.it_-opt.jpg?table=block&id=ed7e8f60-c6d1-449e-840b-5c7762505c44&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2" width="45%">
 &nbsp; &nbsp; &nbsp; &nbsp;
   <img alt="Dark Mode" src="https://transitive-bs.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc0839d6c-7141-48df-8afd-69b27fed84aa%2Ftransitivebullsh.it__(1)-opt.jpg?table=block&id=23b11fe5-d6df-422d-9674-39cf7f547523&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2" width="45%">
 </p>
@@ -142,6 +142,14 @@ To enable analytics, just add a `NEXT_PUBLIC_FATHOM_ID` environment variable, wh
 
 Note that this feature is completely optional.
 
+## PostHog Analytics
+
+[PostHog](https://posthog.com/) provides a lightweight **and open source** alternative to Google Analytics.
+
+To enable analytics, just add a `NEXT_PUBLIC_POSTHOG_ID` environment variable, which will only be used in production.
+
+Note that this feature is completely optional.
+
 ## Contributing
 
 See the [contribution guide](contributing.md) and join our amazing list of [contributors](https://github.com/transitive-bullshit/nextjs-notion-starter-kit/graphs/contributors)!

yarn.lock

@@ -420,6 +420,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@sentry/types@^6.11.0":
+  version "6.19.3"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.19.3.tgz#94b19da68d4d23561efb1014f72968bcea85cd0c"
+  integrity sha512-jHhqxp8MIWSfOc3krorirTGKTEaSFO6XrAvi+2AZhr6gvOChwOgzgrN2ZqesJcZmgCsqWV21u3usSwYeRrjOJA==
+
 "@sindresorhus/is@^4.0.0", "@sindresorhus/is@^4.6.0":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
@@ -1635,6 +1640,11 @@ fetch-blob@^3.1.2, fetch-blob@^3.1.4:
     node-domexception "^1.0.0"
     web-streams-polyfill "^3.0.3"
 
+fflate@^0.4.1:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -3071,6 +3081,15 @@ [email protected]:
     picocolors "^1.0.0"
     source-map-js "^1.0.1"
 
+[email protected]:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.20.2.tgz#f9debdc955ffe8e03e1004ded20df731affc3832"
+  integrity sha512-0HxG2aVObhGz6I98+N/tTZ0Azkus6vYPDS+TiDFO1UWx88QVzflcTAhybsBdhG0xfmghuC6jvFui73hjdimZeg==
+  dependencies:
+    "@sentry/types" "^6.11.0"
+    fflate "^0.4.1"
+    rrweb-snapshot "^1.1.7"
+
 prebuild-install@^6.1.2:
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-6.1.4.tgz#ae3c0142ad611d58570b89af4986088a4937e00f"
@@ -3516,6 +3535,11 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rrweb-snapshot@^1.1.7:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.13.tgz#fc15adb7eb6354c859c8d594f57b09e1f5bccdd8"
+  integrity sha512-lv4vBSJ5orBcRoJnjLvtly6cSsctC+TNm5orVzYRL9SH3LmtSpQ+wI4bw7eh4AcyKoUf0x4pe1Bn632GggmKWQ==
+
 rtl-css-js@^1.14.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.15.0.tgz#680ed816e570a9ebccba9e1cd0f202c6a8bb2dc0"