From ff3fc413e0443ffb1c29137238fb79e102d6030c Mon Sep 17 00:00:00 2001 From: Clark Sell Date: Wed, 13 Dec 2023 08:38:16 -0600 Subject: [PATCH] feat: adding posthog --- package-lock.json | 20 ++++++++++++++++-- package.json | 3 ++- src/routes/+layout.server.js | 6 +++--- src/routes/+layout.svelte | 40 ++++++++++++++++++++++++++++++++++++ vercel.json | 8 +++++++- 5 files changed, 70 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9028156..de1197a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "thatconference.com", - "version": "5.1.12", + "version": "5.2.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "thatconference.com", - "version": "5.1.12", + "version": "5.2.3", "license": "GPL-3.0", "dependencies": { "@sentry/sveltekit": "^7.74.0" @@ -60,6 +60,7 @@ "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "postcss-load-config": "^4.0.1", + "posthog-js": "^1.95.1", "prettier": "^3.0.3", "prettier-plugin-svelte": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.6", @@ -4008,6 +4009,12 @@ "integrity": "sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==", "dev": true }, + "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==", + "dev": true + }, "node_modules/figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -7234,6 +7241,15 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/posthog-js": { + "version": "1.95.1", + "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.95.1.tgz", + "integrity": "sha512-79HPLoBqENBEEGFhn+hueKliYH66Qbu4WcRTEd8WaqtvqHrK9qAQkcrShZNkg1V5vM4kHp0iMIkJYBXg1sq06Q==", + "dev": true, + "dependencies": { + "fflate": "^0.4.1" + } + }, "node_modules/preact": { "version": "10.11.3", "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz", diff --git a/package.json b/package.json index 805e3cb..a89031f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "thatconference.com", - "version": "5.2.3", + "version": "5.2.4", "description": "THATConference.com website", "main": "index.js", "type": "module", @@ -78,6 +78,7 @@ "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "postcss-load-config": "^4.0.1", + "posthog-js": "^1.95.1", "prettier": "^3.0.3", "prettier-plugin-svelte": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.6", diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js index 1966731..3968fd7 100644 --- a/src/routes/+layout.server.js +++ b/src/routes/+layout.server.js @@ -9,7 +9,7 @@ const body = { variables: {} }; -async function queryMe(accessToken) { +async function queryMe(fetch, accessToken) { return await fetch(config.api.direct, { method: 'POST', headers: { @@ -25,7 +25,7 @@ async function queryMe(accessToken) { } export const load = loadFlashMessage(async (event) => { - let { locals } = event; + let { locals, fetch } = event; const auth0Session = await locals.getSession(); let user = { @@ -36,7 +36,7 @@ export const load = loadFlashMessage(async (event) => { }; if (user.isAuthenticated) { - user.profile = await queryMe(user.accessToken); + user.profile = await queryMe(fetch, user.accessToken); } locals.user = user; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index ab251ce..477a62e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,6 +7,7 @@ import { navigating, page, updated } from '$app/stores'; import { beforeNavigate } from '$app/navigation'; import { browser, dev } from '$app/environment'; + import posthog from 'posthog-js'; import lodash from 'lodash'; import * as Sentry from '@sentry/svelte'; @@ -29,6 +30,7 @@ const { isEmpty } = lodash; const flash = getFlash(page); + let currentPath = ''; beforeNavigate(({ willUnload, to, from }) => { // https://kit.svelte.dev/docs/configuration#version @@ -50,6 +52,17 @@ _hsq.push(['trackPageView']); } }); + + posthog.init('phc_g3DmFJkVOQwUMd3LIpvB6NEXfcoH64NLzM6se5Lra4', { + api_host: 'https://thatconference.com/ingest', + capture_pageview: false, + capture_pageleave: false, + loaded(ph) { + if (ph.isFeatureEnabled('enable-session-recording')) { + ph.config.disable_session_recording = false; + } + } + }); } onMount(() => { @@ -67,6 +80,26 @@ useDefaultLauncher: true }); } + if (typeof window !== 'undefined') { + const unsubscribePage = page.subscribe(($page) => { + if (currentPath && currentPath !== $page.url.pathname) { + posthog.capture('$pageleave'); + } + + currentPath = $page.url.pathname; + posthog.capture('$pageview'); + }); + + const handleBeforeUnload = () => { + posthog.capture('$pageleave'); + }; + window.addEventListener('beforeunload', handleBeforeUnload); + + return () => { + unsubscribePage(); + window.removeEventListener('beforeunload', handleBeforeUnload); + }; + } }); $: if (!isEmpty(data.user.profile)) { @@ -78,6 +111,13 @@ id }); + console.log('identify'); + posthog.identify(id, { + email, + firstName, + lastName + }); + let _hsq = (window._hsq = window._hsq || []); _hsq.push([ 'identify', diff --git a/vercel.json b/vercel.json index 9096c82..14fefdb 100644 --- a/vercel.json +++ b/vercel.json @@ -1,4 +1,10 @@ { + "rewrites": [ + { + "source": "/ingest/:path(.*)", + "destination": "https://app.posthog.com/:path*" + } + ], "headers": [ { "source": "/(.*)", @@ -17,5 +23,5 @@ } ] } - ] + ] }