feat(analytics): implements posthog

rafa-thayto · Jul 8, 2024 · 155aaff · 155aaff
1 parent 0842582
commit 155aaff
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 1 deletion.
diff --git a/.env.example b/.env.example
@@ -4,5 +4,11 @@ NEXT_PUBLIC_GA_ID=G-1234567890
 NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=G-1234567890
 NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=klajsndfkjuhjkhbasldfbnlawieufbasd
 
+# Feature: Clarity
 # Mocked: true
 NEXT_PUBLIC_MS_CLARITY_ID=1234567890
+
+# Feature: Posthog
+# Mocked: true
+NEXT_PUBLIC_POSTHOG_KEY="paosidASDKJHUkasdMvV8JjDtZmAvYNiOAf4p9zcTNhDOt"
+NEXT_PUBLIC_POSTHOG_HOST="https://us.i.posthog.com"
diff --git a/src/components/BlogCard/BlogCard.tsx b/src/components/BlogCard/BlogCard.tsx
@@ -6,6 +6,7 @@ import { HeartIcon as HeartIconSolid } from '@heroicons/react/24/solid'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname, useSearchParams } from 'next/navigation'
+import posthog from 'posthog-js'
 import { useCallback, useRef, useState } from 'react'
 
 interface BlogCardProps {
@@ -68,6 +69,10 @@ export const BlogCard = ({
       <Link
         href={href}
         onClick={() => {
+          posthog.capture('blog-card-clicked', {
+            href,
+            title,
+          })
           window.umami.track('blog-card-clicked', {
             href,
             title,

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid'
 import Link from 'next/link'
+import posthog from 'posthog-js'
 import { useMemo } from 'react'
 
 const sunIcon = (
@@ -58,6 +59,9 @@ const ThemeSwitcher = () => {
         type="button"
         aria-label="Use Dark Mode"
         onClick={() => {
+          posthog.capture('switch-theme', {
+            from: 'dark-to-light',
+          })
           window.umami.track('switch-theme', {
             from: 'dark-to-light',
           })
@@ -73,6 +77,9 @@ const ThemeSwitcher = () => {
         type="button"
         aria-label="Use Light Mode"
         onClick={() => {
+          posthog.capture('switch-theme', {
+            from: 'light-to-dark',
+          })
           window.umami.track('switch-theme', {
             from: 'light-to-dark',
           })

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -6,11 +6,25 @@ import * as gtag from '@/lib/gtag'
 import * as gtm from '@/lib/gtm'
 import { MS_CLARITY_ID } from '@/lib/clarity'
 import { GOOGLE_SITE_VERIFICATION } from '@/lib/google-site-verification'
+import { posthog } from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
 
 import '@/styles/blog.css'
 import '@/styles/globals.css'
 import '@/styles/styles.css'
 
+if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+  // checks that we are client-side
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host:
+      process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
+    person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
+    loaded: (posthog) => {
+      if (process.env.NODE_ENV === 'development') posthog.debug() // debug mode in development
+    },
+  })
+}
+
 const CustomApp = ({ Component, pageProps }: AppProps) => (
   <>
     <Head>
@@ -117,7 +131,9 @@ const CustomApp = ({ Component, pageProps }: AppProps) => (
         `,
       }}
     />
-    <Component {...pageProps} />
+    <PostHogProvider client={posthog}>
+      <Component {...pageProps} />
+    </PostHogProvider>
     <Analytics />
   </>
 )

diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
@@ -11,6 +11,7 @@ import Link from 'next/link'
 import path from 'path'
 import { rgbDataURL } from '@/utils/blur'
 import { getMdxSerializedPost, getPreviousOrNextPostBySlug } from '@/utils/mdx'
+import { posthog } from 'posthog-js'
 
 const PostPage = ({
   frontMatter: { title, description, tags, publishedTime, modifiedTime, image },
@@ -69,6 +70,9 @@ const PostPage = ({
         <Link
           href="/blog"
           onClick={() => {
+            posthog.capture('blog-post-back-btn', {
+              title: prevPost.title,
+            })
             window.umami.track('blog-post-back-btn', {
               title: prevPost.title,
             })
@@ -126,6 +130,10 @@ const PostPage = ({
             href={`/blog/${prevPost.slug}`}
             className="py-8 px-10 text-center md:text-right first:rounded-t-lg md:first:rounded-tr-none md:first:rounded-l-lg last:rounded-r-lg first last:rounded-b-lg backdrop-blur-lg bg-slate-50 bg-opacity-100 dark:bg-opacity-10 hover:bg-opacity-30 dark:hover:bg-opacity-20 transition border border-gray-800 border-opacity-10 last:border-t md:border-r-0 md:last:border-r md:last:rounded-r-none flex flex-col"
             onClick={() => {
+              posthog.capture('change-post-btn', {
+                href: `/blog/${prevPost.slug}`,
+                title: prevPost.title,
+              })
               window.umami.track('change-post-btn', {
                 href: `/blog/${prevPost.slug}`,
                 title: prevPost.title,
@@ -146,6 +154,10 @@ const PostPage = ({
             href={`/blog/${nextPost.slug}`}
             className="py-8 px-10 text-center md:text-left md:first:rounded-t-lg last:rounded-b-lg first:rounded-l-lg md:last:rounded-bl-none md:last:rounded-r-lg backdrop-blur-lg bg-slate-50  bg-opacity-100 dark:bg-opacity-10 hover:bg-opacity-30 dark:hover:bg-opacity-20 transition border border-gray-800 border-opacity-10 border-t-0 first:border-t first:rounded-t-lg md:border-t border-b-0 last:border-b flex flex-col"
             onClick={() => {
+              posthog.capture('change-post-btn', {
+                href: `/blog/${nextPost.slug}`,
+                title: nextPost.title,
+              })
               window.umami.track('change-post-btn', {
                 href: `/blog/${nextPost.slug}`,
                 title: nextPost.title,

diff --git a/src/pages/linktree.tsx b/src/pages/linktree.tsx
@@ -10,6 +10,7 @@ import {
 import { NextSeo } from 'next-seo'
 import Image from 'next/image'
 import Link from 'next/link'
+import posthog from 'posthog-js'
 
 const LinksPage = () => {
   const description = 'Minha árvore de links'
@@ -137,6 +138,10 @@ const LinksPage = () => {
                 href={href}
                 className="flex justify-center font-medium cursor-pointer rounded-full border border-slate-900 hover:hover:bg-indigo-300 dark:hover:hover:bg-indigo-500 px-10 py-4 mb-4 text-slate-900 dark:text-gray-300 bg-white dark:bg-gray-600"
                 onClick={() => {
+                  posthog.capture('linktree-button-clicked', {
+                    href,
+                    title: text,
+                  })
                   window.umami.track('linktree-button-clicked', {
                     href,
                     title: text,