Event Builder - Custom Event Generator

About

Custom Event Builder is a side-panel Chrome extension that generates production-ready tracking event code for GA4 and Microsoft Clarity — without writing a single line of JavaScript from scratch.

Perfect for marketers, analysts, and developers who need to instrument custom events quickly and accurately.

──────────────────────────────
HOW IT WORKS
──────────────────────────────

1. SELECT YOUR TOOLS — Choose GA4, Microsoft Clarity, or both

2. CONFIGURE YOUR EVENT — Pick the event type, name your event, and use the built-in element picker to target any element on the page by clicking it.

3. GET YOUR CODE — Copy production-ready JavaScript. Choose between Direct Install (paste into your site) or GTM (Google Tag Manager custom HTML tag), with step-by-step GTM setup instructions included.

──────────────────────────────
EVENT TYPES SUPPORTED
──────────────────────────────

• Click — fire when a button, link, or any element is clicked
• Change — fire when an input, select, or textarea value changes
• Form Submit — fire when a specific form is submitted
• Hover — fire when the user hovers over an element
• Page Load — fire on every page load
• DataLayer Push — fire when a specific dataLayer event is detected
• Element Visible — fire when an element enters the viewport (configurable threshold)
• Scroll Depth — fire at configurable scroll milestones (25%, 50%, 75%, 100%)
• Timer / Time on Page — fire after a configurable delay

──────────────────────────────
KEY FEATURES
──────────────────────────────

✓ Visual element picker — click any element on the page to capture its CSS selector automatically
✓ Multi-selector support — track multiple elements with a single event
✓ Firing conditions — add URL, cookie, localStorage, sessionStorage, CSS match, or GTM variable conditions
✓ GA4 event parameters — attach custom key/value parameters to any GA4 event
✓ Clarity custom tags — set custom tags alongside Clarity events
✓ GA4 event name validation — real-time warnings for invalid event names
✓ Dynamic selector detection — warns if your selector may break on page reload
✓ Save & manage events — save your events locally, load them back, duplicate, and edit
✓ Export & import — back up all saved events as JSON and restore them on any machine
✓ GTM step-by-step guide — each event type includes tailored GTM setup instructions

──────────────────────────────
PRIVACY
──────────────────────────────

This extension does not collect, transmit, or store any personal data. All saved events are stored locally on your device using Chrome's built-in storage API. No analytics, no tracking, no external servers.