本教程介绍了如何在不使用 Google Tag Manager (GTM) 的情况下，直接利用 gtag.JS 库追踪网站上的电话点击链接。通过加载 gtag 库并调用 gtag() 函数，您可以自定义事件并将其发送到 GA4，从而实现对电话链接点击的精确追踪和分析。
追踪电话链接点击：直接使用 gtag.js
虽然 Google Tag Manager (GTM) 是一种常用的追踪网站事件的方法，但直接使用 gtag.js 库也是一种可行且灵活的替代方案。这种方法无需依赖 GTM，可以直接在您的网站代码中实现自定义事件的追踪，例如追踪电话链接的点击。
步骤 1：加载 gtag.js 库
首先，确保您的网站页面已经加载了 gtag.js 库。通常，这需要在
标签中添加以下代码片段：
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA4_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'YOUR_GA4_MEASUREMENT_ID'); </script>
将 YOUR_GA4_MEASUREMENT_ID 替换为您的 GA4 衡量 ID。
步骤 2：定义 gtag() 函数
上述代码片段中，gtag() 函数被定义为将参数推送到 dataLayer 数组中。这是 gtag.js 库工作的基础。
步骤 3：触发电话链接点击事件
现在，您需要为电话链接添加一个事件监听器，以便在用户点击链接时触发 gtag 事件。以下是一个示例代码，演示了如何使用 JavaScript 实现：
<a href="tel:+15551234567" id="phone-link">Call Us</a> <script> document.getElementById('phone-link').addEventListener('click', function() { gtag('event', 'phone_click', { 'phone_number': '+15551234567', 'event_category': 'engagement', 'event_label': 'phone_call' }); }); </script>
在这个例子中：
- phone_click 是事件名称。您可以根据您的需要自定义此名称。
- phone_number 是一个参数，记录了被点击的电话号码。
- event_category 和 event_label 是可选参数，可以帮助您更好地组织和分析数据。
步骤 4：验证事件追踪
在 GA4 中，转到“实时”报告，然后点击“事件”选项卡。您应该能够看到 phone_click 事件被触发。如果事件没有立即显示，请等待几分钟。
注意事项：
- 确保您的网站代码中没有其他冲突的 gtag.js 库或函数定义。
- 根据您的需求自定义事件名称和参数。
- 测试您的代码以确保事件能够正确触发。
- 如果网站使用了内容安全策略 (CSP)，请确保允许加载来自 Google Tag Manager 的脚本。
总结
通过直接使用 gtag.js 库，您可以有效地追踪 GA4 中的电话点击链接，而无需依赖 Google Tag Manager。这种方法提供了更大的灵活性和控制权，允许您自定义事件和参数，以满足您的特定需求。记得测试您的代码，并验证事件是否在 GA4 中正确触发。
