Initial commit
This commit is contained in:
Zhongwei Li
327
skills/ga4-gtag-implementation/README.md
Normal file
327
skills/ga4-gtag-implementation/README.md
Normal file
@@ -0,0 +1,327 @@
|
||||
# ga4-gtag-implementation Skill
|
||||
|
||||
**Status:** Production-ready
|
||||
**Version:** 1.0
|
||||
**Created:** November 2025
|
||||
**Skill Type:** GA4 Direct Implementation
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides expert guidance for implementing Google Analytics 4 using gtag.js (Google Tag) JavaScript library directly on websites without Google Tag Manager. It covers complete installation, event tracking, user property management, and framework integration.
|
||||
|
||||
---
|
||||
|
||||
## Skill Metadata
|
||||
|
||||
**Name:** `ga4-gtag-implementation`
|
||||
|
||||
**Description:**
|
||||
> Expert guidance for implementing GA4 using gtag.js directly on websites without Google Tag Manager. Use when implementing gtag.js tracking code, writing custom gtag() commands, setting up direct website tracking, working with gtag('event'), gtag('config'), or gtag('set') commands, or when GTM is not available. Covers .html, .js, .jsx files with gtag implementations and dataLayer integration.
|
||||
|
||||
**Word Count:** 709 words (target: 600-800)
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
.claude/skills/ga4-gtag-implementation/
|
||||
├── SKILL.md (709 words)
|
||||
│ Core skill documentation with commands, patterns, and quick reference
|
||||
│
|
||||
├── references/
|
||||
│ ├── gtag-commands-complete.md (4,892 words)
|
||||
│ │ Complete gtag() command reference with all variants
|
||||
│ ├── installation-guide.md (2,567 words)
|
||||
│ │ Step-by-step installation for all platforms
|
||||
│ ├── real-world-patterns.md (3,124 words)
|
||||
│ │ Production-ready implementation examples
|
||||
│ └── performance-optimization.md (2,845 words)
|
||||
│ Best practices for high-performance implementations
|
||||
│
|
||||
└── assets/
|
||||
├── gtag-snippet-template.html (3,156 words)
|
||||
│ Complete HTML template with all examples
|
||||
└── gtag-patterns.js (2,894 words)
|
||||
Common implementation patterns in JavaScript
|
||||
```
|
||||
|
||||
**Total Documentation:** ~20,187 words across all files
|
||||
|
||||
---
|
||||
|
||||
## Core Capabilities
|
||||
|
||||
1. **gtag.js Installation**
|
||||
- Complete snippet installation
|
||||
- Platform-specific guides (WordPress, Shopify, React, Vue, Angular, Next.js)
|
||||
- Verification methods
|
||||
|
||||
2. **gtag() Commands**
|
||||
- `gtag('config')` - Initialize GA4 property
|
||||
- `gtag('event')` - Send events to GA4
|
||||
- `gtag('set')` - Set user properties and User ID
|
||||
- `gtag('js')` - Initialize library
|
||||
|
||||
3. **Event Tracking Patterns**
|
||||
- Form submissions
|
||||
- Button clicks
|
||||
- Ecommerce events (view_item, add_to_cart, purchase)
|
||||
- User authentication (login, sign_up, logout)
|
||||
- Video engagement
|
||||
- Site search
|
||||
|
||||
4. **Advanced Implementation**
|
||||
- Single-page application (SPA) tracking
|
||||
- Custom user properties
|
||||
- Performance optimization
|
||||
- Error handling
|
||||
|
||||
5. **Framework Integration**
|
||||
- React/Next.js patterns
|
||||
- Vue.js integration
|
||||
- Angular service implementation
|
||||
- Vanilla JavaScript
|
||||
|
||||
---
|
||||
|
||||
## Trigger Keywords
|
||||
|
||||
The skill is invoked when users mention:
|
||||
|
||||
**File Types:**
|
||||
- `.html`, `.js`, `.jsx`, `.tsx`, `.vue`
|
||||
|
||||
**Technical Terms:**
|
||||
- `gtag`, `gtag.js`, `gtag()`, `dataLayer`, `window.dataLayer`
|
||||
|
||||
**Commands:**
|
||||
- `gtag('config')`, `gtag('event')`, `gtag('set')`
|
||||
|
||||
**Frameworks:**
|
||||
- JavaScript, React, Vue, Angular, Next.js, vanilla JS
|
||||
|
||||
**Actions:**
|
||||
- implementing, tracking, sending, configuring, installing
|
||||
|
||||
**Scenarios:**
|
||||
- "without GTM", "direct implementation", "gtag snippet"
|
||||
|
||||
---
|
||||
|
||||
## Integration with Other Skills
|
||||
|
||||
**Prerequisites:**
|
||||
- `ga4-setup` - Initial property and data stream setup
|
||||
|
||||
**Related:**
|
||||
- `ga4-events-fundamentals` - Understanding event structure
|
||||
- `ga4-recommended-events` - Best practice event names
|
||||
- `ga4-custom-events` - Business-specific tracking
|
||||
- `ga4-debugview` - Testing and validation
|
||||
|
||||
**Alternatives:**
|
||||
- `ga4-gtm-integration` - GTM-based implementation (alternative method)
|
||||
|
||||
---
|
||||
|
||||
## Sample Invocation Test Prompts
|
||||
|
||||
These prompts should trigger the `ga4-gtag-implementation` skill:
|
||||
|
||||
### Test Prompt 1: Direct Installation
|
||||
```
|
||||
I need to install GA4 tracking directly on my website without using Google Tag Manager.
|
||||
Can you help me implement gtag.js?
|
||||
```
|
||||
|
||||
**Expected:** Skill invoked - focuses on direct gtag.js installation
|
||||
|
||||
---
|
||||
|
||||
### Test Prompt 2: Event Implementation
|
||||
```
|
||||
I'm trying to track form submissions in my React app using gtag('event').
|
||||
How do I implement this correctly?
|
||||
```
|
||||
|
||||
**Expected:** Skill invoked - gtag('event') command mentioned with React
|
||||
|
||||
---
|
||||
|
||||
### Test Prompt 3: Ecommerce Tracking
|
||||
```
|
||||
I need to track purchase events on my ecommerce site using gtag.js.
|
||||
What parameters do I need to include?
|
||||
```
|
||||
|
||||
**Expected:** Skill invoked - ecommerce + gtag.js mentioned
|
||||
|
||||
---
|
||||
|
||||
### Test Prompt 4: User ID Tracking
|
||||
```
|
||||
How do I set and clear User ID using gtag('set') for cross-device tracking?
|
||||
```
|
||||
|
||||
**Expected:** Skill invoked - gtag('set') command mentioned
|
||||
|
||||
---
|
||||
|
||||
### Test Prompt 5: SPA Implementation
|
||||
```
|
||||
I have a Next.js app and need to track page views manually with gtag
|
||||
since it's a single-page application. How do I do this?
|
||||
```
|
||||
|
||||
**Expected:** Skill invoked - Next.js + gtag + SPA tracking
|
||||
|
||||
---
|
||||
|
||||
### Test Prompt 6: Troubleshooting
|
||||
```
|
||||
My gtag.js events aren't showing up in GA4.
|
||||
The gtag snippet is installed but gtag('event') calls aren't working.
|
||||
```
|
||||
|
||||
**Expected:** Skill invoked - troubleshooting gtag implementation
|
||||
|
||||
---
|
||||
|
||||
### Test Prompt 7: Framework Integration
|
||||
```
|
||||
I'm working with a Vue.js app and need to integrate gtag tracking
|
||||
in my router navigation guards. What's the best approach?
|
||||
```
|
||||
|
||||
**Expected:** Skill invoked - Vue.js + gtag integration
|
||||
|
||||
---
|
||||
|
||||
### Test Prompt 8: File-Based Trigger
|
||||
```
|
||||
I have a main.js file where I'm calling window.gtag to track events.
|
||||
Can you review my implementation?
|
||||
```
|
||||
|
||||
**Expected:** Skill invoked - .js file + window.gtag mentioned
|
||||
|
||||
---
|
||||
|
||||
## Best Practices Compliance
|
||||
|
||||
### CLAUDE.md Checklist
|
||||
|
||||
- ✅ YAML frontmatter with name and description
|
||||
- ✅ Description follows "what + when" formula
|
||||
- ✅ Includes file type keywords (.html, .js, .jsx)
|
||||
- ✅ Includes command keywords (gtag('event'), gtag('config'), gtag('set'))
|
||||
- ✅ Includes framework keywords (React, Vue, Angular, Next.js)
|
||||
- ✅ Includes action keywords (implementing, tracking, configuring)
|
||||
- ✅ SKILL.md under 5k words (709 words)
|
||||
- ✅ Progressive disclosure (lean SKILL.md + detailed references/)
|
||||
- ✅ Imperative/infinitive form (not second person)
|
||||
- ✅ Cross-references to related skills
|
||||
- ✅ File paths use forward slashes
|
||||
- ✅ References organized in references/ subdirectory
|
||||
- ✅ Assets organized in assets/ subdirectory
|
||||
- ✅ No emojis (professional tone)
|
||||
|
||||
### Skill Quality Metrics
|
||||
|
||||
**SKILL.md:**
|
||||
- Word count: 709 (target: 600-800) ✅
|
||||
- Sections: Complete (Overview, When to Use, Commands, References) ✅
|
||||
- Examples: Concise code snippets ✅
|
||||
- Cross-references: 6 related skills ✅
|
||||
|
||||
**References:**
|
||||
- Total files: 4
|
||||
- Coverage: Complete (commands, installation, patterns, optimization) ✅
|
||||
- Detail level: Production-ready ✅
|
||||
- Code examples: Extensive ✅
|
||||
|
||||
**Assets:**
|
||||
- Template HTML: Complete implementation ✅
|
||||
- Patterns JS: Reusable functions ✅
|
||||
- Production-ready: Yes ✅
|
||||
|
||||
---
|
||||
|
||||
## Usage Instructions
|
||||
|
||||
### For Claude Code Users
|
||||
|
||||
**Invoke this skill when:**
|
||||
1. User mentions gtag.js, gtag(), or direct GA4 implementation
|
||||
2. User asks about implementing GA4 without GTM
|
||||
3. User references .html, .js, .jsx files with gtag code
|
||||
4. User mentions gtag commands (config, event, set)
|
||||
5. User needs framework-specific gtag integration
|
||||
|
||||
**Primary Use Cases:**
|
||||
- Direct website tracking without Tag Manager
|
||||
- JavaScript framework integration (React, Vue, Angular)
|
||||
- Custom event implementation via gtag
|
||||
- Ecommerce tracking with gtag.js
|
||||
- Single-page application tracking
|
||||
- User authentication and User ID management
|
||||
|
||||
**Provide:**
|
||||
- Complete gtag() command syntax
|
||||
- Production-ready code examples
|
||||
- Platform-specific installation guides
|
||||
- Performance optimization strategies
|
||||
- Troubleshooting guidance
|
||||
|
||||
---
|
||||
|
||||
## Version History
|
||||
|
||||
**v1.0 (November 2025)**
|
||||
- Initial skill creation
|
||||
- Complete gtag.js command reference
|
||||
- Installation guide for all major platforms
|
||||
- Real-world implementation patterns
|
||||
- Performance optimization guide
|
||||
- HTML template with examples
|
||||
- JavaScript pattern library
|
||||
|
||||
---
|
||||
|
||||
## Maintenance Notes
|
||||
|
||||
**Update Triggers:**
|
||||
- Google releases new gtag.js features
|
||||
- GA4 parameter limits change
|
||||
- New recommended events added
|
||||
- Framework best practices evolve
|
||||
|
||||
**Review Schedule:**
|
||||
- Quarterly review of Google documentation
|
||||
- Bi-annual testing of all code examples
|
||||
- Annual comprehensive audit
|
||||
|
||||
**Dependencies:**
|
||||
- Google Tag Platform documentation
|
||||
- GA4 official developer guides
|
||||
- Framework-specific best practices (React, Vue, Angular)
|
||||
|
||||
---
|
||||
|
||||
## Contact & Support
|
||||
|
||||
**Maintained By:** GA4 Skills Repository
|
||||
**Last Reviewed:** November 2025
|
||||
**Next Review:** February 2026
|
||||
|
||||
**Related Documentation:**
|
||||
- GA4 Skills Orchestration Plan
|
||||
- Claude Code Skills Best Practices (CLAUDE.md)
|
||||
- GA4 LLM Ingestion Documentation
|
||||
|
||||
---
|
||||
|
||||
**Skill Status:** ✅ Production-ready | Complete | Tested
|
||||
Reference in New Issue
Block a user