ga4-event-tracking

eryet's avatarfrom eryet

Add, review, or update GA4 event tracking on HTML websites using data attributes and a reusable JavaScript tracker. Use when wiring gtag or GTM dataLayer events, choosing event names/parameters, or extending a base GA4 tracking snippet for clicks and simple interactions.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 2, 2026
[Reporting]

When & Why to Use This Skill

This Claude skill streamlines Google Analytics 4 (GA4) event tracking implementation on HTML websites. By leveraging a reusable JavaScript tracker and standardized data attributes, it enables developers and marketers to efficiently add, review, and update event tracking for clicks and interactions. It supports both gtag.js and GTM dataLayer, ensuring consistent data collection and adherence to naming conventions for more accurate reporting and analysis.

Use Cases

  • Implementing click tracking on Call-to-Action (CTA) buttons and navigation links using standardized data attributes without writing custom JS for every element.
  • Standardizing event naming and parameter structures across a multi-page website to ensure high-quality, organized data in GA4 reports.
  • Extending a base tracking snippet to capture custom user interactions such as form submissions, UI changes, or specific element visibility.
  • Troubleshooting and validating analytics implementation by reviewing data attributes and using GA4 DebugView to confirm event payloads.
namega4-event-tracking
descriptionAdd, review, or update GA4 event tracking on HTML websites using data attributes and a reusable JavaScript tracker. Use when wiring gtag or GTM dataLayer events, choosing event names/parameters, or extending a base GA4 tracking snippet for clicks and simple interactions.

GA4 Event Tracking

Overview

Use this skill to instrument GA4 events in static HTML or simple web apps by attaching data attributes and a base JS tracker.

Quick Start

  1. Copy assets/ga4-event-tracker.js into the site (for example, js/ga4-event-tracker.js).
  2. Load it after gtag or GTM (or at the end of body).
  3. Add data attributes to elements you want to track.
  4. Validate in GA4 DebugView.

Example HTML

<button
  data-ga4-event="button_click"
  data-ga4-label="hero_signup"
  data-ga4-category="CTA"
  data-ga4-params='{"link_text":"Start free trial","value":1,"currency":"USD"}'
>
  Start free trial
</button>

Common Tasks

Add a tracked element

  • Add data-ga4-event with a stable, action-based event name.
  • Use data-ga4-label for human-readable context (button text or placement).
  • Use data-ga4-params for extra GA4 parameters (JSON string).

Extend the base tracker

  • Add more event types (e.g., submit, change, input).
  • Switch to event delegation for dynamic content.
  • Add defaults (category, labels) based on element classes or containers.
  • Add guardrails for invalid JSON in data-ga4-params.

Apply naming conventions

  • Use references/ga4-event-naming.md for event naming and parameter guidance.
  • Prefer stable, language-agnostic event names and use labels for display text.

Troubleshooting

  • If gtag is not available, the tracker falls back to dataLayer for GTM.
  • If neither gtag nor GTM is installed, events will not reach GA4.
  • Add temporary console logs to confirm event payloads.

Resources

references/

  • references/ga4-event-naming.md: Common GA4 event naming and parameters.

assets/

  • assets/ga4-event-tracker.js: Base GA4 tracking script to copy and extend.