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