Integrate PostHog for social media share tracking and add configuration

Author: TheMeinerLP

components/blog/SocialMediaShare.vue

@@ -23,8 +23,11 @@ const props = defineProps({
 // Function to track share events (for future PostHog integration)
 const trackShareEvent = (platform: string) => {
   // This function will be used for PostHog tracking in the future
-  // For now, it's just a placeholder
-  console.log(`Shared on ${platform}`);
+  posthog.capture('social_share', {
+    platform: platform,
+    url: props.url,
+    title: props.title
+  });
 };
 
 // Function to add tracking parameter for large pages

nuxt.config.ts

@@ -151,6 +151,8 @@ export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         siteUrl: 'https://blog.onelitefeather.net',
+        posthogPublicKey: 'phc_t9nBlYL9LcDj4LDKZfQ97m5nbvFDTugkdQqAAspfdI',
+        posthogHost: 'https://eu.i.posthog.com'
       }
     },
     site: {

package.json

@@ -29,5 +29,8 @@
     "unstorage": "^1.16.0",
     "vue": "^3.5.14",
     "vue-router": "^4.5.1"
+  },
+  "dependencies": {
+    "posthog-js": "^1.249.0"
   }
 }

plugins/posthog.client.js

@@ -0,0 +1,29 @@
+import { defineNuxtPlugin } from '#app'
+import posthog from 'posthog-js'
+export default defineNuxtPlugin(nuxtApp => {
+    const runtimeConfig = useRuntimeConfig();
+    const posthogClient = posthog.init(runtimeConfig.public.posthogPublicKey, {
+        api_host: runtimeConfig.public.posthogHost,
+        person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
+        capture_pageview: false, // we add manual pageview capturing below
+        loaded: (posthog) => {
+            if (import.meta.env.MODE === 'development') posthog.debug();
+        }
+    })
+
+    // Make sure that pageviews are captured with each route change
+    const router = useRouter();
+    router.afterEach((to) => {
+        nextTick(() => {
+            posthog.capture('$pageview', {
+                current_url: to.fullPath
+            });
+        });
+    });
+
+    return {
+        provide: {
+            posthog: () => posthogClient
+        }
+    }
+})