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
- Sign up at Google Analytics.
- Create a new property, select "Web," and follow the setup wizard.
- Copy the Measurement ID (e.g.,
G-XXXXXXXXXX) from the "Data Stream" settings. - Set environment variable:
.env
ANALYTICS_GA_ID="your-measurement-id" - Enable in config:
shared/config.ts
analytics: { enableGoogleAnalytics: true, },
Umami
- Sign up at Umami or self-host.
- Add a website in the Umami dashboard.
- Copy the Website ID from the tracking code.
- Set environment variable:
.env
ANALYTICS_UMAMI_WEBSITE_ID="your-umami-website-id" - Enable in config:
shared/config.ts
analytics: { enableUmamiAnalytics: true, },
DataFast
- Sign up at DataFast.
- Register your site in the dashboard.
- Copy the Website ID from the site configuration.
- Set environment variable:
.env
ANALYTICS_DATAFAST_WEBSITE_ID="your-datafast-website-id" - 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' });
Error Handling
Set up friendly error pages for 404 and 500 errors in your Nuxt app. Learn how ShipAhead handles errors and how to customize messages for your users.
PWA
Set up your ShipAhead app as a Progressive Web App. Configure installation support and app icons so users can add your product to their home screen.