分享下大家应该了解的知识 =》埋点在数字化时代，数据已经成为企业决策的重要依据。无论是电商、社交媒体还是在线教育，了解用

前言

在数字化时代，数据已经成为企业决策的重要依据。无论是电商、社交媒体还是在线教育，了解用户行为是优化产品和服务的关键。而埋点技术，正是帮助我们实现这一目标的重要工具。本文将深入探讨什么是埋点，埋点的目的及其类型、应用场景、埋点实现的全流程，以及小编在企业中的一个简单实现示例......

准备好了嘛，小编要开始编吹水喽！！！

什么是埋点？

埋点（Tracking）是指在应用程序或网站中嵌入代码，用于收集用户行为数据并将其发送到数据分析平台。这些数据可以帮助企业了解用户行为、优化产品和服务、提高用户体验。

埋点的目的

埋点的目的是通过收集和分析用户行为数据，帮助企业做出更明智的决策，从而实现以下几个方面的目标：

1. 了解用户行为

通过埋点，企业可以收集用户在应用程序或网站上的各种行为数据，如页面访问、按钮点击、表单提交、视频播放等。这些数据可以帮助企业深入了解用户的操作习惯、偏好和需求。例如：

页面访问：了解用户访问了哪些页面，哪些页面跳出率较高。
按钮点击：了解用户点击了哪些按钮，哪些按钮的点击率较低。
表单提交：了解用户在表单提交过程中遇到了哪些问题，哪些字段的填写率较低。
视频播放：了解用户观看了哪些视频，哪些视频的播放完成率较低。
PV（Page View）：页面浏览量，即用户访问页面的次数。每次用户访问页面都会记录一次PV。
UV（Unique Visitor）：独立访客数，即在一定时间内访问页面的唯一用户数。UV通常通过用户的唯一标识（如IP地址、Cookie等）来统计。

2. 优化产品和服务

基于用户行为数据，企业可以发现产品和服务中的问题和不足之处。例如：

页面跳出率：如果某个页面的跳出率很高，可能是因为页面内容不够吸引人或加载速度过慢。通过分析这些数据，企业可以优化页面设计、提升加载速度，从而提高用户满意度。例如，通过监控 FP（First Paint）、FCP（First Contentful Paint） 和 LCP（Largest Contentful Paint） 等指标，企业可以了解页面的加载性能，优化用户体验。
按钮点击率：如果某个按钮的点击率较低，可能是因为按钮位置不明显或文案不够吸引人。通过优化按钮位置和文案，企业可以提高按钮的点击率。
表单填写率：如果用户在表单提交过程中频繁退出，可能是因为表单设计不合理或字段过多。通过优化表单设计和简化字段，企业可以提高表单的填写率。

3. 提高用户体验

埋点数据可以帮助企业识别用户体验中的痛点和瓶颈。例如：

流程优化：如果用户在某个流程中频繁退出，可能是因为流程设计不合理或操作过于复杂。通过优化流程和简化操作，企业可以提高用户体验，增加用户留存率。
加载速度：如果页面加载速度过慢，可能会导致用户流失。通过优化页面加载速度，企业可以提高用户体验，增加用户留存率。例如，通过监控JS初始化和主接口加载等指标，企业可以了解页面的加载性能，优化用户体验。
错误提示：如果用户在操作过程中遇到错误，但没有明确的错误提示，可能会导致用户困惑。通过优化错误提示，企业可以提高用户体验，增加用户留存率。

4. 个性化推荐

通过分析用户行为数据，企业可以为用户提供个性化的推荐和服务。例如，电商网站可以根据用户的浏览和购买历史，推荐相关的产品；社交媒体可以根据用户的兴趣和互动行为，推荐相关的内容。个性化推荐可以提高用户满意度，增加用户粘性。

5. 营销优化 埋点数据可以帮助企业优化营销策略。例如，通过分析用户在不同渠道的转化率，企业可以确定哪些渠道效果更好，从而调整营销预算和策略。此外，埋点数据还可以帮助企业进行 A/B测试 ，比较不同营销方案的效果，选择最优方案。以下是一个简单示例说明：

