Updated: January 12, 2025
This guide explains how to implement GA4 custom event tracking using jQuery.
This approach is useful when:
- You cannot modify backend code
- You need to track clicks on specific UI elements
- You want flexible event tracking based on CSS selectors
Instead of relying on built-in GTM click variables only, we use jQuery event listeners to capture interactions more precisely and push custom events into GA4.
How It Works
The tracking flow is:
User Click → jQuery Listener → dataLayer.push → GTM Trigger → GA4 Event
jQuery listens for click events on elements with a specific class or selector. When the event occurs, we push a custom event into the dataLayer, which GTM then uses to fire a GA4 event tag.
Use Case Example
Let’s see how to use jQuery to track clicks at this location:
Step 1: Identify the Element to Track
Move the mouse to the location you want to track, click “Inspect” in the right mouse button, and then view the HTML structure:
In this case, the class g-mono can be used as a selector.
Best practice: Use a stable and unique class or attribute to avoid accidental tracking issues.
Step 2: Create jQuery Click Listener
In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Custom HTML」，Name it “HTML-Listen Home Icon Click”, and make the following settings:
Paste the following code:
<script>
$(".g-mono").click(function(){
dataLayer.push({'event': 'home_icon_click'});
})
</script>
Important: Replace .g-mono with the actual class you want to track.
Step 3: Create a Custom Event Trigger in GTM
In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「Custom Event」，Name it “Home Icon Click”, and make the following settings:
This ensures GTM listens only when the jQuery event fires.
Step 4: Create GA4 Event Tag
Now send the event to GA4.
In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics: GA4 Event」，Name it “GA4-Event-Home Icon Click”, and make the following settings:
The event name is home_icon_click
Step 5: Test Using GTM Preview Mode
Next is preview debugging.
Tags is triggered and can be published.
Step 6 : Verify Data in GA4 Reports
Generally, after 24 hours, we can see the data in GA4, such as:
