GA4 Custom Event Tracking Without Google Tag Manager: Complete Guide

GA4 Custom Event Tracking Without Google Tag Manager: Complete Guide

Want to track custom user actions in Google Analytics 4 but don’t want to use Google Tag Manager? You’re not alone. Many developers and marketers prefer a direct approach for GA4 custom event tracking. This guide shows you exactly how to implement GA4 custom events without Google Tag Manager step by step.

Estimated reading time: 9 minutes 16 Views
On this page
Last Updated:

Google Analytics 4 (GA4) is the new standard for website and app analytics. But if you’re not a fan of Google Tag Manager (GTM), or you want more direct control over your event tracking, you might be wondering: Can you set up GA4 custom event tracking without Google Tag Manager?

The answer is yes and in many cases, it’s the best way for developers and technical marketers to get accurate, real-time data on user interactions. Whether you want to track button clicks, form submissions, video plays, or any other custom action, you can do it with GA4’s native gtag.js integration or the Measurement Protocol.

This guide covers everything you need to know about GA4 custom event tracking without Google Tag Manager. You’ll learn the pros and cons of skipping GTM, how to implement event tracking with gtag.js, how to use the Measurement Protocol for server-side events, and best practices for debugging and reporting.

Let’s dive in.

Note: This guide is for anyone who wants to track custom events in GA4 without the extra layer of Google Tag Manager. If you’re looking for a GTM-based approach, check out Google’s official documentation or our dedicated GTM event tracking guide.

Why Track GA4 Custom Events Without Google Tag Manager?

Google Tag Manager is a powerful tool for marketers and analysts. But it’s not always the right fit for every project or team. Here’s why you might want to implement GA4 custom event tracking directly, without GTM:

  • Performance: Direct gtag.js integration means less JavaScript overhead and potentially faster page loads.
  • Control: Developers can manage event triggers and parameters in code, reducing the risk of misconfigured tags or accidental changes.
  • Security: Fewer third-party scripts and containers means a smaller attack surface and less risk of tag injection vulnerabilities.
  • Debugging: It’s easier to trace event firing and data payloads in your codebase, especially for complex or dynamic interactions.
  • Compliance: Some organizations have strict policies about third-party tag managers or need to minimize client-side scripts for privacy reasons.

Bottom line: If you want a lean, transparent, and developer-friendly approach to GA4 event tracking, skipping GTM is a solid choice.

How GA4 Custom Event Tracking Works Without GTM

GA4 is built to be flexible. You can send custom events directly from your website or app using:

  • gtag.js: The official Google Analytics JavaScript library for client-side event tracking.
  • Measurement Protocol: An HTTP API for sending events from your server or backend systems.

Both methods let you define your own event names and parameters, giving you full control over what gets tracked and how it appears in your GA4 reports.

Further reading: For a detailed comparison of GA4 vs Universal Analytics event models, see Google’s official event documentation.

gtag.js: The Direct JavaScript Approach

gtag.js is the recommended way to send events to GA4 from your website. It’s a lightweight JavaScript library that lets you:

  • Send pageviews and custom events
  • Attach event parameters (like value, category, label, etc.)
  • Control user properties and consent settings

With gtag.js, you can trigger events from any JavaScript code no need for GTM containers or tag templates.

Measurement Protocol: For Server-Side or Backend Events

If you want to track events that happen on the server (like purchases, signups, or backend processes), you can use the GA4 Measurement Protocol. This is a REST API that lets you send event data to GA4 from any backend language (Node.js, Python, PHP, etc.).

Measurement Protocol is ideal for:

  • Tracking conversions that happen after redirects or on the server
  • Sending events from mobile apps, IoT devices, or backend systems
  • Ensuring data accuracy and avoiding ad blockers or browser limitations

Step-by-Step: GA4 Custom Event Tracking Without Google Tag Manager

Let’s walk through the process of setting up GA4 custom events directly with gtag.js. This workflow is suitable for most websites and web apps.

1. Ensure GA4 gtag.js Is Installed

First, make sure your site is using the GA4 gtag.js snippet. You can find this in your GA4 property under Admin > Data Streams > Web > Tagging Instructions.