假设你正在开发一个新功能，想要确定哪种功能设计更受用户欢迎。你可以设计两个版本的功能（A版本和B版本），分别展示不同的交互方式、界面设计等。然后，将用户随机分成两组，分别展示A版本和B版本的功能。通过分析两组用户的使用频率和满意度，你可以确定哪个版本的功能效果更好，从而优化功能设计。

A版本：功能采用弹出式窗口，用户需要点击按钮才能使用。
B版本：功能采用侧边栏，用户可以直接点击使用。

通过A/B测试，你发现B版本的使用频率和用户满意度比A版本高20%。因此，你可以决定采用B版本的功能设计。总而言之，A/B测试是一种科学的方法，用于比较两个或多个版本的页面、功能或营销策略，以确定哪个版本的效果更好。通过A/B测试，企业可以优化产品、服务或营销策略，提高用户体验和业务效果。

6. 数据驱动决策 埋点数据为企业提供了数据支持，帮助企业做出更科学的决策。例如，通过分析用户行为数据，企业可以确定产品的改进方向、优化用户体验、调整营销策略等。数据驱动的决策可以提高企业的运营效率和竞争力。现在简单举例说明一下：

产品改进方向

假设你是一家电商企业，通过埋点数据发现用户在购买流程中频繁退出，特别是在填写配送地址的步骤。通过进一步分析，你发现配送地址表单的字段过多，用户填写起来非常繁琐。

数据分析：

表单填写率：填写配送地址表单的用户比例为60%，填写完成的用户比例为40%。
退出率：在填写配送地址步骤的退出率相对为20%。

决策：基于这些数据，你可以决定简化配送地址表单，减少不必要的字段，并提供自动填充功能。通过优化表单设计，你可以提高用户的填写率和购买转化率。

优化用户体验

假设你是一家在线教育平台，通过埋点数据发现用户在学习过程中频繁退出，特别是在观看视频课程时。通过进一步分析，你发现视频加载速度过慢，导致用户体验不佳。

数据分析：

视频加载时间：平均视频加载时间为8秒。
用户退出率：在视频加载过程中的退出率为25%。

决策：
基于这些数据，可以决定优化视频服务器和CDN配置，提升视频加载速度。通过优化视频加载速度，从而提高用户的观看体验和留存率。

调整营销策略

假设你是一家社交媒体平台，通过埋点数据发现用户对某个广告的点击率较低。通过进一步分析，发现广告的文案和图片不够吸引人。

数据分析：

广告点击率：广告A的点击率为2%。
用户反馈：用户对广告A的反馈较差，认为文案和图片不够吸引人。

决策：
基于这些数据，可以决定重新设计广告文案和图片，并进行A/B测试，比较不同版本的广告效果。通过优化广告设计，可以提高广告的点击率和转化率。

埋点的类型

埋点技术可以分为三种主要类型：手动埋点、可视化埋点和自动埋点（无埋点）。每种类型都有其独特的优势和劣势，适用于不同的应用场景。

1. 手动埋点

开发人员在代码中显式地调用埋点API，手动触发埋点事件。

优势：

灵活性高：适用于复杂的业务逻辑或自定义数据收集需求。
精确控制：开发人员可以精确控制何时触发埋点事件，以及收集哪些数据。

劣势：

开发工作量大：需要开发人员在代码中插入埋点代码，增加了开发工作量。
维护成本高：手动埋点的代码需要维护，如果业务逻辑发生变化，可能需要修改埋点代码并重新部署。
容易出错：手动埋点容易出错，如忘记调用埋点API、埋点数据不准确等。

应用场景：

复杂业务逻辑：适用于需要收集复杂业务逻辑数据的应用场景。
自定义数据收集：适用于需要收集特定自定义数据的应用场景。

2. 可视化埋点

通过可视化工具配置埋点事件，自动生成相应的JavaScript代码。

优势：

减少开发工作量：可视化工具允许开发人员通过图形界面配置埋点事件，自动生成相应的JavaScript代码，减少了手动编写代码的工作量。
易于使用：无需深入了解JavaScript或API调用，开发人员可以通过简单的拖拽和配置完成埋点设置。
快速迭代：可视化工具支持快速迭代和修改，开发人员可以随时调整埋点配置，无需修改代码并重新部署。

劣势：

