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

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

聖光之護

发布： 2025-08-03 17:24:20

原创

720人浏览过

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

本教程介绍如何在不使用 Google Tag Manager (GTM) 的情况下，仅通过 gtag.js 追踪 GA4 中的电话点击链接。我们将详细讲解如何加载 gtag.js 库，定义 gtag() 函数，并使用它发送自定义事件到 GA4，从而实现电话点击链接的追踪。此外，我们还将简要介绍如何手动构建网络请求并发送到 GA4 的收集端点。

通过 gtag.js 追踪电话点击

GA4 追踪的核心在于使用 gtag.js 库。该库允许你发送事件数据到 Google Analytics。以下是如何使用它来追踪电话点击链接：

1. 加载 gtag.js 库:

首先，你需要确保在你的网站上加载了 gtag.js 库。通常，这段代码应该放置在 <head> 标签内。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

登录后复制

将 G-XXXXXXXXXX 替换为你的 GA4 跟踪 ID。

2. 定义 gtag() 函数:

上述代码片段已经定义了 gtag() 函数，它将参数推送到 dataLayer 数组。Google Analytics 会处理这些数据。

3. 触发电话点击事件:

当用户点击电话链接时，你需要触发一个 GA4 事件。你可以通过 JavaScript 来实现。

<a href="tel:+15551234567" onclick="trackPhoneClick()">+1 (555) 123-4567</a>

<script>
  function trackPhoneClick() {
    gtag('event', 'phone_click', {
      'phone_number': '+15551234567',
      'event_category': 'engagement',
      'event_label': 'phone_link_click'
    });
    return true; // 允许链接继续执行电话拨打
  }
</script>

登录后复制

在这个例子中：

万物追踪

AI 追踪任何你关心的信息

查看详情

'event', 'phone_click' 指定了事件类型为 phone_click。
phone_number, event_category, event_label 是自定义参数，你可以根据需要添加更多参数。这些参数可以帮助你更详细地分析电话点击事件。
return true; 允许链接继续执行电话拨打，如果返回 false 则会阻止链接默认行为。

4. 在 GA4 中查看数据:

在 GA4 界面中，你可以通过以下方式查看收集到的数据：