gtag.js 示例 - Javascript

简介

gtag.js 是 Google Analytics（分析）的全局网站标记库。如果您打算使用 Google Analytics 来跟踪您的网站活动并收集有关访客的数据，那么您必须使用 gtag.js 标记库来发送数据到 Google Analytics 服务器。

gtag.js 是 Google Analytics 的一种基于 JavaScript 的实现，在网站上使用它可以简化数据收集和跟踪过程。该标记库支持 Google Analytics 4（GA4）和 Universal Analytics（UA），可以从一个位置发送数据，并以方便的方式设置所有可用选项。

在本文中，我们将探索 gtag.js 的一些示例，包括如何将 gtag.js 添加到您的网站、发送 GA4 事件和发送 UA 页面视图跟踪。

添加 gtag.js 到您的网站

在您的网站上使用 gtag.js，您只需要向页面添加一个标记，该标记包括您的 Google Analytics 代码片段和 gtag.js 的唯一 ID。

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

说明：

• GA_MEASUREMENT_ID：您的 GA4 或 UA 的唯一 ID。 在您的 Google Analytics 帐户中查找它。

在这里，我们将“GA_MEASUREMENT_ID”替换为我们真正的 Google Analytics 唯一 ID。

发送 GA4 事件

GA4 事件是指来自网站访客的数据。每个 GA4 事件都是一个具有参数的交换，其中包括发生事件的时间、事件类型以及相关的其他参数或属性。

为了发送 GA4 事件，您可以使用 gtag() 函数，用事件类型和其他属性调用它。例如，要发送一个点击事件，您可以在单击事件处理程序中编写以下代码：

<script>
   document.querySelector('button').addEventListener('click', function() {
       gtag('event', 'click', {'event_category': 'contact', 'event_action': 'submit'});
   });
</script>

说明：

• click 事件类型。
• contact 事件分类。
• submit 事件行动。

在这里，我们在 button 元素上侦听点击事件，并在单击事件处理程序中调用 gtag() 函数。我们将事件类型设置为“click”，事件分类设置为“contact”，事件行动设置为“submit”。

同时，我们将其他属性作为对象传递。在这种情况下，我们添加了一个属性 “event_label”: “contact-form”，表示该事件与一个名为“联系人表单”的表单相关。

发送 UA 页面视图跟踪

UA 页面视图跟踪可帮助您分析访问者浏览您的站点内容的方式。您可以使用 gtag.js 向 Google Analytics 发送 UA 页面视图跟踪。

为此，您需要使用 gtag() 函数再次调用函数，将 config 参数设置为您的 Google Analytics 唯一 ID 和“UA”处理程序名称。例如，为了向 Google Analytics 发送有关主页浏览的信息，您可以将以下代码添加到您的主页顶部：

<script>
   gtag('config', 'GA_MEASUREMENT_ID', {'page_path': '/'});
</script>

说明：

• GA_MEASUREMENT_ID：您的 GA4 或 UA 的唯一 ID。 在您的 Google Analytics 帐户中查找它。
• 'page_path': '/'：标识您要跟踪的页面路径。

在这里，我们将 'page_path' 属性设置为 '/'，表示此代码将在我们的站点主页面上使用。

总结

以上是几个简单的 gtag.js 示例，涵盖了添加 gtag.js 到您的网站、发送 GA4 事件和发送 UA 页面视图跟踪等内容。您还可以使用 gtag.js 达到其他目的，如跟踪电子商务操作、链接 Google Ads 和 Google Analytics 等。gtag.js 是一个功能强大的工具，如果您希望跟踪您的网站活动，那么了解它是必要的。