diff --git a/.env.example b/.env.example
index f3e1cdc..3a293fc 100644
--- 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
index b80e795..e9685e9 100644
--- 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 = ({
{
+ 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
index 128f78c..007a757 100644
--- 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
index 3f4de1c..ceeb693 100644
--- 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) => (
<>
@@ -117,7 +131,9 @@ const CustomApp = ({ Component, pageProps }: AppProps) => (
`,
}}
/>
-
+
+
+
)
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
index d00c2bd..4e3de7d 100644
--- 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 = ({
{
+ 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
index f9bd7c7..f0c7f49 100644
--- 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,