Sending custom events with gtag

Sign-ups, leads, feature usage and anything business-specific must be sent by you.

Anything that is not a page view, scroll or click needs an explicit call:

gtag('event', 'sign_up', { method: 'email' });

The first argument is the event name, the second an object of parameters. Before inventing a name, check the recommended events list (login, sign_up, search, share, generate_lead, select_content, tutorial_begin, and the ecommerce set). Recommended names are not magic in themselves, but GA4 and Google Ads know their expected parameters, prebuilt reports pick them up, and predictive metrics rely on purchase specifically.

Rules for names and parameters:

snake_case, letters/digits/underscores, max 40 characters, case-sensitive (Sign_Up and sign_up are two events).
Do not prefix with google_, ga_ or firebase_; those are reserved.
Up to 25 custom parameters per event; values up to 100 characters; numeric values go in as numbers, not strings, if you will make a metric of them.
Keep cardinality sane. A parameter like search_term is fine; a parameter holding a full URL with session tokens creates millions of distinct values and the dimension shows (other) in reports.

Where to fire the event: on the action that means something, usually the success of a form submission (after the server answers), not the button click. Attach the handler in JavaScript rather than inline onclick, so the tracking lives in one place.

If you use GTM, the equivalent is pushing to dataLayer and letting a GA4 event tag read it; the event naming rules are identical.

Example

// Recommended event: GA4 knows sign_up and its 'method' parameter
document.querySelector('#signup-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const res = await fetch('/api/signup', { method: 'POST', body: new FormData(e.target) });
  if (res.ok) {
    gtag('event', 'sign_up', { method: 'email' });
  }
});

// Custom event: nothing in the recommended list fits, so name it yourself
document.querySelector('#pricing-toggle').addEventListener('change', (e) => {
  gtag('event', 'pricing_toggle', {
    billing_period: e.target.checked ? 'yearly' : 'monthly',  // custom parameter
    plan_count: 3                                             // numeric -> custom metric later
  });
});

// Avoid: a parameter that explodes into millions of values
// gtag('event', 'view', { full_url: location.href }); // page_location already exists

Remember

gtag('event', name, params) is how you record business interactions
Prefer recommended event names; custom names are fine when nothing fits
Fire on success, keep names consistent, avoid high-cardinality parameters

Check yourself

Which event name will GA4 treat as a different event from sign_up?
Where should a 'form submitted' event usually fire?

Official docs: support.google.com/analytics/answer/12229021

Example

Remember

Check yourself

Builds on

Unlocks