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

gtag.js Installation
- Complete snippet installation
- Platform-specific guides (WordPress, Shopify, React, Vue, Angular, Next.js)
- Verification methods
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
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
Advanced Implementation
- Single-page application (SPA) tracking
- Custom user properties
- Performance optimization
- Error handling
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:

User mentions gtag.js, gtag(), or direct GA4 implementation
User asks about implementing GA4 without GTM
User references .html, .js, .jsx files with gtag code
User mentions gtag commands (config, event, set)
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