By Emil Klitmose—March 5

How to Track Button Clicks in Google Analytics 4 Without Tag Manager

How to Track Button Clicks in Google Analytics 4 Without Tag Manager

Quick Answer

You can track button clicks in Google Analytics 4 without Tag Manager by using the gtag.js event method directly in your HTML or JavaScript code.

Why You Need to Track Button Clicks

Tracking button clicks on your website is essential for understanding user engagement, optimizing conversions, and making informed business decisions. While Google Tag Manager is a powerful tool, many users prefer a direct method without added complexity.

Thankfully, Google Analytics 4 (GA4) provides an intuitive way to achieve this without involving Tag Manager.

Benefits of Button Click Tracking in GA4

Understanding button clicks provides valuable insights into:

  • User behavior and preferences - Which offers or features attract users most
  • Conversion paths - How users navigate toward key actions
  • Site usability - Which elements are working and which aren't
  • Campaign effectiveness - Which marketing efforts drive meaningful engagement
  • Optimization opportunities - Areas needing improvement based on interaction data

By tracking button clicks directly in GA4, you simplify your analytics implementation while still gaining access to critical user interaction data.

Step-by-Step Guide to Track Button Clicks in GA4

Step 1: Ensure GA4 Is Properly Installed

Before tracking button clicks, confirm that your GA4 tracking code is correctly installed on your website:

  1. Log in to your Google Analytics account
  2. Navigate to Admin → Data Streams
  3. Verify your web stream is active and collecting data
  4. Check that the tracking code is properly implemented on your website

Your website must already be sending data to your GA4 property before you can track specific events like button clicks.

Step 2: Leverage GA4's Enhanced Measurement

GA4 automatically tracks certain events through its built-in Enhanced Measurement feature:

  1. Go to your GA4 property and click on Admin
  2. Select Data Streams
  3. Click your desired web stream
  4. Under Enhanced Measurement, ensure the toggle is switched ON
  5. Click the gear icon (⚙️) to see detailed settings
  6. Verify that options like "Outbound clicks" and "Site search" are enabled

Enhanced Measurement automatically tracks some link clicks, but for specific buttons, you'll need custom event tracking.

Step 3: Add Event Tracking Code to Buttons

Method 1: Using HTML Onclick Attributes

Add the GA4 event code directly to your button's HTML:

<button onclick="gtag('event', 'button_click', {
  'event_category': 'Engagement',
  'event_label': 'Sign Up Button'
});">
  Sign Up Now
</button>

This method is perfect for:

  • Quick implementation
  • Non-developers who can edit HTML
  • Testing specific buttons without changing site-wide code

Method 2: Using JavaScript Event Listeners

For a cleaner separation of concerns, use JavaScript to attach event listeners:

// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Find your button by ID
  const signupButton = document.getElementById('signup-button');
  
  // Add click event listener
  if (signupButton) {
    signupButton.addEventListener('click', function() {
      // Send event to GA4
      gtag('event', 'button_click', {
        'event_category': 'Engagement',
        'event_label': 'Sign Up Button',
        'button_id': 'signup-button'
      });
    });
  }
});

This approach is better for:

  • Multiple buttons that need tracking
  • Maintaining clean HTML
  • Developer-oriented workflows
  • Adding additional logic before/after tracking

Method 3: Track All Buttons with a Single Script

To track multiple buttons without adding code to each one, use this approach:

document.addEventListener('DOMContentLoaded', function() {
  // Select all buttons with a specific class
  const trackableButtons = document.querySelectorAll('.track-clicks');
  
  // Add listeners to each button
  trackableButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      gtag('event', 'button_click', {
        'event_category': 'Engagement',
        'event_label': button.textContent || 'Unlabeled Button',
        'button_id': button.id || 'no-id',
        'button_class': button.className
      });
    });
  });
});

Then, simply add the track-clicks class to any button you want to monitor:

<button class="track-clicks" id="download-button">Download PDF</button>

Step 4: Verify Events in GA4

Once implemented, verify your tracking setup works correctly:

  1. Go to GA4 and navigate to Reports → Realtime
  2. In another tab, visit your website and click the button you're tracking
  3. Check if the event appears in the Realtime report
  4. For more detailed analysis, go to Reports → Engagement → Events
  5. Look for your custom event (e.g., button_click)

It may take up to 24 hours for events to appear in standard reports, though they should appear in real-time reports almost immediately.

Customizing Your Button Click Events

To get more value from your button click tracking, consider including these additional parameters:

  • Button location - Where on the page the button appears
  • Page title - The page where the click occurred
  • User journey stage - Which step in the funnel this represents
  • Button variation - For A/B testing different button styles or text

Example with additional parameters:

gtag('event', 'button_click', {
  'event_category': 'Engagement',
  'event_label': 'Sign Up Button',
  'button_location': 'header',
  'page_title': document.title,
  'journey_stage': 'consideration',
  'button_variation': 'green_rounded'
});

Creating GA4 Reports for Button Clicks

To analyze your button click data effectively:

  1. Go to Explore in your GA4 property
  2. Create a new exploration
  3. Add your button click event as a dimension
  4. Add metrics like event count or conversions
  5. Segment by user demographics or behavior
  6. Save and schedule regular reports

Troubleshooting Button Click Tracking

Common issues and solutions:

  • Events not showing up - Verify your GA4 tracking code is correctly installed
  • Duplicate events - Check for multiple event listeners on the same element
  • Inconsistent data - Ensure event parameters are consistently named
  • Buttons in iframes - These require special handling with postMessage API

GA4 vs. Universal Analytics for Button Tracking

If you're transitioning from Universal Analytics, note these key differences:

  • GA4 uses an event-based model rather than a category/action/label hierarchy
  • GA4 has automatic event collection via Enhanced Measurement
  • GA4 uses parameters rather than category/action/label fields
  • GA4 allows for more flexible event parameters

Conclusion

Tracking button clicks directly in Google Analytics 4 without Tag Manager is straightforward with the methods described above. By implementing these tracking techniques, you can gain valuable insights into user behavior without adding unnecessary complexity to your analytics setup.

Start with a simple implementation, verify it works correctly, and then expand to more comprehensive tracking as needed. With this data, you'll be equipped to make data-driven decisions to improve your website's user experience and conversion rates.

For additional analytics options, consider using a dedicated link tracking tool like Beckli alongside GA4, especially for tracking links across multiple domains or platforms.