如何在Nuxt应用中接入谷歌分析GA4(Google Analytics 4)

1,438 阅读1分钟

原文链接:https://mspase.com/articles/add-google-analytics-nuxt

注意: Google Analytics 4 跟以前版本的差别。在chrome插件3中目前还不支持Google Analytics 4

如何在Nuxt应用中接入谷歌分析GA4(Google Analytics 4)

注册账号

访问一下网址,根据网站提示并开通相应的账号并创建项目

https://analytics.google.com/analytics/web/

普通网站引入方式

我们一般会在index.html文件的head标签中引入以下脚本:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

Nuxt项目中引入

一、修改配置文件,引入gtag

在Nuxt项目中,我们需要把上面的引入脚本做个修改:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

nuxt.config.js 配置文件中的head属性中引入以上的脚本:

head: {
    script: [
          // Google Analytics Code
          {
            src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX",
            async: true,
          },
        ]
    }

二、抽离并新建初始化js

在项目的 /static 文件夹下新建 js 文件夹,并在该文件夹下创建名为 analytics.js的js文件。

// G-XXXXXXXXXX 为自己生成的 Google Analytics 项目的ID
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag("js", new Date());

gtag("config", "G-XXXXXXXXXX");

三、修改nuxt.config.js 引入 analytics.js

在nuxt.config.js配置文件的head属性下添加脚本:

head: {
    script: [
          // Google Analytics Code
          {
            src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX",
            async: true,
          },
          // Import analitics.js file
          { src: "/js/analitics.js" },
        ]
    }

重要说明

  • 替换G-XXXXXXXXXX为自己的 Google Analytics Code
  • 24小时之后Google将开始搜集访问网站的数据

完~