AgentSkillsCN

ga4-event-tracking

使用数据属性和可重用的 JavaScript 追踪器，在 HTML 网站上添加、审查或更新 GA4 事件跟踪。在连接 gtag 或 GTM 数据层事件、选择事件名称/参数，或扩展用于点击和简单交互的基础 GA4 追踪代码片段时使用。

SKILL.md
--- frontmatter
name: ga4-event-tracking
description: 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.

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

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.