灵活性有限：可视化工具通常适用于常见的埋点需求，如页面访问、按钮点击等。对于复杂的业务逻辑或自定义数据收集需求，可视化工具可能无法满足。
依赖平台：可视化埋点依赖GrowingIO的平台，如果平台出现故障或无法访问，可能会影响数据采集。

应用场景：

常见埋点需求：适用于常见的埋点需求，如页面访问、按钮点击、表单提交等。
快速迭代：适用于需要快速迭代和修改埋点配置的应用场景。

3. 自动埋点（无埋点）

通过自动化方式收集用户行为数据，无需手动编写代码。

优势：

减少开发工作量：自动埋点通过自动化方式收集用户行为数据，无需手动编写代码，减少了开发工作量。
适用于常见用户行为数据：自动埋点适用于收集常见的用户行为数据，如页面访问、按钮点击、表单提交等。

劣势：

灵活性有限：自动埋点通常适用于常见的用户行为数据，对于复杂的业务逻辑或自定义数据收集需求，自动埋点可能无法满足。
可能收集到不必要的数据：自动埋点可能会收集到不必要的数据，增加了数据处理的复杂性。

应用场景：

常见用户行为数据：适用于收集常见的用户行为数据，如页面访问、按钮点击、表单提交等。
快速部署：适用于需要快速部署和收集用户行为数据的应用场景。

总结

手动埋点：适用于复杂的业务逻辑或自定义数据收集需求，灵活性高，但开发工作量大，维护成本高。
可视化埋点：适用于常见的埋点需求，减少开发工作量，易于使用，但灵活性有限，依赖平台。
自动埋点（无埋点）：适用于常见用户行为数据的收集，减少开发工作量，但灵活性有限，可能收集到不必要的数据。

埋点的应用场景

埋点技术在不同行业和应用场景中有着广泛的应用。以下是一些常见的应用场景，包括电商网站、社交媒体和在线教育。

1. 电商网站

收集用户浏览、点击、购买等行为数据，优化产品推荐和营销策略。

详细说明：

用户浏览：通过埋点收集用户在电商网站上的浏览行为数据，如访问了哪些页面、浏览了哪些产品等。这些数据可以帮助企业了解用户的兴趣和需求，优化产品展示和页面布局。
用户点击：通过埋点收集用户在电商网站上的点击行为数据，如点击了哪些按钮、点击了哪些产品等。这些数据可以帮助企业了解用户的操作习惯和偏好，优化按钮设计和产品推荐。
用户购买：通过埋点收集用户在电商网站上的购买行为数据，如购买了哪些产品、购买金额等。这些数据可以帮助企业了解用户的购买习惯和偏好，优化产品推荐和营销策略。

示例：假设你是一家电商企业，通过埋点数据发现用户在浏览产品页面时，对某个产品的点击率很高，但购买率很低。通过进一步分析，你发现该产品的价格较高，用户在购买时犹豫不决。基于这些数据，你可以决定对该产品进行促销活动，降低价格，从而提高购买率。

2. 社交媒体

收集用户互动、分享、评论等行为数据，优化内容推荐和用户体验。

详细说明：

用户互动：通过埋点收集用户在社交媒体上的互动行为数据，如点赞、评论、分享等。这些数据可以帮助企业了解用户的兴趣和偏好，优化内容推荐和用户体验。
用户分享：通过埋点收集用户在社交媒体上的分享行为数据，如分享了哪些内容、分享到哪些平台等。这些数据可以帮助企业了解用户的社交网络和影响力，优化内容推荐和营销策略。
用户评论：通过埋点收集用户在社交媒体上的评论行为数据，如评论了哪些内容、评论内容等。这些数据可以帮助企业了解用户的反馈和意见，优化内容推荐和用户体验。

示例：假设你是一家社交媒体平台，通过埋点数据发现用户对某个话题的互动率很高，但分享率很低。通过进一步分析，你发现该话题的内容不够吸引人，用户不愿意分享。基于这些数据，你可以决定优化该话题的内容，增加趣味性和吸引力，从而提高分享率。

3. 在线教育

收集用户学习、练习、测试等行为数据，优化课程设计和学习路径。

详细说明：

