How to Track Events with Google Tag (gtag.js)

Updated: May 6th, 2025

If you have installed GA4 on your site WITHOUT using Google Tag Manager, you’re probably dealing with gtag.js (aka Google Tag). Google Tag serves as a native tracking code library used by platforms like GA4 or Google Ads.

If you’re considering implementing event tracking on your site, you’ve likely encountered a lot of information on how to do this with GTM. But since you didn’t install GA4 using Google Tag Manager, does this mean you cannot track events?

Of course not!

So, how can you track events with Google Tag (gtag.js) and send them to GA4? Keep reading to find out!

Table of Contents

Here’s what you will learn in this article

• Assumptions
  • gtag.js installed on your site
  • Familiarity with JavaScript is required
• Things to know beforehand
• Create an event with Google Tag
  • Explore with the console
  • Enhancements to the code
  • Add a condition
  • Add an event name
  • Add Parameters
• Final Words

Assumptions

Before getting into this tutorial, there are two assumptions that I have:

1. You have installed the gtag on your site, and…
2. You are familiar with JavaScript, or are working with someone who does.

This guide is primarily for users who are implementing Google Analytics 4 tracking directly on their website using the Google Tag (gtag.js) snippet, without Google Tag Manager.

You might find yourself in this situation if:

• You have a simpler website with minimal tracking needs and prefer not to use a tag management system.
• Your Content Management System or platform has a built-in GA4 integration that uses gtag.js, and you need to add custom event tracking.
• You are a developer working in an environment where GTM is not the standard or preferred solution.
• You are troubleshooting an existing gtag.js implementation.

gtag.js installed on your site

Assuming you have installed GA4 using the gtag on your site, you will see the following code on each page of your site:

The above code will differ depending on your measurement ID. To find the measurement ID for your Google Analytics 4 data stream in the GA4 interface, go to Admin > Data collection and modification > Data streams.

Click the data stream you are interested in and find the measurement ID.

Familiarity with JavaScript is required

To track events using gtag, a solid familiarity with JavaScript is a must. While you can review some JavaScript essentials here, it’s important to note that you will likely need more advanced knowledge than what this article provides.

You may need to leave the coding to your developers (or someone familiar with JavaScript). However, it’s still crucial for you to grasp the process behind everything. This understanding empowers you to effectively communicate with your developers, guide them on what to do, and test their work.

Things to know beforehand

• Review the Google Tag developer documentation beforehand to help you understand the different commands you can use within the gtag() function.
  • We will mainly focus on the event command to send event data to GA4.
    
• As shown above, there are three parts of the event command:

1. ‘event’: This is the command and will remain unchanged.
2. ‘<event_name>’: The event name is a string and will be what you see in reports, so ensure it clearly and concisely identifies what the event is doing.
3. {<event_parameters>}: The event parameters are extra information you want to collect related to the event, provided as a key-value pair. There are some automatically tracked parameters, like language, page_location, page_referrer, page_title and screen_resolution

For both event names and parameters, follow the recommended naming convention.

There are also some event limits you’ll want to be aware of. There is a maximum of 40 characters for event names and 25 parameters per event. Please note that automatically tracked parameters are also counted towards the 25 parameter limit.

Example: These will be triggered on every pageview since no logic was added to explicitly state what actions will trigger these events (parameters are static; see an example with dynamic parameters next)

gtag('event', 'test_event_1_no_params') // example 1

gtag('event', 'test_event_2',
{'test_parameter':'hey', 'test_value':5}) // example 2

To test this, you must download and enable the Google Analytics Debugger Chrome extension to activate Debugview. Once downloaded, you need to enable the extension by clicking on the icon in the Extensions toolbar.

Once you turn on the extension (the icon will say “On”), go to Google Analytics 4. Go to Admin and select “Debug View” under Data Display.

If you or your developers implemented them correctly, you will see your events come through here.

You can click on an event to see the parameters included in the data collection.

If Debugview is not working, check out this article for some possible solutions.

Create an event with Google Tag

Now that we understand the basics, let’s dive deeper into an example. In this example, we will be tracking link clicks on a webpage and collecting the click text, click URL, click ID, and click class, too.

Explore with the console

First, you will want to get familiar with exploring your site with the console. To open the console, double-click on your webpage and select “Inspect”.

Then, navigate to the “Console” tab.

This will help you determine where the information on your site is stored. To do so, you’ll want to use two lines of code:

• The first line uses the addEventListener method, which looks for specific interactions, which, in this case, is the “click” event.
• The second line will tell us what information is available with the click event through the console.

<script>
document.addEventListener('click', function(event) { // the listener
  console.log(event); // checking what info is available in the console
});
</script>

Once you or your developer have added the above code to your site, clear the console (on the left side of the console).

