原文链接:
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将开始搜集访问网站的数据
完~