Analytics Setup — PhotoSwipe Pro with AI SEO

Current Status

✅ Google Analytics 4 (GA4) is already installed via @docusaurus/plugin-google-gtag

⚠️ But using placeholder tracking ID: G-57MLE6HBT9

You need to replace this with your own tracking ID to start collecting data.

Why Analytics Matters

Critical for revenue optimization:

Track conversions — How many visitors buy?
Measure funnel — Where do people drop off?
Calculate ROI — Which marketing channels work?
Optimize pricing — Test different price points
Improve UX — See what users actually do

Without analytics, you're flying blind!

Setup Google Analytics 4 (Recommended)

Step 1: Create GA4 Property

Go to https://analytics.google.com
Click "Admin" (gear icon, bottom left)
Click "Create Property"
Enter property details:
- Property name: PhotoSwipe Pro
- Time zone: Your timezone
- Currency: USD
Click "Next"
Choose business details (optional)
Click "Create"

Step 2: Create Data Stream

In the property, click "Data Streams"
Click "Add stream" → "Web"
Enter your URL:
- Website URL: https://photoswipe-pro.vercel.app (or your domain)
- Stream name: PhotoSwipe Pro Website
Enable Enhanced Measurement (recommended)
Click "Create stream"

Step 3: Get Tracking ID

Copy the Measurement ID (format: G-XXXXXXXXXX)
This is what you'll use in the config

Step 4: Update Docusaurus Config

File: demo-docs-website/docusaurus.config.js

plugins: [
  [
    '@docusaurus/plugin-google-gtag',
    {
      trackingID: 'G-XXXXXXXXXX', // ← Replace with your tracking ID
      anonymizeIP: true, // Optional: GDPR compliance
    },
  ],
],

Step 5: Deploy

# Redeploy to apply changes
vercel --prod

Step 6: Verify

Visit your site: https://your-site.vercel.app
Open browser DevTools → Network tab
Look for requests to google-analytics.com/g/collect
Check GA4 real-time reports (Admin → Reports → Realtime)

Events to Track (Pre-configured)

GA4 automatically tracks:

✅ Page views — Every page visit ✅ Scroll depth — How far users scroll ✅ Outbound clicks — Clicks to external sites ✅ File downloads — Pro ZIP downloads ✅ Video engagement — If you add videos ✅ Site search — Docs site search

Custom Events to Add (High Priority)

1. Checkout Button Click

Where: /checkout page

Add to CheckoutHandler component:

// demo-docs-website/src/components/CheckoutHandler/index.tsx

const handleSelectTier = async (tierId: string) => {
  // Track checkout initiation
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', 'begin_checkout', {
      currency: 'USD',
      value: tierId === 'site' ? 99 : 299,
      items: [{
        item_id: tierId,
        item_name: `PhotoSwipe Pro ${tierId} License`,
      }],
    });
  }

  // ... existing checkout logic
};

2. License Key Copied

Where: /customer-portal page

Add to CustomerPortal component:

// demo-docs-website/src/components/CustomerPortal/index.tsx

onClick={() => {
  navigator.clipboard.writeText(license.key);
  
  // Track license key copy
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', 'license_key_copied', {
      license_tier: license.tier,
    });
  }
  
  alert('License key copied to clipboard!');
}}

3. AI Demo Usage

Where: /pro page demo

Add to ProDemo component:

// demo-docs-website/src/components/ProDemo/index.js

onClick={async () => {
  setError('');
  
  // Track AI generation attempt
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', 'ai_demo_used', {
      has_license_key: !!licenseKey && isValid,
      image_url: img.src,
    });
  }
  
  try {
    const res = await ai({ slide: { src: img.src, title: img.title }, licenseKey });
    setGenerated((g) => ({ ...g, [img.src]: res }));
    
    // Track successful generation
    if (typeof window !== 'undefined' && window.gtag) {
      window.gtag('event', 'ai_generation_success', {
        image_url: img.src,
      });
    }
  } catch (err) {
    // ... error handling
  }
}}

4. Purchase Complete (Server-side)

Where: Backend after LemonSqueezy webhook

Add to webhook handler:

// server/lemonsqueezy/webhook.js (future)

app.post('/api/webhook/lemonsqueezy', async (req, res) => {
  const event = req.body;
  
  if (event.event_name === 'order_created') {
    // Send conversion event to GA4
    // Use Measurement Protocol API
    await fetch(`https://www.google-analytics.com/mp/collect?measurement_id=G-XXXXXXXXXX&api_secret=YOUR_SECRET`, {
      method: 'POST',
      body: JSON.stringify({
        client_id: event.meta.custom_data?.client_id || 'server',
        events: [{
          name: 'purchase',
          params: {
            transaction_id: event.data.id,
            value: event.data.attributes.total / 100,
            currency: 'USD',
            items: [{
              item_id: event.data.attributes.first_order_item.variant_id,
              item_name: event.data.attributes.first_order_item.product_name,
              price: event.data.attributes.total / 100,
            }],
          },
        }],
      }),
    });
  }
  
  res.json({ received: true });
});

Key Metrics to Monitor

Revenue Metrics

In GA4: Monetization → Overview

Revenue — Total sales
Average purchase revenue — Revenue per order
Purchase-to-detail rate — Checkout → Purchase %
Purchases — Total orders

Traffic Metrics

In GA4: Reports → Acquisition

Users — Unique visitors
Sessions — Total visits
Session duration — Time on site
Bounce rate — Single-page visits %

Conversion Funnel

In GA4: Explore → Funnel Exploration

Create funnel:

1. Landing page (/pro or /)
   ↓
2. Visit /checkout
   ↓
3. Click "Buy Now" (begin_checkout event)
   ↓
4. Purchase (purchase event)