Since we eventually want to make an event for just link clicks, refresh the page and click on a link on your site. One thing to note is that the console will refresh (losing all information) if you click on a link that leads to a different part of your site, so you will need to right-click on the link so it opens in a new tab and the page remains the same.

Open the console and look for the “PointerEvent”. The purpose of this exercise is for you to understand what information is collected with the event (which the PointerEvent will tell you) and to decide which of this information you would like to collect with the event.

To look through the available information for the click, expand the PointerEvent by clicking on the black arrow (this is how you can delve into the layers of information in the Console).

You can find lots of useful information if you scroll down to the target object (make sure to click the black arrow and expand the information in the object). Keep track of the information you would want to collect with your event for use in the next section as we start to build out the code for the event.

Enhancements to the code

Hopefully, you’ve now had a chance to explore the information that you can and want to collect with your event. Using the information from the PointerEvent, we will begin to build out the code for a link-click event step-by-step.

This is the code we are starting out with:

<script>
document.addEventListener('click', function(event) { // the function});
</script>

Add a condition

Although we specifically clicked on a link to see the information collected with a click event (in the example above), you may have noticed that the click event is triggered whether you click on a button, link or just anywhere on your site. Since we want to restrict our event to just link clicks, we must determine what distinguishes a link click from all the other clicks.

In this case, the tagName parameter (located in the target object) provides a unique identifier for when a click is on a link. When the parameter value is “A”, it indicates that someone has clicked on a link.

To update the code, we will add an IF statement indicating the event should only fire when the tagName parameter is “A”.

<script>
document.addEventListener('click', function(event) { // the function
  if (event.target.tagName === 'A') { // the condition
  }
});
</script>

Add an event name

Next, every GA4 event needs a name, so we must add an event name, e.g. link_click, to the code. Be sure to follow the recommended naming convention.

<script>
document.addEventListener('click', function(event) { // the function
  if (event.target.tagName === 'A') { // the condition
    gtag('event', 'link_click', { // GA4 event name
       // soon we'll add more parameters here
    });
  }
});
</script>

Add Parameters

In some cases, collecting the event name is enough if you just need to know that something happened but have no further details on that something. However, in the case of link clicks, just sending the event name is not enough. Your site certainly has many links, so how will you know which link was clicked on?

This is where parameters come in! They fill in the blanks to give you a better idea of what’s happening on your site.

We want to collect four parameters for this event: link_text, link_url, link_id, and link_class. How did I come up with the parameter names? Using the same parameters as those collected with the enhanced measurement events.

You might now be thinking about how the parameters of an element can vary depending on what a user clicks on. So, how do you collect unique information for each link click?

Good question! We will make the parameters dynamic, changing depending on what a user clicks. This is where navigating in the console comes in handy.

In this example, the data for each value will come from a parameter in the target object. We start with the event since that’s where the information is stored, and then we drill into the target object to find the parameters of interest.

For my site, the text of the link that I clicked on is found through the event.target.innerText parameter.

Notice that you cannot just put innerText since the innerText parameter is located within the target object, which is located within the event object. Every time you click the arrow to expand an object, you need to add that object to your parameter value.

So, if you just put innerText (or any other parameter within the target object), you will get an error.

By searching for where the values for the remaining parameters can be found (within the target object), the code that I would use to track link clicks is:

<script>
document.addEventListener("click", function(event) { // the function
  if (event.target.tagName === "A") {
    gtag('event', 'link_click', {
      'link_text': event.target.innerText,
      'link_url': event.target.href,
      'link_id': event.target.id,
      'link_classes': event.target.className
    });
  }
});
</script>

As always, you’ll want to test the event on the console and in Debugview. Ensure the Google Analytics Debugger Chrome extension is still on and proceed to Google Analytics 4. Go to Admin and select “Debug View” under Data Display.

Open the “link_click” event and ensure the parameters collect the correct value.

One thing to note is that if the event has an undefined parameter, it will not appear in the Parameters tab when you click the event in DebugView.

This is just an example of how you can track events with gtag.js. Your site may collect parameters differently, and you’ll likely want to track different events, so tailor this to your specific needs!

Track events with Google Tag: Final Words

While I prefer working with GTM, which I recommend, your company may have decided to go with gtag instead. Hopefully, this article was helpful and reduced any worries about tracking events with gtag.

If you want to learn how to install GA4 with GTM, check out this article. If your company is against GTM but you want to convince them to start using it, read these tips.

Remember, the code you implement will be heavily dependent on the specifics of your site, so make use of the console to inspect the different elements you want to track.

Work closely with your developer or someone who knows JavaScript (if that’s not you) to help you achieve your tracking goals since this is not something you can just copy and paste from others.