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中集成的简单使用啦,如果有不懂的地方欢迎评论留言,海糖很乐意给大家解答问题的哦!