更新时间：2024年6月19号
将网页添加到浏览器收藏夹，通常意味着用户认为该页面具有较高价值，希望以后再次访问。对于内容型网站、技术博客、知识库等网站来说，这是一项具有参考意义的用户行为。
本文将介绍如何使用GTM监听页面添加浏览器收藏夹的操作，并将事件发送到GA4进行统计分析。
需要说明的是，由于浏览器安全机制的限制，我们无法判断用户是否最终完成收藏，因此本方案跟踪的是收藏意图，而不是收藏成功的结果。
实现原理
目前所有主流浏览器（Chrome、Edge、Firefox、Safari 等）都不会向网页提供 API 来判断：
用户是否已经成功将当前页面添加到浏览器收藏夹。
因此，JavaScript 无法直接获取收藏成功与否。
不过，浏览器允许网页监听页面键盘事件，因此可以检测用户是否按下浏览器默认的收藏快捷键：
| 操作系统 | 快捷键 |
|---|---|
| Windows | Ctrl + D |
| macOS | Command (⌘) + D |
当检测到用户按下快捷键后，通过 dataLayer.push() 发送一个自定义事件，再由 GTM 转发到 GA4。
本方案本质上跟踪的是用户尝试添加收藏夹的行为意图，而不是收藏是否最终成功。
方案限制
由于浏览器安全机制限制，本方案存在以下限制：
- 只能跟踪快捷键操作
- 无法确认收藏是否成功
GTM配置过程
Step 1 ：创建自定义HTML标签
在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>
[/collapse
Step 2：创建自定义事件触发器
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为“Bookmark”，然后做如下设置：
Step 3：设置GA4事件
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-Event-AddtoBookmark”，然后做如下设置：
事件名称命名为AddtoBookmark
Step 4：预览调试
配置好后，还需要在 GTM 里预览调试，在GTM 里点击「预览」，打开页面后，模拟所需测试的行为，再返回到Tag Assistant，看是否有发送事件，代码是否有触发：
事件正常触发，可以发布到线上。
Step 5：查看GA4数据
上线后，过段时间就可以在GA4的事件报告里看数据：
还确实有不少人将网站或文章添加到收藏夹。
数据解读建议
收藏夹事件虽然不能代表用户最终收藏成功，但仍然是一个具有参考价值的用户意图指标
