From 1d97e7dc4025f80117c3e6dcfbfedcea53ee3e33 Mon Sep 17 00:00:00 2001 From: Dhenain Ambroise Date: Sun, 3 Apr 2022 17:31:11 +0200 Subject: [PATCH] Add PostHog analytics --- .env.example | 5 ++++- lib/config.ts | 18 +++++++++++++++--- package.json | 1 + pages/_app.tsx | 25 ++++++++++++++++++++----- readme.md | 10 +++++++++- yarn.lock | 24 ++++++++++++++++++++++++ 6 files changed, 73 insertions(+), 10 deletions(-) diff --git a/.env.example b/.env.example index 0b3a692..d8fb460 100644 --- a/.env.example +++ b/.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' \ No newline at end of file +#REDIS_NAMESPACE='preview-images' diff --git a/lib/config.ts b/lib/config.ts index 7284330..920bc89 100644 --- a/lib/config.ts +++ b/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 diff --git a/package.json b/package.json index a0d0f75..c0efa0f 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index bc6fece..19ad4c3 100644 --- a/pages/_app.tsx +++ b/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]) diff --git a/readme.md b/readme.md index 6ab1c0f..f7e47a0 100644 --- a/readme.md +++ b/readme.md @@ -107,7 +107,7 @@ Every notion block gets its own unique classname, so you can target individual b ## Dark Mode

- Light Mode + Light Mode         Dark Mode

@@ -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)! diff --git a/yarn.lock b/yarn.lock index 7be1eef..5d54307 100644 --- a/yarn.lock +++ b/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 @@ postcss@8.4.5: picocolors "^1.0.0" source-map-js "^1.0.1" +posthog-js@1.20.2: + 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"