自助建站免费网站大兴安岭网站建设
我们在开发的过程中经常会遇到需要统计用户数据的情况，我们前端人员在不麻烦后端的情况下该怎么做呢？这里我们可以借助第三方统计平台来记录跟踪用户的行为，这篇文章主要讲如何将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中集成的简单使用啦，如果有不懂的地方欢迎评论留言，海糖很乐意给大家解答问题的哦！