用户学习：通过埋点收集用户在在线教育平台上的学习行为数据，如学习了哪些课程、学习时长等。这些数据可以帮助企业了解用户的学习习惯和偏好，优化课程设计和学习路径。
用户练习：通过埋点收集用户在在线教育平台上的练习行为数据，如完成了哪些练习、练习成绩等。这些数据可以帮助企业了解用户的学习效果和掌握情况，优化练习设计和学习路径。
用户测试：通过埋点收集用户在在线教育平台上的测试行为数据，如参加了哪些测试、测试成绩等。这些数据可以帮助企业了解用户的学习效果和掌握情况，优化测试设计和学习路径。

示例：假设你是一家在线教育平台，通过埋点数据发现用户在某个课程的学习时长很短，但练习成绩很高。通过进一步分析，你发现该课程的内容过于简单，用户很快就掌握了。基于这些数据，你可以决定优化该课程的内容，增加难度和深度，从而提高用户的学习效果。

日常需求中埋点实现的全流程

埋点的实现步骤可以分为五个主要阶段：确定需求、选择工具、配置埋点、嵌入代码和数据分析。以下是对每个阶段的详细说明，并抽象出实现步骤。

1. 确定需求

明确需要收集哪些用户行为数据。

详细说明：

需求分析：与产品经理、运营人员等团队成员沟通，明确需要收集的用户行为数据。例如，电商网站可能需要收集用户浏览、点击、购买等行为数据；社交媒体可能需要收集用户互动、分享、评论等行为数据。
数据指标：确定需要收集的具体数据指标，如页面访问量（PV）、独立访客数（UV）、按钮点击率、表单填写率等。

示例：假设你是一家电商企业，需要收集用户在产品页面上的行为数据。你需要明确以下需求：

用户访问了哪些产品页面。
用户点击了哪些产品。
用户购买了哪些产品。

2. 选择工具

选择合适的埋点工具或平台，如GrowingIO、Google Analytics等。

详细说明：

工具评估：评估不同的埋点工具或平台，比较其功能、易用性、价格等。选择适合企业需求的工具。
平台注册：在选择的埋点平台上注册账号，获取项目ID和数据源ID。

示例：假设你选择了GrowingIO作为埋点工具，你需要在GrowingIO平台上注册账号，并创建一个新项目，获取项目ID和数据源ID。

到这个阶段之后，一般会生成埋点文档，比如：

微信图片_20241019002812.png

3. 配置埋点

根据需求配置埋点事件，生成相应的代码。

详细说明：

事件配置：在埋点平台上配置需要收集的事件，如页面访问、按钮点击、表单提交等。
代码生成：根据配置的事件，生成相应的JavaScript代码。

示例：假设你在GrowingIO平台上配置了以下事件：

页面访问：收集用户访问产品页面的数据。
按钮点击：收集用户点击“加入购物车”按钮的数据。
表单提交：收集用户提交购买表单的数据。

4. 嵌入代码

将生成的代码嵌入到应用程序或网站中。

详细说明：

代码嵌入：将生成的JavaScript代码嵌入到应用程序或网站的HTML文件中。通常，代码会嵌入到<head>标签中。
代码测试：在开发环境中测试嵌入的代码，确保埋点事件能够正常触发和收集数据。

示例：假设你将生成的JavaScript代码嵌入到产品页面的HTML文件中，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Page</title>
    <!-- GrowingIO 埋点代码 -->
    <script type="text/javascript">
        !(function(e,t,n,g,i){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},n=t.createElement("script"),tag=t.getElementsByTagName("script")[0],n.async=1,n.src=('https:'==document.location.protocol?'https://':'http://')+g,tag.parentNode.insertBefore(n,tag)})(window,document,"script","assets.giocdn.com/2.1/gio.js","gio");
        gio('init', 'your_project_id', 'your_datasource_id', {
            debug: true,
            host: 'your_host',
            scheme: 'https'
        });
        gio('send');
    </script>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
</body>
</html>

比如：

微信图片_20241019003456.png

5. 数据分析

通过数据分析平台查看和分析收集到的数据。

详细说明：

数据查看：在埋点平台上查看收集到的数据，如页面访问量、按钮点击率、表单填写率等。
数据分析：通过数据分析工具对收集到的数据进行分析，如用户行为分析、转化率分析、A/B测试等。

示例：假设你在GrowingIO平台上查看收集到的数据，并进行以下分析：

