Enhance social media sharing with PostHog tracking and alternative title support

Author: TheMeinerLP

components/blog/SocialMediaShare.vue

@@ -17,17 +17,22 @@ const props = defineProps({
     default: false
   }
 });
+const { $clientPosthog, $serverPosthog } = useNuxtApp();
 
 // The isLargePage prop is passed from the parent component
 
 // Function to track share events (for future PostHog integration)
 const trackShareEvent = (platform: string) => {
-  // This function will be used for PostHog tracking in the future
-  posthog.capture('social_share', {
-    platform: platform,
-    url: props.url,
-    title: props.title
-  });
+
+  onMounted(() => {
+    $clientPosthog?.capture('share_event', {
+      platform,
+      url: props.url,
+      title: props.title,
+      description: props.description,
+      isLargePage: props.isLargePage
+    });
+  })
 };
 
 // Function to add tracking parameter for large pages

components/blog/page/card/ArticleCard.vue

@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import type {BlogDeCollectionItem, BlogEnCollectionItem} from '@nuxt/content';
+const {getFeatureFlag } = usePostHogFeatureFlag();
+
 
 const {locale} = useI18n();
 const {blogArticle} = defineProps<{
   blogArticle: BlogDeCollectionItem | BlogEnCollectionItem;
 }>();
+const title = computed(() => {
+  if (getFeatureFlag('blog-ethanol-conversion').value === 'test') {
+    return blogArticle?.alternativeTitle || blogArticle?.title || 'No Title';
+  } else {
+    return blogArticle?.title || 'No Title';
+  }
+});
 </script>
 
 <template>
   <article v-if="blogArticle" class="bg-white dark:bg-gray-800 rounded-xxl shadow-md overflow-hidden">
-    <NuxtLink :to="`/${locale}/${blogArticle.slug}`">
+    <NuxtLink :to="`/${locale}/${blogArticle.slug}`" v-posthog-capture="'blog-article-card-click'">
       <NuxtImg v-if="blogArticle?.headerImage"
                :src="blogArticle?.headerImage"
                :alt="blogArticle?.headerImageAlt"
