更新时间：2024年6月19号
这一篇分享的是：如何通过Google Tag Manager（GTM）跟踪用户将网站添加到浏览器收藏夹的行为，并将该行为发送到Google Analytics 4（GA4）中进行分析。
这是一个偏行为意图类（Intent）指标，虽然无法做到100%精确，但在内容型网站、技术博客中，具有一定参考价值。
实现原理说明
浏览器不提供任何 API可以直接告诉你：「用户是否成功将页面加入收藏夹」
但浏览器允许我们监听键盘事件，判断用户是否触发了「添加收藏夹」的快捷键
因此本方案的本质是：监听用户是否按下了 Ctrl + D（Windows）或 Command + D（Mac）
一旦监听到该快捷键，就认为用户产生了「添加收藏夹的意图」，通过 dataLayer.push() 发送事件，再由GTM转发给GA4
重要限制（必须说明）
只能跟踪快捷键行为
- Ctrl + D（Windows）
- Command + D（Mac）
通过页面按钮触发「添加收藏夹」是无法跟踪的，浏览器没有相关 API。
无法确认是否“最终添加成功”：快捷键触发后，浏览器会弹出一个确认窗口，用户可能会点击关闭，这个跟踪只能确认用户有“尝试添加收藏”的行为，而不是最终结果。
GTM配置过程
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：设置GA4事件代码
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-Event-AddtoBookmark”，然后做如下设置：
事件名称命名为AddtoBookmark
Step 4：预览调试
接下就是预览调试，如果你不会调试，请看：Google Tag Manager中新的调试方式：Tag Assistant
事件正常触发，可以发布到线上。
Step 5 ：GA4 数据查看方式
上线后，过段时间就可以在GA4的事件报告里看数据：
还确实有不少人将网站或文章添加到收藏夹。
数据解读建议
可以作为「高价值内容」的辅助判断指标。