页面访问量：查看用户访问产品页面的数据，分析哪些页面的访问量较高。
按钮点击率：查看用户点击“加入购物车”按钮的数据，分析哪些产品的点击率较高。
表单提交率：查看用户提交购买表单的数据，分析哪些产品的购买率较高。

埋点实现的全流程总结

步骤	详细说明
确定需求	明确需要收集哪些用户行为数据，确定具体的数据指标。
选择工具	选择合适的埋点工具或平台，注册账号，获取项目ID和数据源ID。
配置埋点	在埋点平台上配置需要收集的事件，生成相应的JavaScript代码。
嵌入代码	将生成的JavaScript代码嵌入到应用程序或网站的HTML文件中，进行代码测试。
数据分析	在埋点平台上查看和分析收集到的数据，进行用户行为分析、转化率分析等。

埋点代码实现示例

小编使用了 GrowingIO 作为埋点工具，并结合了手动埋点和可视化埋点的实现方式。

项目入口文件 index.html 的内容:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>xxx</title>
    <script>
      var _hmt = _hmt || []
      ;(function () {
        var hm = document.createElement('script')
        hm.src = 'xxx'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>
    <script src="./static/js/plugins/gioTwoWayTransmission.js"></script>
    <script type="text/javascript">
      !(function (e, n, t, c, i) {
        ;(e[i] =
          e[i] ||
          function () {
            ;(e[i].q = e[i].q || []).push(arguments)
          }),
          (t = n.createElement('script'))
        s = n.getElementsByTagName('script')[0]
        ;(t.async = 1), (t.src = c), s.parentNode.insertBefore(t, s)
      })(
        window,
        document,
        'script',
        './static/js/gdp-full.js',
        'gdp'
      )
      gdp('registerPlugins', [gioTwoWayTransmission])

      //init API调用示例
      gdp('init', 'xxx', 'xxx', {
          host: 'xxx', // 数据发送地址。
          autotrack: false, // 表示关闭自动埋点功能。
          compress: true, //表示开启数据压缩模式。
          debug: true, // 表示开启调试模式，控制台可以看到数据。
          hashtag: true, //表示开启页面URL混淆采集。
          scheme: 'https' //表示使用HTTPS协议发送数据。
      })
      gdp('g1.init', 'xxx', 'xxx', {
          host: 'xxx', // 数据发送地址。
          autotrack: false, // 表示关闭自动埋点功能。
          compress: true, //表示开启数据压缩模式。
          debug: true, // 表示开启调试模式，控制台可以看到数据。
          hashtag: true, //表示开启页面URL混淆采集。
          scheme: 'https' //表示使用HTTPS协议发送数据。
      })
    </script>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

代码分析：

动态加载GrowingIO脚本：通过!(function (e, n, t, c, i) {...})动态加载gdp-full.js脚本，并初始化了gdp对象。
注册插件：通过gdp('registerPlugins', [gioTwoWayTransmission])注册了gioTwoWayTransmission插件。
初始化GrowingIO实例：通过gdp('init', ...)和gdp('g1.init', ...)方法初始化了两个GrowingIO实例，分别配置了不同的项目ID、数据源ID和数据发送地址。

路由配置文件 router/index.ts 内容：

import { createRouter, createWebHashHistory } from 'vue-router'
const whiteList = [
  '/redirect',
  '/redirectActive',
  '/agreement/userProtocol',
  '/agreement/privacy',
  '/agreement/renew',
  '/active',
  '/olympic-active'
] // 不重定向白名单
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Index',
      redirect: '/home'
    },
{
      path: '/olympic-active',
      name: 'olympicActive',
      component: () => import('@/views/olympic-active/index.vue'),
      meta: {
        title: 'xxx'
      }
    }
  ],
  scrollBehavior(to, from, savedPosition) {
    // 返回期望的滚动位置
    // 返回 falsy 值表示不进行滚动
    // 返回 { x: number, y: number } 对象表示滚动到具体位置
    // 如果 savedPosition 有值，则表示是一个 popstate 导航，可以使用该值保持滚动位置
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

router.beforeEach((to, from, next) => {
  // 在白名单中，直接跳转
  if (whiteList.indexOf(to.path) >= 0) {
    if (to.path === '/olympic-active' && to.query?.route === '2') {
      gdp('track', 'H5pageView', {
        referpageName_var: 'xxx', // 页面访问时上一个页面名称。
        pageName_var: 'xxx', // 页面访问时当前页面名称。
        iop_tacticsId_var: '', // 页面访问时当前页面对应的IOP策略ID号。（物品模型）
        referFlowId_var: '' // 页面访问时来源入口位置ID。（物品模型<url参数解析>）
      })
      gdp('g1.track', 'pageview', {
        WT_et: 'pageview',
        WT_event: 'H5PageShow'
      })
    }
    next()
    return
  }
  const token = localStorage.getItem('token')
  if (!token && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

export default router

分析：

路由守卫：在路由守卫beforeEach中，当用户访问/olympic-active页面且route参数为2时，手动触发埋点事件H5pageView和pageview。
手动埋点：通过调用gdp('track', 'H5pageView', {...})和gdp('g1.track', 'pageview', {...})方法，手动触发埋点事件，并将数据发送到GrowingIO的数据平台

可能有的小伙伴对上面的gdp对象有些疑虑，小编通过这个对象串联一下上面的实现思路哈，表述有问题的话麻烦在评论区指出谢谢：

gdp对象是GrowingIO数据平台（GrowingIO Data Platform）提供的一个全局对象，用于在JavaScript代码中调用GrowingIO的API，实现数据采集和分析。通过gdp对象，开发人员可以初始化GrowingIO、注册插件、触发埋点事件等。

详细说明

1. 初始化GrowingIO

在HTML文件中，通过gdp对象初始化GrowingIO，配置项目ID、数据源ID、数据发送地址等参数。

gdp('init', '项目ID', '数据源ID', {
  host: 'xxx', // 数据发送地址。
  autotrack: false, // 表示关闭自动埋点功能。
  compress: true, //表示开启数据压缩模式。
  debug: true, // 表示开启调试模式，控制台可以看到数据。
  hashtag: true, //表示开启页面URL混淆采集。
  scheme: 'https' //表示使用HTTPS协议发送数据。
})

2. 注册插件

通过gdp对象注册插件，如gioTwoWayTransmission插件。

gdp('registerPlugins', [gioTwoWayTransmission])

3. 触发埋点事件

在路由守卫中，通过gdp对象手动触发埋点事件，并将数据发送到GrowingIO的数据平台。

router.beforeEach((to, from, next) => {
  // 在白名单中，直接跳转
  if (whiteList.indexOf(to.path) >= 0) {
    if (to.path === '/olympic-active' && to.query?.route === '2') {
      gdp('track', 'H5pageView', {
        referpageName_var: 'xxx', // 页面访问时上一个页面名称。
        pageName_var: 'xxx', // 页面访问时当前页面名称。
        iop_tacticsId_var: '', // 页面访问时当前页面对应的IOP策略ID号。（物品模型）
        referFlowId_var: '' // 页面访问时来源入口位置ID。（物品模型<url参数解析>）
      })
      gdp('g1.track', 'pageview', {
        WT_et: 'pageview',
        WT_event: 'H5PageShow'
      })
    }
    next()
    return
  }
  const token = localStorage.getItem('token')
  if (!token && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

总结

小编的埋点实现方案结合了可视化埋点和手动埋点两种方式：

可视化埋点：通过在HTML文件中初始化GrowingIO，配置项目ID、数据源ID、数据发送地址等参数，生成相应的JavaScript代码。
手动埋点：在路由守卫中，通过调用gdp('track', ...)和gdp('g1.track', ...)方法，手动触发埋点事件，并将数据发送到GrowingIO的数据平台。

通过这种方式，我可以在保证数据采集的灵活性和精确性的同时，又减少了开发和维护的工作量。

结语

总而言之，埋点技术通过收集和分析用户行为数据，帮助企业了解用户行为、优化产品和服务、提高用户体验、个性化推荐、营销优化和数据驱动决策。通过合理选择和使用埋点技术，企业可以提高用户体验，实现业务增长。

文章参考：

如果小编哪里讲的不对，欢迎在评论区指正谢谢，本人只是一名菜鸡实习生，能力有限，难免有说错的地方

最后就是礼貌集赞啦，谢谢大家