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 1de837f..9cf5d36 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, { diff --git a/package.json b/package.json index f78f778..95f6d9e 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "notion-utils": "^6.7.0-alpha.1", "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..dd36c2c 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,28 @@ export default function App({ Component, pageProps }) { React.useEffect(() => { function onRouteChangeComplete() { - Fathom.trackPageview() + if (fathomId) { + Fathom.trackPageview() + } + if (postHogId) { + posthog.capture('$pageview') + } } if (fathomId) { Fathom.load(fathomId, fathomConfig) + } + if (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 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"