用Google Tag Manager跟踪访客将网站添加到收藏夹

更新时间：2024年6月19号

这一篇分享的是跟踪用户将网站添加到收藏夹的行为

原理是通过自定义HTML注入javascript，监听用户是否有通过键盘快捷键去将网站添加到收藏夹的行为，如果有，通过dataLayer.push发送数据，发给GA4。

需要注意：

• 这里跟踪的是通过快捷键Crtl+D/Command+D将网站添加到收藏夹，通过页面按钮的方式跟踪不到，因为浏览器没有提供此类API。
• 这里仅仅是跟踪到用户是否有去点击快捷键Crtl+D，不确定用户最终是否点击确认，因为它会弹出一个确定的页面，用户点击确定，才添加成功

Step 1 ：自定义HTML注入javascript

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义HTML」，命名为“HTML-Boomark，将代码黏贴进入，触发器选择“All Pages”，设置后的效果如下：

代码：

<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 ：设置触发器

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为“Bookmark”，然后做如下设置：

Step 3 ：设置代码

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-Event-AddtoBookmark”，然后做如下设置：

事件名称命名为AddtoBookmark

Step 4 ：预览调试

接下就是预览调试，如果你不会调试，请看：Google Tag Manager中新的调试方式：Tag Assistant

事件正常触发，可以发布到线上。

Step 5 ：数据报告

上线后，过段时间就可以在GA4的事件报告里看数据：

还确实有不少人将网站或文章添加到收藏夹。