Update time: January 13, 2025
This article introduces the addEventListener method for event tracking.
Use custom HMTL to add addEventListener to attach an event listener to an HTML element. When a specific event occurs (such as a click, mouse movement, or keyboard input) on that element, dataLayer.push is executed.
This method is used a lot, such as:
- Google Tag Manager Track User To Add Websites To Bookmarks
- Tracking User Copy Text Behavior in Google Analytics 4
- Form Tracking for Contact Form 7 on Google Tag Manager
Next, take tracking for adding a website to a bookmark as an example to see how to set it up:
Step 1 : Custom HTML to inject javascript
In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Custom HTML」，Name it “HTML-Boomark”, and make the following settings:
Source Code：
<script type="text/javascript">
document.addEventListener('keydown', function(event) {
var isCtrlOrCmd = event.ctrlKey || event.metaKey;
var isDKey = event.key === 'd' || event.key === 'D';
if (isCtrlOrCmd && isDKey) {
<a href="https://www.bbccss.com/tag/datalayer-push" title="Read more Articles about dataLayer.push" target="_blank">dataLayer.push</a>({'event':'AddtoBookmark'});
}
});
</script>
Step 2 : Set Up the Trigger
In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「Custom Event」，Name it “Bookmark”, and make the following settings:
Step 3 : Set Up the Tags
In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics: GA4 Event」，Name it “GA4-Event-AddtoBookmark”, and make the following settings:
The event name is AddtoBookmark
Step 4 : Preview and Publish
Next is preview debugging.
Tags is triggered and can be published.
Read More：
Step 5 : Verify Data in Reports
Generally, after 24 hours, we can see the data in GA4, such as:
Read More：
- GA4 Event Tracking Series ⓪ —— Rules and Limits for GA4 Events
- GA4 Event Tracking Series ① —— Automatically Collected Events
- GA4 Event Tracking Series ② —— Enhanced Measurement Events
- GA4 Event Tracking Series ③ —— Recommended Events
- GA4 Event Tracking Series ④ —— Custom Events (gtag Method）
- GA4 Event Tracking Series ⑤ —— Custom Events (Attributes Method)
- GA4 Event Tracking Series ⑦ —— Custom Events (addEventListener Method）
- GA4 Event Tracking Series ⑧ —— Custom Events (jQuery Method)
- GA4 Event Tracking Series ⑨ —— Custom Events (ga-data Method)
- GA4 Event Tracking Series ⑩ —— Custom Events (dataLayer.push Method）
- GA4 Event Tracking Series ⑪ —— Create Event（Codeless Event Tracking）
- GA4 Event Tracking Series ⑫ —— Modify Event
