Google Tag Manager Track User To Add Websites To Bookmarks

Table of Contents

Updated: January 12, 2025

This article shares how to track users adding websites to bookmarks

The principle is to inject Javascript through custom HTML to monitor whether users use keyboard shortcuts to add websites to bookmarks. If so, send data to GA4 through dataLayer.push.

Note:

Here we track adding websites to bookmarks through shortcut keys Crtl+D/Command+D. We cannot track through page buttons because the browser does not provide such API.
Here we only track whether the user clicks the shortcut key Crtl+D. We are not sure whether the user finally clicks to confirm, because it will pop up a confirmation page. Only when the user clicks to confirm, the addition is successful.

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" language=JavaScript>   
  document.addEventListener('keydown', function(event) {
 
  var isCtrlOrCmd = event.ctrlKey || event.metaKey;
  var isDKey = event.key === 'd' || event.key === 'D';

  if (isCtrlOrCmd && isDKey) {
     dataLayer.push({'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: