GA4 Event Tracking Without Writing Code: The GTM Visual Guide.

GA4's enhanced measurement handles the basics — page views, scrolls, outbound clicks. But what about tracking specific button clicks, form submissions, video plays, or CTA interactions? Most guides tell you to write JavaScript. You don't need to.

Google Tag Manager's built-in click tracking, form tracking, and visibility triggers let you set up custom GA4 events without touching your site's code. Here's the complete visual guide.

Step 1: Enable Built-In Variables in GTM

Before creating any triggers, you need to enable the click, form, and visibility variables. GTM ships with these disabled by default to keep the variable list clean, but every no-code event you want to track depends on them. This is a one-time setup per container and takes under a minute — you'll save this time back on the very first trigger you create because the condition fields actually have data to match against.

1. Open your container and go to Variables → Configure (top right of the built-in variables table).
2. Under Clicks, enable: Click Element, Click Classes, Click ID, Click URL, Click Text.
3. Under Forms, enable: Form Element, Form Classes, Form ID, Form URL, Form Text.
4. Under Visibility, enable: Percent Visible, On-Screen Duration.
5. Close the dialog — changes save automatically.

These variables now capture information about every click and form interaction in Preview mode. You'll reference them in the trigger conditions below.

Step 2: Track a Button Click Without Writing JavaScript

The cleanest way to track a CTA click is to match on visible text (most stable) or the CSS class/ID if the button is rendered dynamically. This example tracks clicks on a "Start Free Trial" button. The trigger will fire on any element whose visible text contains that phrase, so it works whether the CTA is a <button>, an <a>, or a styled <div>.

Create the Trigger:

1. Go to Triggers → New and name it "Click — Start Free Trial CTA".
2. Choose Click — All Elements as the trigger type.
3. Set to "Some Clicks" and add condition: Click Text contains Start Free Trial.
4. For more precision on dynamic pages, use Click ID equals cta-primary or Click Classes contains btn-primary.

Create the GA4 Event Tag:

1. Go to Tags → New → Google Analytics: GA4 Event.
2. Select your existing GA4 Configuration tag from the dropdown.
3. Event Name: cta_click (snake_case, see naming rules below).
4. Add event parameters: button_text = {{Click Text}}, page_location = {{Page URL}}.
5. Set the trigger to the "Click — Start Free Trial CTA" trigger you just made.
6. Save, preview in Tag Assistant, then publish.

Step 3: Track Form Submissions (Contact, Newsletter, Lead Gen)

Form tracking catches high-intent conversions — contact form completions, newsletter signups, demo requests. GTM's native Form Submission trigger handles 80% of cases without custom code, though JavaScript-heavy SPAs and forms that submit via AJAX may need the Form Element trigger or a dataLayer push from your developer. The two checkboxes below are essential; most broken form tracking we audit is caused by leaving them off.

1. Create a trigger: Form Submission.
2. Enable "Wait for Tags" (default 2000ms) and "Check Validation".
3. Set to "Some Forms" and filter by Form ID or Form Classes to target one form at a time.
4. Create a GA4 event tag with event name form_submit.
5. Add parameters: form_id = {{Form ID}}, form_destination = {{Form URL}}.

Pro tip: "Check Validation" ensures the trigger only fires on valid submissions — not on failed attempts where the browser blocks submission due to missing required fields. Without it, you'll inflate your conversion counts by 20-40% depending on how forgiving your form is.

Step 4: Track Scroll Depth Beyond the Default 90%

GA4's enhanced measurement tracks scroll at 90% only. That's fine for identifying whether users reach the bottom, but it tells you nothing about whether they read past the hero or abandoned mid-article. For editorial sites, product pages, and long-form landing pages, you'll want thresholds at 25%, 50%, 75%, and 100% so you can see the drop-off curve. Disable the default tracking first or you'll get duplicate 90% events.

1. In GA4, go to Admin → Data Streams → [your stream] → Enhanced measurement and disable Scrolls.
2. In GTM, create a Scroll Depth trigger.
3. Set "Vertical Scroll Depths" to Percentages: 25,50,75,100.
4. Fire the trigger on all pages (or filter to specific URL patterns).
5. Create a GA4 event tag: event name scroll, parameter percent_scrolled = {{Scroll Depth Threshold}}.

Step 5: Track Element Visibility (Did Users Actually See It?)

Want to know if users actually saw your pricing section, testimonial carousel, or below-the-fold CTA? Element Visibility triggers fire when a specific DOM element enters the viewport by a configurable percentage. This is the most reliable way to measure real exposure — scroll depth is a rough proxy, but visibility triggers account for users who skim past a section quickly versus those who linger.

1. Create a trigger: Element Visibility.
2. Selection method: CSS Selector (e.g., #pricing-section or section.testimonials).
3. Set "Minimum Percent Visible" to 50% — strikes a good balance between accuracy and overfiring.
4. Fire on: "Once per page" to avoid duplicate events on the same visit.
5. Create a GA4 event: section_view with parameter section_name = pricing.

GA4 Event Naming Best Practices

GA4 has firm limits and naming conventions that, if violated, cause events to be silently dropped or truncated. These aren't documented clearly in one place, so teams run into them one at a time as they scale. Every limit below comes directly from Google's public GA4 quotas documentation as of 2025. Follow these rules from day one — it's much harder to rename events after they've been firing for months and powering reports.

• Use snake_case: cta_click, not CTA Click or ctaClick.
• Never use reserved prefixes: ga_, google_, firebase_.
• Hard limits: 40 characters for event names, 40 for parameter names, 100 for parameter values.
• Max 500 distinct event names per property — exceed this and new event names are ignored.
• Register important parameters as custom dimensions in GA4, otherwise they won't appear in standard reports.