Google Analytics Event Builder
Build valid GA4 events from Google's own recommended-event catalog — pick an event and its parameters auto-fill with required/recommended hints, add a structured items[] array for ecommerce, and get live validation against GA4's real rules (reserved prefixes, 40-char names, 25-param cap). Export to gtag.js, GTM dataLayer, React/Next.js, or the server-side Measurement Protocol.
About this ToolHow it works, benefits & use casesTap to collapse
The Google Analytics Event Builder turns a GA4 event definition into copy-paste tracking code for whichever stack you ship on. Choose an event category — engagement, e-commerce, navigation, video, form, social, download, or custom — and the builder offers ready-made examples (like add_to_cart, purchase, generate_lead, or video_start) that pre-fill the event name and parameters with one click. Add your own key/value parameters with the parameter rows, then generate the snippet for gtag.js, a GTM dataLayer push, React with react-ga4, Next.js, Vue, or Angular. Before it emits code, a validator checks GA4 rules and surfaces warnings — event names over 40 characters, names that are not snake_case, more than 25 parameters, or parameter values over 100 characters. The output panel lets you copy or download the snippet with the right file name and MIME type, and a GA4 best-practices reference sits below the form.
How to Use
- 1Pick an Event category and an Output target (gtag.js, GTM dataLayer, React, Next.js, Vue, or Angular).
- 2Optionally click one of the "Load example" chips to pre-fill a recommended event name and its parameters.
- 3Type your event name in snake_case (for example button_click) in the Event name field.
- 4Add parameters with "Add parameter", filling in each key and value; remove rows with the trash button.
- 5Press "Generate event code", review any validation warnings shown above the output, then copy or download the snippet.
Key Benefits
- Emits code for six targets: gtag.js, GTM dataLayer, React (react-ga4), Next.js, Vue, and Angular
- One-click example loader for each category pre-fills realistic GA4 event names and parameters
- Built-in GA4 validation flags non-snake_case names, 40-char overflows, >25 params, and long values
- Arbitrary key/value parameters via add/remove rows for fully custom events
- Download with the correct file name and MIME type per target (.js, .tsx, or .ts)
- Inline GA4 best-practices list covering naming, parameter limits, and PII avoidance
- Configuration persists in your browser between visits
Common Use Cases
- Scaffolding a purchase or add_to_cart e-commerce event with currency, value, and items
- Generating a react-ga4 snippet for a button-click event in a React app
- Producing a GTM dataLayer.push payload for a tag-manager-driven setup
- Wiring form_submit or generate_lead tracking onto a contact form
- Checking that a hand-written event name follows GA4 naming rules before shipping
Fire this when the event occurs
gtag('event', 'purchase', {
"transaction_id": "T_12345",
"currency": "USD",
"value": 29.99,
"coupon": "SUMMER10",
"shipping": 4.99,
"tax": 2.5,
"items": [
{
"item_id": "SKU_123",
"item_name": "Example product",
"price": 29.99,
"quantity": 1
}
]
});Valid GA4 event
Passes GA4’s naming, limit, and schema checks.
GA4 event
A user completes a purchase.
Parameters (6)
Items (1)
Built on GA4’s recommended-event spec
Google defines ~30 recommended events — purchase, add_to_cart,sign_up, search and more — each with an expected set of parameters. Using the recommended name and shape is what unlocks GA4’s prebuilt reports and ecommerce funnels. Pick an event here and its parameters appear pre-filled with required and recommended hints, so you ship the right shape.
Validated against GA4’s real limits
The linter enforces what GA4 actually rejects: event/parameter names ≤ 40 characters using only letters, numbers and underscores; no reserved ga_, google_, or firebase_prefixes; no reserved event names; and a maximum of 25 parameters per event. It also nudges you when value is set without currency.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- JavaScript FormatterFormat and beautify JavaScript code
- UTM Parameter GeneratorBuild consistent UTM campaign URLs with smart slugification, decode existing URLs, and generate a full sources × mediums × creatives matrix at once — export to CSV/TSV/JSON for your campaign spreadsheet
- Markdown Link CheckerCheck for broken links in Markdown files
- Sitemap Priority CalculatorPaste a list of URLs and get a complete XML sitemap with priorities from a transparent, tunable model — each URL auto-classified by type & depth, with a per-row score breakdown and priority distribution analysis
- llms.txt GeneratorBuild a spec-compliant llms.txt (and llms-full.txt) so AI crawlers like ChatGPT, Claude & Perplexity understand your site
- Twitter Card ValidatorValidate Twitter Card meta tags
It generates six variants of the same event: a gtag.js call, a GTM dataLayer.push, a React snippet using react-ga4, a Next.js client-component example, a Vue methods example, and an Angular method. The download button picks the matching file name and MIME type automatically — for instance ga-event.tsx for React and Next.js, ga-event.ts for Angular.
When you generate, the builder validates the event against GA4 conventions and lists any warnings: a missing event name, names longer than 40 characters, names that do not start with a letter or contain anything other than letters, numbers, and underscores, more than 25 parameters, parameter keys over 40 characters, and string parameter values over 100 characters. Warnings do not block generation — they are guidance.