Track drop-off at each step!

Goal: Calculate Conversion Rate

Conversion Rate = Purchases / Checkout Page Views

Example:
- 1,000 visitors to /checkout
- 20 purchases
- Conversion rate: 2%

Revenue:
- 12 Site ($99) + 8 Agency ($299) = $3,580

Alternative: Plausible Analytics (Privacy-Friendly)

If you prefer privacy-focused analytics:

Why Plausible?

✅ No cookies — GDPR compliant by default ✅ Lightweight — <1KB script (GA4 is ~45KB) ✅ Simple UI — Easier to understand ✅ Privacy-first — No cross-site tracking

❌ Paid — $9/month (vs GA4 free) ❌ Less features — No advanced funnels

Setup Plausible

Sign up at https://plausible.io
Add your domain
Get tracking script
Add to docusaurus.config.js:

scripts: [
  {
    src: 'https://plausible.io/js/script.js',
    'data-domain': 'photoswipe-pro.com',
    defer: true,
  },
],

Custom events:

// Track checkout
window.plausible('Checkout', { props: { tier: 'site' } });

// Track purchase
window.plausible('Purchase', { props: { value: 99 } });

Analytics Checklist

Phase 1: Launch (Critical)

Replace placeholder GA4 tracking ID
Verify tracking works in production
Set up conversion goals in GA4
Test purchase event tracking

Phase 2: Optimization (Week 2)

Add custom events (checkout, demo usage)
Create funnel visualization
Set up weekly email reports
Monitor bounce rate on /checkout

Phase 3: Advanced (Month 2)

A/B test pricing ($79 vs $99)
Test CTA copy ("Buy Now" vs "Get Started")
Analyze traffic sources (which channels convert?)
Set up Google Ads conversion tracking (if running ads)

If your audience is in EU:

Add cookie consent banner (use a library like cookie-consent)
Anonymize IPs (already enabled: anonymizeIP: true)
Privacy policy — Disclose analytics usage
Opt-out option — Allow users to disable tracking

Simple implementation:

// demo-docs-website/src/components/CookieConsent/index.js
import React, { useEffect, useState } from 'react';

export default function CookieConsent() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const consent = localStorage.getItem('cookie_consent');
    if (!consent) setShow(true);
  }, []);

  const accept = () => {
    localStorage.setItem('cookie_consent', 'accepted');
    setShow(false);
    // Enable analytics
    window.gtag('consent', 'update', {
      analytics_storage: 'granted',
    });
  };

  if (!show) return null;

  return (
    <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: '#333', color: '#fff', padding: 16, zIndex: 9999 }}>
      <p>We use cookies to analyze site usage. <a href="/privacy" style={{ color: '#4a9eff' }}>Privacy Policy</a></p>
      <button onClick={accept} style={{ padding: '8px 16px', background: '#4a9eff', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}>Accept</button>
    </div>
  );
}

Testing Analytics

Verify tracking works:

# 1. Install GA Debugger extension (Chrome)
https://chrome.google.com/webstore/detail/google-analytics-debugger

# 2. Visit your site
https://your-site.vercel.app

# 3. Open DevTools → Console
# Should see GA debug logs

# 4. Check GA4 Real-Time report
# Should see your visit within 30 seconds

Test checkout event:

Go to /checkout
Click "Buy Now"
Check DevTools → Network → Filter: "collect"
Look for event with en=begin_checkout

Expected Results

After 30 days with analytics:

You'll know:

✅ How many people visit /pro vs /checkout
✅ Conversion rate (visitors → buyers)
✅ Which traffic sources convert best
✅ Where users drop off in the funnel
✅ ROI of marketing efforts

You can optimize:

💰 Pricing (test $79 vs $99)
📝 Copy (test different value props)
🎨 Design (test button colors, layouts)
🚀 Marketing (double down on what works)

Quick Start (5 Minutes)

# 1. Get GA4 tracking ID
Go to https://analytics.google.com → Create property → Copy ID

# 2. Update config
Edit demo-docs-website/docusaurus.config.js
Replace 'G-57MLE6HBT9' with your ID

# 3. Deploy
vercel --prod

# 4. Test
Visit your site → Check GA4 real-time reports

Done! You're now tracking conversions.

TL;DR

Current status: ✅ GA4 installed but using placeholder ID

Action required: Replace G-57MLE6HBT9 with your tracking ID

Time: 5 minutes

Impact: Critical for measuring success and optimizing revenue

Next steps:

Create GA4 property (free)
Update tracking ID in config
Deploy
Start tracking conversions!

Analytics Setup — PhotoSwipe Pro with AI SEO

Current Status​

Why Analytics Matters​

Setup Google Analytics 4 (Recommended)​

Step 1: Create GA4 Property​

Step 2: Create Data Stream​

Step 3: Get Tracking ID​

Step 4: Update Docusaurus Config​

Step 5: Deploy​

Step 6: Verify​

Events to Track (Pre-configured)​

Custom Events to Add (High Priority)​

1. Checkout Button Click​

2. License Key Copied​

3. AI Demo Usage​

4. Purchase Complete (Server-side)​

Key Metrics to Monitor​

Revenue Metrics​

Traffic Metrics​

Conversion Funnel​

Goal: Calculate Conversion Rate​

Alternative: Plausible Analytics (Privacy-Friendly)​

Why Plausible?​

Setup Plausible​

Analytics Checklist​

Phase 1: Launch (Critical)​

Phase 2: Optimization (Week 2)​

Phase 3: Advanced (Month 2)​

Privacy & GDPR Compliance​

If your audience is in EU:​

Testing Analytics​

Verify tracking works:​

Test checkout event:​

Expected Results​

After 30 days with analytics:​

Quick Start (5 Minutes)​

TL;DR​