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.