Use Posthog directly (#830)

Author: alexeyzimarev

docs/.vuepress/client.ts

@@ -4,6 +4,7 @@ import {onMounted} from "vue";
 import type {RouteLocationNormalized, Router} from "vue-router";
 import CloudBanner from "./components/CloudBanner.vue";
 import KapaWidget from './components/KapaWidget.vue';
+import {usePostHog} from "./lib/usePosthog";
 import UserFeedback from './components/TocWithFeedback';
 
 declare const __VERSIONS__: { latest: string, selected: string, all: string[] }
@@ -49,20 +50,15 @@ const reload = () => {
 }
 
 const leave = (to: RouteLocationNormalized, from: RouteLocationNormalized) => {
-    if (from.path !== to.path && typeof window !== "undefined" && window.analytics !== undefined) {
-        // const sessionId = (typeof window.posthog !== "undefined") ? window.posthog.getSessionId() : null;
-        window.analytics.track({
-            event: "$pageleave",
-            properties: {
-                $host: window.location.hostname,
-                // $session_id: sessionId
-            }
-        });
+    if (from.path !== to.path && typeof window !== "undefined") {
+        posthog.capture('$pageleave');
     }
 }
 
+const { posthog } = usePostHog();
+
 export default defineClientConfig({
-    enhance({app, router, siteData}) {
+    enhance({app, router, _}) {
         app.component("CloudBanner", CloudBanner);
         app.component("KapaWidget", KapaWidget);
         app.component("UserFeedback", UserFeedback);
@@ -118,18 +114,20 @@ export default defineClientConfig({
         router.afterEach((to, from) => {
             if (typeof window === "undefined" || to.path === from.path || removeHtml(to.path) === removeHtml(from.path)) return;
             const esData = findEsMeta(to);
+            posthog.capture('$pageview', {
+                site: "docs",
+                version: esData?.version,
+                category: esData?.category,
+            });
             const a = window.analytics;
             if (a) {
-                const sessionId = (typeof window.posthog !== "undefined") ? window.posthog.getSessionId() : null;
                 setTimeout(() => {
                     a.page({
                         site: "docs",
                         url: window.location.origin + to.fullPath,
                         title: to.meta.t,
                         version: esData?.version,
                         category: esData?.category,
-                        $host: window.location.hostname,
-                        $session_id: sessionId
                     });
                 }, 1000);
             }

docs/.vuepress/lib/usePosthog.ts

@@ -0,0 +1,14 @@
+import posthog from 'posthog-js';
+
+export function usePostHog() {
+    try {
+        posthog.init('phc_DeHBgHGersY4LmDlADnPrsCPOAmMO7QFOH8f4DVEVmD', {
+            api_host: 'https://phog.kurrent.io'
+        });
+    } catch (e) {
+    }
+
+    return {
+        posthog
+    }
+}

docs/.vuepress/public/js/snippet.js

@@ -83,20 +83,4 @@
     analytics._writeKey = "REDACTED";
     analytics.SNIPPET_VERSION = "5.2.1";
     analytics.load("REDACTED");
-
-    analytics.ready(() => {
-        window.posthog.init("phc_DeHBgHGersY4LmDlADnPrsCPOAmMO7QFOH8f4DVEVmD", {
-            api_host: 'https://phog.kurrent.io',
-            segment: analytics,
-            capture_pageview: false,
-            loaded: (posthog) => {
-                analytics.page({
-                    site: "docs",
-                    title: "Home",
-                    $host: window.location.hostname,
-                    // $session_id: posthog.getSessionId(),
-                })
-            }
-        });
-    })
 })();

package.json

@@ -12,7 +12,6 @@
     "@mdit/plugin-dl": "^0.13.0",
     "@types/fs-extra": "^11.0.4",
     "@types/markdown-it": "^14.1.1",
-    "@vuepress/plugin-watermark": "2.0.0-rc.27",
     "degit": "2.8.4",
     "del": "5.1.0",
     "dotenv": "10.0.0",
@@ -22,7 +21,7 @@
     "fs-extra": "^11.2.0",
     "markdown-it": "^14.1.0",
     "prettier": "2.3.2",
-    "sass": "^1.84.0",
+    "sass": "^1.86.0",
     "shx": "0.3.3",
     "stylus": "^0.56.0",
     "ts-pattern": "^5.4.0",
@@ -36,24 +35,25 @@
     "@segment/analytics-next": "^1.74.0",
     "@vuepress/bundler-vite": "2.0.0-rc.20",
     "@vuepress/helper": "^2.0.0-rc.80",
-    "@vuepress/plugin-docsearch": "^2.0.0-rc.76",
-    "@vuepress/plugin-google-analytics": "^2.0.0-rc.66",
-    "@vuepress/plugin-notice": "^2.0.0-rc.74",
-    "@vuepress/plugin-seo": "^2.0.0-rc.74",
-    "@vuepress/plugin-sitemap": "^2.0.0-rc.74",
+    "@vuepress/plugin-docsearch": "^2.0.0-rc.86",
+    "@vuepress/plugin-notice": "^2.0.0-rc.86",
+    "@vuepress/plugin-seo": "^2.0.0-rc.86",
+    "@vuepress/plugin-sitemap": "^2.0.0-rc.86",
+    "@vuepress/plugin-watermark": "^2.0.0-rc.86",
     "@vueuse/core": "^12.8.2",
     "bowser": "^2.11.0",
     "dashjs": "^4.7.4",
     "hls.js": "^1.5.14",
     "iconify-icon": "^2.1.0",
     "mermaid": "^11.4.0",
-    "sass-loader": "^15.0.0",
+    "posthog-js": "^1.232.7",
+    "sass-loader": "^16.0.5",
     "uglify-js": "^3.19.3",
-    "vue": "^3.4.30",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.0",
     "vuepress": "2.0.0-rc.20",
-    "vuepress-plugin-md-enhance": "^2.0.0-rc.71",
-    "vuepress-theme-hope": "^2.0.0-rc.74"
+    "vuepress-plugin-md-enhance": "^2.0.0-rc.75",
+    "vuepress-theme-hope": "^2.0.0-rc.75"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",