Analytics

Configure analytics in your ShipAhead app to track page visits and user actions. Learn how to add your provider settings and understand product usage.

Tools

Setup

Google Analytics

  1. Sign up at Google Analytics.
  2. Create a new property, select "Web," and follow the setup wizard.
  3. Copy the Measurement ID (e.g., G-XXXXXXXXXX) from the "Data Stream" settings.
  4. Set environment variable:
    .env
    ANALYTICS_GA_ID="your-measurement-id"
    
  5. Enable in config:
    shared/config.ts
    analytics: {
        enableGoogleAnalytics: true,
    },
    

Umami

  1. Sign up at Umami or self-host.
  2. Add a website in the Umami dashboard.
  3. Copy the Website ID from the tracking code.
  4. Set environment variable:
    .env
    ANALYTICS_UMAMI_WEBSITE_ID="your-umami-website-id"
    
  5. Enable in config:
    shared/config.ts
    analytics: {
        enableUmamiAnalytics: true,
    },
    

DataFast

  1. Sign up at DataFast.
  2. Register your site in the dashboard.
  3. Copy the Website ID from the site configuration.
  4. Set environment variable:
    .env
    ANALYTICS_DATAFAST_WEBSITE_ID="your-datafast-website-id"
    
  5. Enable in config:
    shared/config.ts
    analytics: {
        enableDatafastAnalytics: true,
    },
    

Usage

  • Page Views: Automatically tracked for every visit.
  • User Actions: Clicks, navigation, and interactions are tracked.
  • Dashboard: Check analytics data in the provider dashboards:

Track Custom Events

You can track specific actions with $trackEvent:

vue
const { $trackEvent } = useNuxtApp();

// Example: tracking a navbar button click
$trackEvent('navbar', { buttonName: 'Get ShipAhead' });