当前位置: 首页 > news >正文

web端 firebase google analytics使用,入门级

我们在开发的过程中经常会遇到需要统计用户数据的情况,我们前端人员在不麻烦后端的情况下该怎么做呢?这里我们可以借助第三方统计平台来记录跟踪用户的行为,这篇文章主要讲如何将google analytics集成到web端给我们用,超简单易懂!

我们直接上步骤吧!

步骤一:在firebase中创建自己的web项目

1.开翻墙软件使用谷歌账号,打开firebase官网
2.创建项目一直点继续,然后选择自己的账号创建项目,创建项目成功会出现这样的界面(这里默认已经集成了(google analytics),我们点击项目概览的项目设置

3.点击项目设置后,我们选择</>图标,开始创建我们的web项目,我这里起名demo-list

4.点击注册页面之后,就会出现下面的配置对象,配置有两种方法,1:npm引入,2:cdn引入也就是<script>引入,我们讲<script>引入的方法,简单快捷,如果有小伙伴选择npm的方式引入不清楚的可以私信我哈!<script>引入的方法将下面的代码整个复制到html中

步骤二:引入我们的项目中 

1.我们先把上面图片中的代码整个引入到我们的项目中
 <script type="module">import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";//我这里比图片中的示例加了一个logEvent,待会方便直接标记事件import { getAnalytics,logEvent } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-analytics.js";const firebaseConfig = {apiKey: "写图片中你自己的",authDomain: "写图片中你自己的",databaseURL: "写图片中你自己的",projectId: "写图片中你自己的",storageBucket: "写图片中你自己的",messagingSenderId: "写图片中你自己的",appId: "写图片中你自己的",measurementId: "写图片中你自己的"}// Initialize Firebaseconst app = initializeApp(firebaseConfig);const analytics = getAnalytics(app);</script>
 2.记录事件,比如我们想记录多少人浏览了我们的web页面可以这样写:

注:

1.虽然上面的步骤是同步进行的,但我们在加载完使用analytics时可能会出现实例未初始化完成的情况,所以我这里加了一个延时器,熟悉js引擎的都知道,js首先执行同步任务,宏观任务会等当前js引擎空闲时才能执行,这种情况就能完美解决analytics实例化未完成的情况,当然你们如果找到谷歌分析提供的内置方法的话就更好了。

2.我们也可以把 window.addEventListener('load', ...)替换成document.addEventListener('DOMContentLoaded', ...),实现的结果是一样的

        window.addEventListener('load', function() {setTimeout(()=>{logEvent(analytics, 'web_browse', {event_name: 'web_browse', });},100)})
3.完整代码 
 <script type="module">import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";//我这里比图片中的示例加了一个logEvent,待会方便直接标记事件import { getAnalytics,logEvent } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-analytics.js";const firebaseConfig = {apiKey: "写图片中你自己的",authDomain: "写图片中你自己的",databaseURL: "写图片中你自己的",projectId: "写图片中你自己的",storageBucket: "写图片中你自己的",messagingSenderId: "写图片中你自己的",appId: "写图片中你自己的",measurementId: "写图片中你自己的"}// Initialize Firebaseconst app = initializeApp(firebaseConfig);const analytics = getAnalytics(app);window.addEventListener('load', function() {setTimeout(()=>{logEvent(analytics, 'web_browse', {event_name: 'web_browse'});},100)})</script>

以上就是firebase google analytics在web中集成的简单使用啦,如果有不懂的地方欢迎评论留言,海糖很乐意给大家解答问题的哦!

相关文章:

  • 3099. 哈沙德数
  • Rust并发编程实践指南
  • 对于Const关键字修饰的对象
  • CANdela/Diva系列9--CDD文件在CANoe工程的应用1
  • 精准监测,健康无忧--XC3576H工控主板赋能亚健康检测仪
  • Linux入门——入门常用基础指令(2)
  • 每日算法 -【Swift 算法】正则表达式匹配:支持 `.` 和 `*`
  • 端到端测试最佳实践:从入门到精通的完整指南
  • 【AUTOSAR OS 】保护功能解析:从原理到应用与源代码解析(上篇)
  • Docker 前端镜像容器部署指南
  • 【HW系列】—Log4j2、Fastjson、Shiro漏洞流量特征
  • 超声成像系统解决方案AFE模拟前端
  • Vue开发系列——Vue 生命周期钩子 及常见知识点
  • Cisco Meraki(MR36) 踩坑指南
  • 线程池学习(一)
  • 小白成长之路-Linux操作系统-进程管理
  • JVM——Truffle:语言实现框架
  • JVM与JMM深度解析:从Java 8到Java 21的演进
  • 字符串day8
  • Python 如何让自动驾驶的“眼睛”和“大脑”真正融合?——传感器数据融合的关键技术解析
  • 如何自己制作h5页面/seo做的比较牛的公司
  • 深圳做夜场做网站/自建站平台
  • 厦门网站建设 php/天津百度网站快速优化
  • b2c的电子商务网站/优化大师下载电脑版
  • 小门户网站模版/5151app是交友软件么
  • 排行网站模板/守游网络推广平台