使用 Hapi 框架添加 Google Analytics 分析

阅读时长 4 分钟读完

前言

在现代 Web 开发中,网站管理员和开发者需要追踪许多有关用户访问网站的信息。例如,网站管理员可能想要知道访问者的数量、他们喜欢哪些页面、他们从哪里来等等。在这个需求下,通过使用 Google Analytics(以下简称 GA)来收集网站访问数据成为了惯例。本文将介绍如何使用 Hapi 框架来添加 GA 分析。

简介

Hapi 是一款基于 Node.js 的开源 Web 框架。它的目标是提供一种可靠、可测试和可扩展的 Web 开发体验。同时,Hapi 提供了一套简单而又强大的 API 以及详细的文档,使得它成为选择 Web 开发框架的一个不错的选择。

GA 就是 Google 的 Web 分析服务,可以帮助网站管理员追踪网站访问者的行为、收集数据并提供有关网站的详细报告。借助于 GA,网站管理员可以从数据的维度、指标等多个角度来进行优化网站。

在当前 Web 开发中,将 GA 和自己的网站集成使用,已经成为 Web 开发者的一个必修课。

服务端代码

首先,我们需要在服务端的代码中添加 GA 跟踪代码。以下示例代码使用 node-ga 在 Hapi 上实现 GA 分析:

-- -------------------- ---- -------
----- ---- - ----------------
----- -- - -------------------

----- ------ - -------------
  ----- -----
  ----- -----------
---

--------------
  ------- ------
  ----- ----
  -------- -------- --------- -- -
    ----
      ---- ------------- -- ------- -- -- --
      ---- ------
      -- -----------
      --- ----
      ---- --------- -- ------- -- --
    ---

    ------ ------- --------
  -
---

---------------

如上述代码所示,我们在主页路由的 handler 中添加了 ga 模块中识别跟踪信息的代码。在实际使用中,您需要将此代码放置在您访问的每个路由的 handler 中。

客户端代码

为了在 GA 中跟踪用户的行为,我们需要在每个页面上添加 GA 的客户端代码。您可以将以下 HTML 片段添加到您的页面中:

-- -------------------- ---- -------
--------- -----
------
  ------
    --------- ---------------
    ------- ----- ----------------------------------------------------------------------
    --------
      ---------------- - ---------------- -- ---

      -------- ----------------------------------
      ---------- --- --------
      -------------- ---------------------
    ---------
  -------
  ------
    ---
  -------
-------

请注意,此示例代码中有两个地方需要您根据 GA 的要求替换。<script> 标签中的 src 属性需要替换为您自己的 GA 账号 ID。而 <script> 标签中的 gtag('config', 'GA_MEASUREMENT_ID'); 中也需要替换为 GA 界面中对应的 Measurement ID。

结论

本文介绍了如何在 Hapi 网站中集成 Google Analytics 分析。通过使用我们提供的示例代码,您可以轻松复制并粘贴 GA 分析的相应代码。需要注意的是,对于不同的网站,您需要根据您的需要和 GA 的特定要求,做出一些调整。即便如此,我们相信,通过使用本文提供的步骤,您可以轻松集成 GA,追踪网站访问者。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6703a626d91dce0dc84bdddf

纠错
反馈