Google Analytics 是一项强大的分析工具，可以帮助网站和应用程序拥有深入了解受众的操作和行为。在这篇文章中，我们将讨论如何在 Next.js 应用中集成 Google Analytics。
第一步：创建 Google Analytics 帐户
首先，你需要拥有一个 Google Analytics 帐户。如果你还没有帐户，请前往 https://analytics.google.com 创建一个新的帐户。
完成帐户设置后，你需要创建一个新的 Google Analytics 跟踪 ID。跟踪 ID 是一种用于标识和跟踪应用程序行为的唯一标识符。要创建一个新的跟踪 ID，请按照以下步骤操作：
- 登录你的 Google Analytics 帐户
- 转到 管理 -> 财产和流量来源 -> 跟踪信息
- 单击 创建
在创建跟踪 ID 后，你需要将跟踪 ID 添加到你的 Next.js 应用程序中。
第二步：添加 Google Analytics 跟踪 ID
要将 Google Analytics 跟踪 ID 添加到 Next.js 应用程序中，你需要在 pages/_document.js 文件中添加以下代码：
------ --------- - ----- ----- ----- ---------- - ---- ---------------
------ - -------------- - ---- -------------
------ ------- ----- ---------- ------- -------- -
-------- -
------ -
----- ----------
------
--- ------ --------- ---
------- ----- -------------------------------------------------------------------------------
------- --------------------------
------- -
---------------- - ---------------- -- ---
-------- ----------------------------------
---------- --- --------
-------------- -------------------- -
---------- -------------------------
---
--
-- --
-------
------
----- --
----------- --
-------
-------
-
-
-在上面的代码中，我们使用 Next.js 的自定义 _document.js 文件来添加 Google Analytics 跟踪 ID。第一行引入 GA_TRACKING_ID。可以通过从外部导入常量或从环境变量中提取该值来定义 GA_TRACKING_ID。我们还使用 Next.js 的 Head 组件将 Google Analytics 脚本添加到页面的 head 部分。这确保了 Google Analytics 脚本在每个页面加载时都会执行。
第三步：处理页面浏览事件
现在我们已经将 Google Analytics 跟踪 ID 添加到应用程序中，接下来我们需要处理页面浏览事件。在传统的 JavaScript 应用程序中，你将使用 Google Analytics 脚本中的 ga() 方法来跟踪页面浏览事件。但是，在 Next.js 项目中，我们需要采用不同的方法。
我们将使用 react-ga 库来处理 Google Analytics 事件。该库提供了用于跟踪页面浏览事件、事件、异常和电子商务转化等的各种方便的方法。你可以使用以下命令在你的项目中安装该库：
--- ------- ------ --------
然后在 lib/gtag.js 文件中添加以下代码：
------ ------- ---- -----------
------ ----- -------------- - ----------------------
------ ----- ------ - -- -- -
---------------------------------- - ------ ----- ---
--
------ ----- ----------- - -- -- -
------------- ----- ------------------------ ---
-------------------------------------------
--
------ ----- -------- - --------- - --- ------ - --- -- -
-- --------- -- ------- -
--------------- --------- ------ ---
-
--在上述代码中，我们定义了 initGA()、logPageView() 和 logEvent() 方法。initGA() 方法用于初始化 ReactGA，logPageView() 方法用于跟踪页面浏览事件，logEvent() 方法用于跟踪其它类型的事件。
现在我们需要在 pages/_app.js 文件中使用它们：
------ ----- ---- -------
------ --- ---- ----------
------ - -- ---- ---- -------------
------ ------- ----- ----- ------- --- -
------------------- -
-------------
------------------
-
-------- -
----- - ---------- --------- - - ----------
------ ---------- -------------- --
-
-在第 5 和第 6 行，我们使用 gtag.initGA() 和 gtag.logPageView() 方法来初始化并跟踪页面浏览事件。gtag.initGA() 方法将初始化 ReactGA 库，而 gtag.logPageView() 方法将发送页面浏览事件。
总结
在本文中，我们学习了如何在 Next.js 应用程序中集成 Google Analytics。通过完成以下步骤，你可以为你的 Next.js 应用程序添加数据分析：
- 创建 Google Analytics 帐户并创建跟踪 ID。
- 在
pages/_document.js文件中添加 Google Analytics 脚本。 - 在
lib/gtag.js文件中添加initGA()、logPageView()和logEvent()方法。 - 在
pages/_app.js文件中使用initGA()和logPageView()方法。
完成上述步骤后，你就可以开始收集和分析你的应用程序数据了！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66548b30d3423812e490c3d2