@@ -21,7 +30,7 @@ const {blogArticle} = defineProps<{
                quality='80'
                class="w-full h-48 object-cover rounded-xxl" />
       <div class="p-4">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">{{ blogArticle?.title ?? 'Unknwon' }}</h2>
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">{{ title }}</h2>
         <time v-if="blogArticle?.pubDate" class="text-sm text-gray-500 dark:text-gray-400"><i18n-d :value="blogArticle?.pubDate"></i18n-d></time>
         <ContentRenderer class="text-gray-700 dark:text-gray-300 mt-2" :value="blogArticle" excerpt="true">
         </ContentRenderer>

components/blog/page/footer/FooterSection.vue

@@ -8,15 +8,15 @@
       <div>
         <h2 class="text-lg font-bold">{{ $t('footer.social_media') }}</h2>
         <ul>
-          <li><a href="https://github.com/OneLiteFeatherNET" target="_blank" rel="noopener noreferrer" :aria-label="$t('footer.github_aria')">{{ $t('footer.github') }}</a></li>
-          <li><a href="https://opencollective.com/onelitefeather" target="_blank" rel="noopener noreferrer" :aria-label="$t('footer.opencollective_aria')">{{ $t('footer.opencollective') }}</a></li>
+          <li><a href="https://github.com/OneLiteFeatherNET" v-posthog-capture="'github-click'" target="_blank" rel="noopener noreferrer" :aria-label="$t('footer.github_aria')">{{ $t('footer.github') }}</a></li>
+          <li><a href="https://opencollective.com/onelitefeather" v-posthog-capture="'opencollective-click'" target="_blank" rel="noopener noreferrer" :aria-label="$t('footer.opencollective_aria')">{{ $t('footer.opencollective') }}</a></li>
         </ul>
       </div>
       <div>
         <h2 class="text-lg font-bold">{{ $t('footer.legal') }}</h2>
         <ul>
-          <li><NuxtLinkLocale to="/imprint">{{ $t('footer.imprint') }}</NuxtLinkLocale></li>
-          <li><NuxtLinkLocale to="/privacy">{{ $t('footer.privacy_policy') }}</NuxtLinkLocale></li>
+          <li><NuxtLinkLocale to="/imprint" v-posthog-capture="'imprint-click'">{{ $t('footer.imprint') }}</NuxtLinkLocale></li>
+          <li><NuxtLinkLocale to="/privacy" v-posthog-capture="'imprint-privacy'">{{ $t('footer.privacy_policy') }}</NuxtLinkLocale></li>
         </ul>
       </div>
       <div>

content.config.ts

@@ -11,6 +11,7 @@ export default defineContentConfig({
             source: 'blog/de/**/*.md',
             schema: z.object({
                 title: z.string(),
+                alternativeTitle: z.string().optional(),
                 description: z.string(),
                 slug: z.string(),
                 // Transform string to Date object
@@ -31,6 +32,7 @@ export default defineContentConfig({
             source: 'blog/en/**/*.md',
             schema: z.object({
                 title: z.string(),
+                alternativeTitle: z.string().optional(),
                 description: z.string(),
                 slug: z.string(),
                 // Transform string to Date object

content/blog/de/everything-you-need-to-know-about-ethanol.md

@@ -1,5 +1,6 @@
 ---
 title: 'Alles, was du über Ethanol wissen solltest'
+alternativeTitle: 'Schon jetzt auf mehreren hundert Servern, was sich dahinter verbirgt'
 description: 'Relativ unbekannt und trotzdem schon jetzt auf mehreren hundert Servern. Genauso wie Fractureiser wird diese von dem User mori0 / Riesenrad beworben, um Server zu “trollen”. Was sich dahinter verbirgt.'
 pubDate: 'Jul 23 2024'
 headerImage: 'images/blog/cyber-theDigitalArtist-Ethanol-Post.webp'

content/blog/en/everything-you-need-to-know-about-ethanol.md

@@ -1,5 +1,6 @@
 ---
 title: 'Everything You Need to Know About Ethanol'
+alternativeTitle: 'Already present on several hundred servers, what lies behind it'
 description: 'Relatively unknown yet already present on several hundred servers. Like Fractureiser, it is promoted by the user mori0 / Riesenrad to “troll” servers. What lies behind it.'
 pubDate: 'Jul 23 2024'
 headerImage: 'images/blog/cyber-theDigitalArtist-Ethanol-Post.webp'

nuxt.config.ts

@@ -45,7 +45,8 @@ export default defineNuxtConfig({
     '@nuxtjs/robots',
     'nuxt-schema-org',
     'nuxt-og-image',
-    '@nuxt/content'
+    '@nuxt/content',
+    'nuxt-posthog'
   ],
   i18n: {
     strategy: 'prefix',
@@ -151,10 +152,13 @@ export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         siteUrl: 'https://blog.onelitefeather.net',
-        posthogPublicKey: 'phc_t9nBlYL9LcDj4LDKZfQ97m5nbvFDTugkdQqAAspfdI',
-        posthogHost: 'https://eu.i.posthog.com'
       }
     },
+    posthog: {
+      publicKey: 'phc_t9nBlYL9LcDj4LDKZfQ97m5nbvFDTugkdQqAAspfdI',
+      host: 'https://eu.i.posthog.com',
+      proxy: true
+    },
     site: {
       url: 'https://blog.onelitefeather.net',
     },
@@ -194,4 +198,4 @@ export default defineNuxtConfig({
       }
     }
   }
-})
+})

package.json

@@ -25,6 +25,7 @@
     "eslint": "^9.27.0",
     "nuxt": "^3.17.4",
     "nuxt-og-image": "5.1.4",
+    "nuxt-posthog": "1.6.3",
     "nuxt-schema-org": "5.0.5",
     "unstorage": "^1.16.0",
     "vue": "^3.5.14",

pages/[...slug].vue

@@ -4,6 +4,7 @@ import SocialMediaShare from "~/components/blog/SocialMediaShare.vue";
 const { locale, t, locales } = useI18n()
 const route = useRoute()
 const config = useRuntimeConfig()
+const {getFeatureFlag } = usePostHogFeatureFlag();
 
 definePageMeta({
   layout: 'blog-entry',
@@ -106,6 +107,14 @@ useHead({
   link: headLinks
 })
 useHead(article?.value?.head || {})
+
+const title = computed(() => {
+  if (getFeatureFlag('alternative-title-conversion').value === 'test') {
+    return article?.value?.alternativeTitle || article?.value?.title || 'No Title';
+  } else {
+    return article?.value?.title || 'No Title';
+  }
+});
 </script>
 
 <template>
@@ -122,6 +131,7 @@ useHead(article?.value?.head || {})
                quality='80'
                class="aspect-video object-cover rounded-lg" />
       <div class="p-4">
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ title }}</h1>
         <time v-if="article?.pubDate" class="text-sm text-gray-500 dark:text-gray-400"><i18n-d :value="article?.pubDate"></i18n-d></time>
         <ContentRenderer class="text-gray-700 dark:text-gray-300 mt-2" :value="article">
         </ContentRenderer>