diff --git a/package-lock.json b/package-lock.json index 6c6ef39f7a..69f25148a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -102,6 +102,7 @@ "openapi-types": "^12.1.3", "p-map": "^4.0.0", "pkg-dir": "^5.0.0", + "posthog-js": "^1.194.6", "probe-image-size": "^7.2.3", "promise-polyfill": "^8.2.1", "query-string": "^7.1.1", @@ -20743,6 +20744,16 @@ "resolved": "https://registry.npmjs.org/copy-to/-/copy-to-2.0.1.tgz", "integrity": "sha512-3DdaFaU/Zf1AnpLiFDeNCD4TOWe3Zl2RZaTzUvWiIk5ERzcCodOE20Vqq4fzCbNoHURFHT4/us/Lfq+S2zyY4w==" }, + "node_modules/core-js": { + "version": "3.39.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz", + "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", @@ -24152,6 +24163,11 @@ "pend": "~1.2.0" } }, + "node_modules/fflate": { + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz", + "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==" + }, "node_modules/figgy-pudding": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", @@ -39238,10 +39254,21 @@ "node": ">=0.10.0" } }, + "node_modules/posthog-js": { + "version": "1.194.6", + "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.194.6.tgz", + "integrity": "sha512-5g5n7FjWLha/QWVTeWeMErGff21v4/V3wYCZ2z8vAbHaCyHkaDBEbuM756jMFBQMsq3HJcDX9mlxi2HhAHxq2A==", + "dependencies": { + "core-js": "^3.38.1", + "fflate": "^0.4.8", + "preact": "^10.19.3", + "web-vitals": "^4.2.0" + } + }, "node_modules/preact": { - "version": "10.11.0", - "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.0.tgz", - "integrity": "sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==", + "version": "10.25.1", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.1.tgz", + "integrity": "sha512-frxeZV2vhQSohQwJ7FvlqC40ze89+8friponWUFeVEkaCfhC6Eu4V0iND5C9CXz8JLndV07QRDeXzH1+Anz5Og==", "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" @@ -49199,6 +49226,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/web-vitals": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz", + "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==" + }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", diff --git a/package.json b/package.json index d716bc596d..20a247cda7 100644 --- a/package.json +++ b/package.json @@ -183,6 +183,7 @@ "openapi-types": "^12.1.3", "p-map": "^4.0.0", "pkg-dir": "^5.0.0", + "posthog-js": "^1.194.6", "probe-image-size": "^7.2.3", "promise-polyfill": "^8.2.1", "query-string": "^7.1.1", diff --git a/src/hooks/use-posthog-analytics.ts b/src/hooks/use-posthog-analytics.ts index 4f5935fd05..01c6acc2a7 100644 --- a/src/hooks/use-posthog-analytics.ts +++ b/src/hooks/use-posthog-analytics.ts @@ -5,10 +5,14 @@ import { useEffect } from 'react' import { useRouter } from 'next/router' +import { type PostHog } from 'posthog-js' declare global { + /* + Loaded via a posthog script tag in GTM based on datagrail consent + */ interface Window { - posthog?: $TSFixMe + posthog?: PostHog } } @@ -17,7 +21,7 @@ function onRouteChangeComplete() { * PostHog automatically captures a `pageview` for initial page loads. * Subsequent client-side navigation events have to be captured manually, * which is why we have to set up this `onRouteChangeComplete` event. - * + * * PostHog documentation for capturing pageviews in SPA with the JS web installation: * https://posthog.com/docs/libraries/js#single-page-apps-and-pageviews */ @@ -33,7 +37,9 @@ export default function usePostHogPageAnalytics(): void { useEffect(() => { // Ensures code only runs if PostHog has been initialized - if (!window?.posthog?.capture) return + if (!window?.posthog) return + + window.posthog.config.capture_pageview = false // Record a pageview when route changes router.events.on('routeChangeComplete', onRouteChangeComplete)