GA4 Custom Events: jQuery Method

Table of Contents

Updated: January 12, 2025

This section introduces another method of event tracking, which is achieved by binding the class attribute with jQuery.

The principle is to use jQuery to listen for click events of elements with a specific class. You can use the event binding method. If someone clicks, send the event through datalayer.push.

Next, let’s see how to use jQuery to track clicks at this location:

Step 1 : View Page Source Code

Move the mouse to the location you want to track, click “Inspect” in the right mouse button, and then view the page elements:

We can see that the class g-mono is unique and jQuery can listen and bind to this class attribute.

Step 2 : Set Up the Custom HTML

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:

Source Code：

<script>
  $(".g-mono").click(function(){
      dataLayer.push({'event': 'home_icon_click'});
  
  })
</script>

Just replace the g-mono in the code with the class you actually need to track the position.

Step 3 : Set Up the Trigger

In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「Custom Event」，Name it “Home Icon Click”, and make the following settings:

Step 4 : Set Up the Tags

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 : Preview and Publish

Next is preview debugging.

Tags is triggered and can be published.

Step 6 : Verify Data in Reports

Generally, after 24 hours, we can see the data in GA4, such as:

If you don't understand, You can leave a comment below.