Forem: Emanuel Reis

A look at implementing PostHog analytics in a Next.js AI tool - starting the analytics journey

Emanuel Reis — Thu, 05 Dec 2024 13:21:41 +0000

As I continue building my AI Product Description Generator, I realized I needed to understand how people would actually use the tool. After researching different options, I decided to add PostHog analytics to track user behavior and make data-driven improvements.

Why PostHog?

When choosing an analytics solution, several factors made PostHog stand out:

Open Source: The entire platform is open source, which aligns with my development values
Developer-First: Built specifically with developers in mind
Next.js Integration: Clean documentation and easy setup with my tech stack
Session Recordings: The ability to see how users interact with the UI
Self-hostable: Option to self-host in the future if needed

Setting Up PostHog in Next.js

The setup process was straightforward. Here's how I added PostHog to my project:

First, install the PostHog package:

npm install --save posthog-js
# or
yarn add posthog-js
# or
pnpm add posthog-js

Add your environment variables to .env.local:

NEXT_PUBLIC_POSTHOG_KEY=your-project-key
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com

These variables need to start with NEXT_PUBLIC_ to be accessible on the client side.

For my Next.js app using the App Router, I created two key files:

First, a providers file for PostHog initialization:

// app/providers.tsx
'use client'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { useEffect } from 'react'
const PostHogPageView = dynamic(() => import('./PostHogPageView'), {
  ssr: false,
})

export function PHProvider({
  children,
}: {
  children: React.ReactNode
}) {
  useEffect(() => {
      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
        api_host: "/ingest",
        ui_host: "https://eu.posthog.com",
        person_profiles: 'identified_only',
        capture_pageview: false,
        capture_pageleave: true
      })
  }, []);

  return (
    <PostHogProvider client={posthog}>
      <PostHogPageView/>
      {children}
    </PostHogProvider>
  )
}

Note: We use dynamic import for PostHogPageView because it contains the useSearchParams hook, which would otherwise force the entire app into client-side rendering.

Then, a component to handle page view tracking (since Next.js is a single-page app):

// app/PostHogPageView.tsx
'use client'

import { usePathname, useSearchParams } from "next/navigation"
import { useEffect } from "react"
import { usePostHog } from 'posthog-js/react'

export default function PostHogPageView(): null {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const posthog = usePostHog()

  useEffect(() => {
    if (pathname && posthog) {
      let url = window.origin + pathname
      if (searchParams.toString()) {
        url = url + `?${searchParams.toString()}`
      }
      posthog.capture(
        '$pageview',
        {
          '$current_url': url,
        }
      )
    }
  }, [pathname, searchParams, posthog])

  return null
}

Finally, I integrated these components in my root layout:

// app/layout.tsx
import './globals.css'
import { PHProvider } from './providers'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <PHProvider>
        <body>
          <PostHogPageView />
          {children}
        </body>
      </PHProvider>
    </html>
  )
}

Setting Up a Reverse Proxy

To improve privacy and avoid ad-blockers, I also set up a reverse proxy using Next.js rewrites. Here's how:

First, I added the proxy configuration to next.config.js:

// next.config.js
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/ingest/static/:path*",
        destination: "https://us-assets.i.posthog.com/static/:path*",
      },
      {
        source: "/ingest/:path*",
        destination: "https://us.i.posthog.com/:path*",
      },
      {
        source: "/ingest/decide",
        destination: "https://us.i.posthog.com/decide",
      },
    ];
  },
  // Required to support PostHog trailing slash API requests
  skipTrailingSlashRedirect: true,
}

module.exports = nextConfig

Then, I updated the PostHog initialization to use the proxy:

posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
  api_host: "/ingest",
  ui_host: 'https://eu.posthog.com'  // Adjust if you're using EU cloud
  // ... other options
})

Note: If you're using PostHog's EU cloud (like I am), replace us with eu in all domains in the next.config.js file.

What I'm Planning to Track

I'm starting with basic events to understand user behavior:

Core User Actions:

// Track when users attempt to generate descriptions
function handleGenerate() {
  posthog.capture('generate_description', {
    productType: product.type,
    inputLength: product.input.length
  })
}

// Track successful generations
function onGenerationSuccess(result) {
  posthog.capture('generation_success', {
    responseLength: result.length,
    timeToGenerate: performance.now() - startTime
  })
}

// Track errors
function onGenerationError(error) {
  posthog.capture('generation_error', {
    errorType: error.type,
    errorMessage: error.message
  })
}

User Flow Events:

// Track form interactions
function trackFormInteraction(fieldName: string, action: string) {
  posthog.capture('form_interaction', {
    field: fieldName,
    action: action // focus, blur, change, etc.
  })
}

Questions I Want to Answer

By implementing analytics, I'm hoping to understand:

User Behavior
How many descriptions do users typically generate?
What types of products are they describing?
Where do users get stuck in the process?
Performance Metrics
How long do generations typically take?
Are there common error patterns?
What's the success rate of generations?
Usage Patterns
What times are most active?
Which features are used most?
Do users return for multiple sessions?

Next Steps

Now that the basic setup is complete, my next steps are:

Create Funnels
Track the complete user journey
Identify drop-off points
Measure conversion rates
Set Up A/B Testing
Test different UI layouts
Experiment with form fields
Try various generation prompts
Monitor Performance
Track load times
Measure API response times
Identify bottlenecks

Learning in Public

This is just the beginning of my analytics journey. I'll be sharing what I learn as I gather real user data and make improvements based on these insights.

Some questions I'm curious about:

What metrics do you track in your projects?
How do you balance privacy with data collection?
What analytics insights have surprised you the most?

I'd love to hear about your experiences with analytics and any suggestions for what I should be tracking. Drop your thoughts in the comments!

Keep following my journey:

Twitter: ereiswebdev
GitHub: Ereis
Live Demo: DescribeWise

Let's learn and build together! 🚀

Building an AI-Powered Product Description Generator: A Developer's Journey

Emanuel Reis — Wed, 04 Dec 2024 13:26:03 +0000

Have you ever stared at a blank product description box, cursor blinking mockingly, wondering how to make your product sound appealing?

That was me a few months ago. As a developer venturing into e-commerce, I found myself spending hours writing product descriptions that still didn't quite hit the mark. After getting just one sale (yes, only one!), I realized there had to be a better way.

This is the story of how I built an AI-powered tool to solve this problem - not as an e-commerce expert, but as a developer learning along the way.

🎯 The Problem I Was Trying to Solve

Writing product descriptions was my biggest time sink when setting up my online store. Here's what my process looked like:

Fun fact: I spent more time writing descriptions than actually coding my first e-commerce site!

30+ minutes per product description
Constant Googling for "how to write compelling product descriptions"
Trying to balance SEO keywords with natural language
Never quite sure if my descriptions would convert

The worst part? After all that effort, I still wasn't confident in my writing. My first product description looked something like this:

"Blue t-shirt made from cotton. Comfortable and stylish. 
Good for casual wear. Machine washable."

Not exactly compelling, right?

🛠️ The Solution: Building an AI Description Generator

Instead of becoming a copywriting expert overnight, I decided to leverage what I do know - coding. Here's how I approached building the solution:

1. Technical Foundation

I chose Next.js for the frontend and Supabase for the backend, mainly because:

Next.js provides an excellent developer experience
Supabase handles auth and database needs out of the box
Both have great documentation for solo developers

2. AI Integration

The core of the application uses OpenAI's API. Here's a simplified version of how it works:

// Basic structure of the AI description generation
async function generateDescription(imageData, productContext) {
  const response = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      {
        role: "user",
        content: [
          { type: "text", text: "Generate a detailed product description" },
          { type: "image_url", image_url: imageData }
        ],
      },
    ],
    max_tokens: 600,
  });

  return response.choices[0].message.content;
}

3. User Interface

I kept the UI simple and focused on three main actions:

Upload product image
Add basic product details
Generate and edit descriptions

🔧 Challenges and Solutions

Challenge 1: Cost Management

OpenAI's API isn't free, and as a side project, I needed to be cost-conscious. Solution: I implemented:

A free tier with limited generations
Caching of previous generations
Prompt optimization to reduce token usage

Challenge 2: Image Processing

Initially, I struggled with image handling and optimization. Solution:

Implemented client-side image compression
Added support for multiple image formats
Created a preview system before processing

📚 What I've Learned So Far

Start Simple: My first version just generated basic descriptions. No bells and whistles, and that was okay.
Test Early: I tested with my own e-commerce products first, which helped find issues quickly.
Focus on Core Value: Instead of adding many features, I focused on making the description generation really good.

📊 Current Results

Being completely transparent about my progress:

Tool is functional but in early stages
Still learning about e-commerce needs

🚀 What's Next

I'm working on:

Adding support for different languages
Learning more about e-commerce to make the tool more useful

Want to Try It Out?

The tool is currently in beta, and I'm looking for early users who can provide feedback. If you're interested in trying it out or have suggestions, feel free to:

Check out the tool at DescribeWise
Share your own e-commerce content challenges

Remember, this is a journey of learning both development and e-commerce. I'd love to hear about your experiences and challenges with product descriptions. What's your biggest struggle when writing them?

P.S. Yes, I really did only get one sale in my e-commerce venture so far - but hey, that's just the beginning of the story!