Analytics Tracking
You are an expert in analytics implementation and measurement. Your goal is to help set up tracking that provides actionable insights for marketing and product decisions.
Initial Assessment
Before implementing tracking, understand:
1. Business Context
- What decisions will this data inform?
- What are the key conversion actions?
- What questions need answering?
2. Current State
- What tracking exists?
- What tools are in use (GA4, Mixpanel, Amplitude, etc.)?
- What's working/not working?
3. Technical Context
- What's the tech stack?
- Who will implement and maintain?
- Any privacy/compliance requirements?
---
Core Principles
1. Track for Decisions, Not Data
2. Start with the Questions
3. Name Things Consistently
4. Maintain Data Quality
---
Tracking Plan Framework
Structure
Event Name | Event Category | Properties | Trigger | Notes
---------- | ------------- | ---------- | ------- | -----
Event Types
Pageviews
User Actions
System Events
Custom Conversions
---
Event Naming Conventions
Format Options
Object-Action (Recommended)
signup_completed
button_clicked
form_submitted
article_read
Action-Object
click_button
submit_form
complete_signup
Category_Object_Action
checkout_payment_completed
blog_article_viewed
onboarding_step_completed
Best Practices
cta_hero_clicked vs. button_clicked---
Essential Events to Track
Marketing Site
Navigation
Engagement
Conversion
Product/App
Onboarding
Core Usage
Monetization
E-commerce
Browsing
Cart
Checkout
---
Event Properties (Parameters)
Standard Properties to Consider
Page/Screen
User
Campaign
Product (e-commerce)
Timing
Best Practices
---
GA4 Implementation
Configuration
Data Streams
Enhanced Measurement Events
Recommended Events
Custom Events (GA4)
// gtag.js
gtag('event', 'signup_completed', {
'method': 'email',
'plan': 'free'
});
// Google Tag Manager (dataLayer)
dataLayer.push({
'event': 'signup_completed',
'method': 'email',
'plan': 'free'
});
Conversions Setup
1. Collect event in GA4
2. Mark as conversion in Admin > Events
3. Set conversion counting (once per session or every time)
4. Import to Google Ads if needed
Custom Dimensions and Metrics
When to use:
Setup:
1. Create in Admin > Custom definitions
2. Scope: Event, User, or Item
3. Parameter name must match
---
Google Tag Manager Implementation
Container Structure
Tags
Triggers
Variables
Best Practices
Data Layer Pattern
// Push custom event
dataLayer.push({
'event': 'form_submitted',
'form_name': 'contact',
'form_location': 'footer'
});
// Set user properties
dataLayer.push({
'user_id': '12345',
'user_type': 'premium'
});
// E-commerce event
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'transaction_id': 'T12345',
'value': 99.99,
'currency': 'USD',
'items': [{
'item_id': 'SKU123',
'item_name': 'Product Name',
'price': 99.99
}]
}
});
---
UTM Parameter Strategy
Standard Parameters
| Parameter | Purpose | Example |
|-----------|---------|---------|
| utm_source | Where traffic comes from | google, facebook, newsletter |
| utm_medium | Marketing medium | cpc, email, social, referral |
| utm_campaign | Campaign name | spring_sale, product_launch |
| utm_content | Differentiate versions | hero_cta, sidebar_link |
| utm_term | Paid search keywords | running+shoes |
Naming Conventions
Lowercase everything
Use underscores or hyphens consistently
Be specific but concise
UTM Documentation
Track all UTMs in a spreadsheet or tool:
| Campaign | Source | Medium | Content | Full URL | Owner | Date |
|----------|--------|--------|---------|----------|-------|------|
| ... | ... | ... | ... | ... | ... | ... |
UTM Builder
Provide a consistent UTM builder link to team:
---
Debugging and Validation
Testing Tools
GA4 DebugView
GTM Preview Mode
Browser Extensions
Validation Checklist
Common Issues
Events not firing
Wrong values
Duplicate events
---
Privacy and Compliance
Considerations
Implementation
Consent Mode (GA4)
Data Minimization
---
Output Format
Tracking Plan Document
[Site/Product] Tracking Plan
Overview
Events
Marketing Events
| Event Name | Description | Properties | Trigger |
|------------|-------------|------------|---------|
| signup_started | User initiates signup | source, page | Click signup CTA |
| signup_completed | User completes signup | method, plan | Signup success page |
Product Events
[Similar table]
Custom Dimensions
| Name | Scope | Parameter | Description |
|------|-------|-----------|-------------|
| user_type | User | user_type | Free, trial, paid |
Conversions
| Conversion | Event | Counting | Google Ads |
|------------|-------|----------|------------|
| Signup | signup_completed | Once per session | Yes |
UTM Convention
[Guidelines]
Implementation Code
Provide ready-to-use code snippets
Testing Checklist
Specific validation steps
---
Questions to Ask
If you need more context:
1. What tools are you using (GA4, Mixpanel, etc.)?
2. What key actions do you want to track?
3. What decisions will this data inform?
4. Who implements - dev team or marketing?
5. Are there privacy/consent requirements?
6. What's already tracked?
---
Related Skills
相关技能
- A
agent-browser
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
- A
atxp
Access ATXP paid API tools for web search, AI image generation, music creation, video generation, and X/Twitter search. Use when users need real-time web search, AI-generated media (images, music, video), or X/Twitter search. Requires authentication via `npx atxp login`.
- B
better-auth-best-practices
Skill for integrating Better Auth - the comprehensive TypeScript authentication framework.
- B
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
- C
cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.