Replace G-XXXXXXXXXX with your actual GA4 Measurement ID.

2. Identify the User Actions to Track

Decide which custom events you want to track. Common examples include:

  • Button clicks (e.g., “Sign Up” or “Download”)
  • Form submissions
  • Video starts, pauses, or completions
  • Outbound link clicks
  • Scroll depth or engagement

Write down the event names and any parameters you want to capture (e.g., button label, form type, video ID).

3. Add JavaScript Event Listeners

Use JavaScript to detect when the desired user action occurs. For example, to track a button click:

document.getElementById('signup-btn').addEventListener('click', function() { // Custom event tracking code goes here });

For multiple elements, use querySelectorAll and loop through each element.

4. Send Custom Events with gtag.js

Within your event listener, call the gtag('event', ...) function. Here’s the basic syntax:

gtag('event', 'event_name', { 'parameter1': 'value1', 'parameter2': 'value2', // ...additional parameters });

Example: Tracking a signup button click with a plan type parameter:

gtag('event', 'signup_click', { 'plan': 'pro', 'location': 'header', });

Use descriptive event names and parameters. GA4 recommends using standard event names where possible, but you can define your own for custom actions.

Pro tip: For advanced tracking, you can dynamically pass values (like product IDs or user IDs) from your page’s data attributes or JavaScript variables.

5. Verify Events in GA4 DebugView

Open your GA4 property and go to Admin > DebugView. Trigger your custom event on your site and watch for it to appear in real time. This helps you confirm that the event is firing and that parameters are being sent correctly.

If you don’t see your event, check the browser console for errors, and make sure your GA4 Measurement ID is correct.

6. Configure Event Parameters and Conversions

Once your custom events are showing up in GA4, you can:

  • Mark important events as conversions: In the GA4 Events dashboard, toggle the “Mark as conversion” switch for any event you want to track as a goal.
  • Register custom parameters: If you want to use custom parameters in reports, go to Configure > Custom Definitions and add them as event-scoped custom dimensions or metrics.

This step is crucial for reporting and analysis.

GA4 Custom Event Tracking with Measurement Protocol (Server-Side)

If you need to send events from your backend (for example, after a successful payment or API call), use the GA4 Measurement Protocol. Here’s how it works:

  1. Collect the required data (event name, parameters, user ID, etc.) on your server.
  2. Send a POST request to the GA4 Measurement Protocol endpoint:
POST https://www.google-analytics.com/mp/collect?measurement_id=G-XXXXXXXXXX&api_secret=YOUR_API_SECRET Content-Type: application/json { "client_id": "123.456", "events": [ { "name": "purchase", "params": { "transaction_id": "T12345", "value": 99.99, "currency": "USD" } } ] }

You’ll need to generate an API secret in your GA4 property. The client_id should match the user’s GA4 client ID if possible, for accurate attribution.

Measurement Protocol is ideal for tracking conversions, refunds, or other backend events that may not be visible to the client browser.

Further reading: See Google’s Measurement Protocol developer guide for full details and code examples.

Best Practices for GA4 Custom Event Tracking Without GTM

  • Use clear, consistent event names: Stick to a naming convention (e.g., snake_case or camelCase) and avoid spaces or special characters.
  • Limit the number of custom parameters: GA4 allows up to 25 custom parameters per event. Only send what you need for analysis.
  • Document your events: Keep a spreadsheet or internal wiki listing all custom events, parameters, and where they’re triggered in your codebase.
  • Test thoroughly: Use DebugView and browser console logs to ensure events are firing as expected before pushing to production.
  • Respect user privacy and consent: Only track events after obtaining user consent (if required by law or your privacy policy). Use gtag.js consent APIs to manage data collection.
  • Monitor for changes: If you update your site’s structure or JavaScript, verify that all event tracking still works as intended.

Common Use Cases and Code Examples

Track Button Clicks

document.querySelectorAll('.cta-button').forEach(function(btn) { btn.addEventListener('click', function() { gtag('event', 'cta_click', { 'button_text': btn.textContent, 'page': window.location.pathname }); }); });

Track Form Submissions

document.getElementById('contact-form').addEventListener('submit', function(e) { gtag('event', 'form_submit', { 'form_id': 'contact-form', 'page': window.location.pathname }); });

Track Outbound Link Clicks

document.querySelectorAll('a').forEach(function(link) { link.addEventListener('click', function(e) { if (link.hostname !== location.hostname) { gtag('event', 'outbound_click', { 'url': link.href }); } }); });

Track Video Plays (YouTube Example)

If you use the YouTube IFrame API, you can track video events like this:

function onPlayerStateChange(event) { if (event.data === YT.PlayerState.PLAYING) { gtag('event', 'video_play', { 'video_id': event.target.getVideoData().video_id }); } }

Debugging and Troubleshooting GA4 Custom Events

  • Use GA4 DebugView: This real-time tool shows incoming events and parameters as you interact with your site. Access it from the GA4 property under Configure > DebugView.
  • Check browser console: Use console.log() to output event data before sending. Look for errors or typos in your gtag.js calls.
  • Network tab: In Chrome DevTools, filter for collect requests to verify that event payloads are being sent to Google Analytics servers.
  • Event parameter limits: If you exceed the 25-parameter limit, some data may be dropped. Keep your events lean.
  • Consent issues: If you use a consent management platform, make sure GA4 is only initialized after consent is granted.

GA4 Custom Event Reporting and Analysis

Once your custom events are flowing into GA4, you can:

  • View them in the Events report (under Reports > Engagement > Events)
  • Mark key events as conversions for goal tracking
  • Create custom reports or explorations using event parameters
  • Segment users based on event activity (e.g., users who clicked a specific button)

For advanced analysis, use GA4’s Explore section to build funnels, path analysis, or custom segments based on your events.

Further reading: For a deep dive on GA4 event reporting, see Google’s official event documentation.

Alternatives and When to Use Google Tag Manager

While direct gtag.js integration is powerful, there are cases where Google Tag Manager might be a better fit:

  • You want non-developers to manage tracking without code changes
  • You need to deploy many third-party tags (ads, remarketing, etc.)
  • You have a complex site with many dynamic elements
  • You want to use GTM’s built-in triggers, variables, and templates

For most developer-led projects or simple sites, direct GA4 event tracking is faster, more transparent, and easier to maintain.

FAQs: GA4 Custom Event Tracking Without Google Tag Manager

Can I use both gtag.js and Google Tag Manager on the same site?

Yes, but you should avoid double-tracking the same events. If you use both, make sure only one method is sending each event to GA4.

How do I migrate from Universal Analytics to GA4 custom events?

Map your old UA event categories, actions, and labels to GA4’s event name and parameters. Update your JavaScript to use gtag('event', ...) calls with the new GA4 event model.

Do I need to register custom parameters in GA4?

Yes, if you want to use custom parameters in reports or explorations, you must register them as custom dimensions or metrics in GA4.

How can I track e-commerce events without GTM?

Use gtag.js to send recommended e-commerce events (like add_to_cart, purchase, etc.) directly from your checkout or product pages. Follow Google’s e-commerce event guide for details.

Additional Resources and Tools

Your GA4 Custom Event Tracking Playbook (No GTM Required)

Tracking custom events in GA4 without Google Tag Manager is straightforward, flexible, and developer-friendly. By using gtag.js or the Measurement Protocol, you can:

  • Track any user interaction, from clicks to form submissions and beyond
  • Send rich event data with custom parameters for granular analysis
  • Maintain full control over your analytics implementation
  • Reduce reliance on third-party tag managers and minimize script bloat

Whether you’re a solo developer, a technical marketer, or part of a larger team, this approach gives you the power to measure what matters without the overhead of Google Tag Manager.

Ready to get started? Audit your current tracking, define your key events, and implement direct GA4 event tracking today. For more advanced guides, see our step-by-step GA4 setup tutorial or explore our other analytics resources.

Was this topic helpful?
Instant Interactive Guide
Quick Insights About:   GA4 custom event tracking without Google Tag Manager
Verified insights by NextAlgoo Editorial Team.

Leave a Comment