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.

Getting Started: GTM Setup

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.

Tracking Clicks and Forms

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 depending on how forgiving your form is.

Advanced Interaction Tracking

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.

Naming, Limits, and Best Practices

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.

Frequently Asked Questions

Can I track events in GA4 without coding?

Yes. GA4 offers two no-code tracking mechanisms. Enhanced Measurement, built into GA4's data stream settings, automatically captures scrolls, outbound clicks, site search, video engagement, and file downloads without any additional setup. For custom events — specific button clicks, form submissions, CTA interactions, element visibility — Google Tag Manager provides a visual interface for creating triggers and tags without writing JavaScript. GTM requires a one-time code snippet installation on your site, but all subsequent tag and trigger changes are made through the GTM interface and require no site code changes.

What is GA4 Enhanced Measurement?

Enhanced Measurement is a feature built into GA4 data streams that automatically tracks common user interactions beyond the standard page_view event. When enabled, GA4 collects scroll depth (at 90%), outbound link clicks, site search queries (detected from URL parameters), video engagement for YouTube embeds, and file downloads. Each of these can be toggled on or off individually in Admin → Data Streams → [stream] → Enhanced measurement. Enhanced Measurement requires no GTM or code changes — it works through the standard GA4 tag. It is a good baseline but has limitations: scroll is only captured at 90%, and it cannot track custom interactions specific to your site's UI.

How do I track button clicks in GA4 without GTM?

Tracking specific button clicks without GTM requires adding code directly to your site or CMS. The most common approach is to call gtag('event', 'cta_click', { button_text: 'Start Free Trial' }) in an onclick attribute or a JavaScript event listener attached to the button. If your CMS (WordPress, Webflow, Squarespace) has a GA4 integration or plugin, you may be able to configure this through settings rather than raw code. Without GTM, every new event you want to track requires a developer code change or a CMS setting update. GTM exists precisely to decouple this work from the development cycle.

What events does GA4 track automatically?

GA4 automatically collects a set of events for every property, regardless of implementation. These include first_visit, session_start, page_view, user_engagement, and scroll (at 90% via Enhanced Measurement). If you have an app implementation, additional lifecycle events are collected automatically. On top of these, Enhanced Measurement adds outbound clicks, site search, video engagement, and file downloads when enabled. Events you must configure yourself include conversions, purchases, and any interaction specific to your site's content or business logic.

What is the difference between automatic and custom events in GA4?

Automatic events are collected by GA4 without any configuration — they fire based on built-in detection logic. Custom events are events you define and trigger yourself, either through GTM, direct gtag calls, or the Measurement Protocol. Between these two categories, GA4 also defines recommended events: a list of standardized event names (like purchase, add_to_cart, sign_up, login) that Google has pre-built reporting support for. Using recommended event names where they fit your use case gives you better compatibility with GA4's standard reports and Google Ads conversion tracking.

How do I track form submissions in GA4 without code?

Use GTM's Form Submission trigger type. In GTM, create a new trigger, select Form Submission, enable "Wait for Tags" and "Check Validation," and filter to target the specific form using its ID or CSS class. Create a GA4 Event tag pointing to that trigger with an event name like form_submit and parameters for the form ID and destination URL. Publish the container. No changes to your site's code are needed. This approach works for standard HTML forms. Forms that submit via AJAX or within single-page application frameworks may behave differently and sometimes require a dataLayer push from a developer to reliably intercept the submission event.

What are GA4 recommended events?

Recommended events are a standardized list of event names defined by Google that come with pre-built reporting support in GA4 and integration with Google Ads. Examples include purchase, add_to_cart, begin_checkout, view_item, sign_up, login, search, and share. When you use the recommended event name and its defined parameters (like value, currency, and items for purchase), GA4 populates its Monetization and Ecommerce reports automatically. Using arbitrary custom event names for actions that have a recommended equivalent means losing that built-in reporting without any measurement benefit.

Do I need GTM to track events in GA4?

No. GTM is the most practical option for most teams because it separates tag management from site deployments, but it is not required. You can track custom events by calling gtag('event', ...) directly in your site's JavaScript, by sending hits via the Measurement Protocol from your server, or through Firebase SDK calls in a mobile app. CMS plugins and website builders sometimes offer GA4 event configuration through their own interfaces. The advantage of GTM is that non-developers can create and modify event tracking without touching the codebase — which is particularly valuable in environments where development cycles are slow or expensive.