From 1d97e7dc4025f80117c3e6dcfbfedcea53ee3e33 Mon Sep 17 00:00:00 2001 From: Dhenain Ambroise Date: Sun, 3 Apr 2022 17:31:11 +0200 Subject: [PATCH 1/4] 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" From b6977a97acd0baa5c3aa10f31c36b42c30875fc2 Mon Sep 17 00:00:00 2001 From: Dhenain Ambroise Date: Tue, 5 Apr 2022 11:07:39 +0200 Subject: [PATCH 2/4] Remove comments --- pages/_app.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index 19ad4c3..dd36c2c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -47,7 +47,6 @@ export default function App({ Component, pageProps }) { Fathom.trackPageview() } if (postHogId) { - // See https://posthog.com/docs/integrate/client/js#one-page-apps-and-page-views posthog.capture('$pageview') } } @@ -56,7 +55,6 @@ export default function App({ Component, pageProps }) { Fathom.load(fathomId, fathomConfig) } if (postHogId) { - console.debug(`PostHog loading with id "${postHogId}".`) posthog.init(postHogId, postHogConfig) } if(!fathomId && !postHogId) { From 9d6b861595de36f5c74438b037b2f152e2cd3927 Mon Sep 17 00:00:00 2001 From: Dhenain Ambroise Date: Tue, 5 Apr 2022 11:10:08 +0200 Subject: [PATCH 3/4] Use ^ version --- package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c0efa0f..751a2da 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "notion-utils": "^6.5.0", "p-map": "^5.3.0", "p-memoize": "^6.0.1", - "posthog-js": "1.20.2", + "posthog-js": "^1.20.2", "react": "^17.0.2", "react-body-classname": "^1.3.1", "react-dom": "^17.0.2", diff --git a/yarn.lock b/yarn.lock index 5d54307..f08ad40 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3081,7 +3081,7 @@ postcss@8.4.5: picocolors "^1.0.0" source-map-js "^1.0.1" -posthog-js@1.20.2: +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== From 3cd86a8d3d4d4425bc8806670d6bb5bf25a6c6c0 Mon Sep 17 00:00:00 2001 From: Dhenain Ambroise Date: Tue, 5 Apr 2022 11:25:13 +0200 Subject: [PATCH 4/4] Update yarn.lock (fix conflict) --- yarn.lock | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/yarn.lock b/yarn.lock index a36c69b..02ba628 100644 --- a/yarn.lock +++ b/yarn.lock @@ -433,6 +433,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@sentry/types@^6.11.0": + version "6.19.4" + resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.19.4.tgz#4e13269daaba2edfeaa4b18a5a14fa8f4d7a85a8" + integrity sha512-fzLiQPrjJQ8HgFgA2VqnpLiEOrTJ2ItRY8RY7Cn4038HACoYWYDjrkdVJQBq6IyrxxkgWOSLZXnv85uozBQC+g== + "@sindresorhus/is@^4.0.0", "@sindresorhus/is@^4.6.0": version "4.6.0" resolved "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz" @@ -1643,6 +1648,11 @@ fathom-client@^3.4.1: resolved "https://registry.npmjs.org/fathom-client/-/fathom-client-3.4.1.tgz" integrity sha512-iQFKx9B9RDeGLzgNqsaXWg3Fvu7yfq1Z8GjpAG3DP8IoGoPRWOOktpM7DUKiUzoE3d37hdvDQvkqUHfNzVwimg== +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.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz" @@ -3056,6 +3066,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.npmjs.org/prebuild-install/-/prebuild-install-6.1.4.tgz" @@ -3496,6 +3515,11 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" +rrweb-snapshot@^1.1.7: + version "1.1.14" + resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc" + integrity sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ== + rtl-css-js@^1.14.0: version "1.15.0" resolved "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.15.0.tgz"