使用 gtag.js 直接追踪 GA4 中的电话点击链接-js教程-PHP中文网

使用 gtag.js 直接追踪 GA4 中的电话点击链接

碧海醫心

发布： 2025-08-03 17:32:10

原创

400人浏览过

使用 gtag.js 直接追踪 ga4 中的电话点击链接

本教程介绍了如何在不使用 Google Tag Manager (GTM) 的情况下，直接利用 gtag.js 库追踪网站上的电话点击链接。通过加载 gtag 库并调用 gtag() 函数，您可以自定义事件并将其发送到 GA4，从而实现对电话链接点击的精确追踪和分析。

追踪电话链接点击：直接使用 gtag.js

虽然 Google Tag Manager (GTM) 是一种常用的追踪网站事件的方法，但直接使用 gtag.js 库也是一种可行且灵活的替代方案。这种方法无需依赖 GTM，可以直接在您的网站代码中实现自定义事件的追踪，例如追踪电话链接的点击。

步骤 1：加载 gtag.js 库

首先，确保您的网站页面已经加载了 gtag.js 库。通常，这需要在 <head> 标签中添加以下代码片段：

<!-- 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：触发电话链接点击事件

万物追踪

AI 追踪任何你关心的信息

查看详情

现在，您需要为电话链接添加一个事件监听器，以便在用户点击链接时触发 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>

登录后复制

在这个例子中：