Integrating PostHog: https://posthog.com

PostHog Implementation into my portfolio has been a game-changer in understanding how visitors explore my projects and resources. By tracking interactions, I can see which areas of my portfolio resonate most, helping me improve the experience for everyone.

Why PostHog?

PostHog is open-source and developer-friendly. It allows me to capture insights without relying on external analytics platforms, keeping the data secure and under my control.

Implementation Steps:

Step 1: Installation

I installed PostHog using

bun add posthog-js

Tip: Keep your API keys in .env files to maintain security.

Step 2: Client Initialization

I created a `lib/posthog.js` file and initialized the client

import posthog from 'posthog-js'

if (typeof window !== 'undefined') {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
api_host: 'https://app.posthog.com',
})
}

export default posthog

Step 3:Capturing Events

I set up custom events for projects, social links, and snippets to see which content users interact with the most.

Bold event names like project_card_clicked

Step 4: Authorized Domains

Configured my portfolio domain in PostHog settings:

https://shivam-karn.com.np

Step 5: Dashboard Insights

PostHog provides insights such as:

🔹 Which projects attract the most attention
🔹 Popular sections or resources
🔹 Areas to improve for a better user experience

Conclusion:

Even without traditional forms, PostHog helps me enhance my portfolio based on visitor interactions. The focus isn’t on “tracking people,” but on making the experience smoother and more enjoyable.

Integrating PostHog: https://posthog.com

PostHog Implementation into my portfolio has been a game-changer in understanding how visitors explore my projects and resources. By tracking interactions, I can see which areas of my portfolio resonate most, helping me improve the experience for everyone.

Why PostHog?

PostHog is open-source and developer-friendly. It allows me to capture insights without relying on external analytics platforms, keeping the data secure and under my control.

Implementation Steps:

Step 1: Installation

I installed PostHog using

Step 2: Client Initialization

I created a lib/posthog.js file and initialized the client

Step 3:Capturing Events

I set up custom events for projects, social links, and snippets to see which content users interact with the most.Bold event names like project_card_clicked

Step 4: Authorized Domains

Configured my portfolio domain in PostHog settings:

Step 5: Dashboard Insights

PostHog provides insights such as:🔹 Which projects attract the most attention🔹 Popular sections or resources🔹 Areas to improve for a better user experience

Conclusion:

Even without traditional forms, PostHog helps me enhance my portfolio based on visitor interactions. The focus isn’t on “tracking people,” but on making the experience smoother and more enjoyable.

I created a `lib/posthog.js` file and initialized the client

I set up custom events for projects, social links, and snippets to see which content users interact with the most.

Bold event names like project_card_clicked

PostHog provides insights such as:

🔹 Which projects attract the most attention
🔹 Popular sections or resources
🔹 Areas to improve for a better user experience