Chameleon

Analytics

Analytics integration and tracking

Analytics

Chameleon integrates multiple analytics providers to track user behavior, performance metrics, and business insights.

Overview

The analytics system supports Google Analytics, OpenPanel, and Plausible for comprehensive website tracking. Analytics are automatically enabled in production and can be configured through environment variables. The system tracks page views, user interactions, and custom events across the application.

Setup

Environment Variables

Configure analytics providers in your environment:

# Google Analytics
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"

# OpenPanel
NEXT_PUBLIC_OPENPANEL_CLIENT_ID="your-openpanel-client-id"

# Plausible
NEXT_PUBLIC_PLAUSIBLE_DOMAIN="your-domain.com"

Provider Setup

Google Analytics:

  1. Create a Google Analytics 4 property
  2. Get your Measurement ID (G-XXXXXXXXXX)
  3. Add to NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

OpenPanel:

  1. Sign up at OpenPanel
  2. Create a new project
  3. Get your client ID from project settings
  4. Add to NEXT_PUBLIC_OPENPANEL_CLIENT_ID

Plausible:

  1. Create account at Plausible
  2. Add your domain
  3. Get your domain name
  4. Add to NEXT_PUBLIC_PLAUSIBLE_DOMAIN

Usage

Analytics Component

The analytics are automatically loaded in production:

// src/components/analytics/index.tsx
export default function Analytics() {
  if (process.env.NODE_ENV !== "production") {
    return null;
  }
  
  return (
    <>
      <OpenPanelAnalytics />
      <GoogleAnalytics />
      <Plausible />
    </>
  );
}

Custom Event Tracking

Track custom events in your components:

// Track AI generation events
import { trackEvent } from "@/lib/analytics";

const handleGenerate = async () => {
  trackEvent("ai_generation", {
    provider: "openai",
    type: "image",
    credits_cost: 5
  });
};

Page View Tracking

Page views are automatically tracked, but you can track custom page views:

import { trackPageView } from "@/lib/analytics";

// Track custom page view
trackPageView("/custom-page", "Custom Page Title");

File Locations

  • src/components/analytics/index.tsx - Main analytics component
  • src/components/analytics/google-analytics.tsx - Google Analytics integration
  • src/components/analytics/openpanel.tsx - OpenPanel integration
  • src/components/analytics/plausible.tsx - Plausible integration
  • src/lib/analytics.ts - Analytics utility functions

Common Tasks

View Analytics Data

Google Analytics:

  1. Go to Google Analytics Dashboard
  2. Select your property
  3. View Real-time and standard reports

OpenPanel:

  1. Login to your OpenPanel Dashboard
  2. Select your project
  3. View real-time analytics

Plausible:

  1. Go to Plausible Dashboard
  2. Select your site
  3. View detailed analytics

Track Custom Events

// Track user actions
trackEvent("button_click", {
  button_name: "purchase_credits",
  page: "/pricing"
});

// Track AI usage
trackEvent("ai_generation_complete", {
  provider: "kling",
  type: "video",
  duration: 45
});

Monitor Performance

// Track page load times
trackEvent("page_performance", {
  page: "/ai-generator",
  load_time: 1200,
  user_agent: navigator.userAgent
});

Troubleshooting

Analytics not loading

Problem: No data appearing in analytics dashboards

Solution:

  1. Check environment variables are set correctly
  2. Verify you're in production mode (NODE_ENV=production)
  3. Check browser console for errors
  4. Ensure domain is properly configured

Google Analytics not tracking

Problem: GA4 not receiving data

Solution:

  1. Verify Measurement ID format (G-XXXXXXXXXX)
  2. Check Google Analytics property is active
  3. Use Google Tag Assistant to debug
  4. Ensure no ad blockers are interfering

OpenPanel connection issues

Problem: OpenPanel not connecting

Solution:

  1. Verify client ID is correct
  2. Check OpenPanel project is active
  3. Ensure domain matches your site
  4. Check network connectivity

Next Steps