正文 

当前位置： 首页 > 知识 >

在 nuxt.js 中设置 Google Analytics 4

     2023-02-22     239

关键词：

【中文标题】在 nuxt.js 中设置 Google Analytics 4【英文标题】：setup Google Analytics 4 in nuxt.js 【发布时间】：2021-02-13 03:09:26 【问题描述】：

我在使用 Nuxt 设置新的 Google Analytics（分析）4 (GA4) 帐户时遇到问题。根据教程，一切似乎都配置好了，但是我的流量没有显示在 GA（开发和生产）中

在 nuxt.config.js 我有以下内容

  buildModules: [
    '@nuxtjs/tailwindcss','@nuxtjs/google-analytics'
  ],
  googleAnalytics: 
    id: 'G-HWW3B1GM6W'
  ,

google id 是我的生产网站的 GA4 数据流 id。我尝试了 2 个不同的流，带 www 和不带 www，但 GA4 中没有显示流量。

【问题讨论】：

【参考方案1】：

[更新]

如果您想使用 GA4 属性（即具有格式 G-XXXXXXXXXX 的 id），您可以尝试通过创建插件来使用 vue-gtag 包：

import Vue from 'vue'
import VueGtag from 'vue-gtag'

Vue.use(VueGtag, 
  config:  id: 'G-XXXXXXXXXX' 
)

在 nuxtconfig.js 中添加这个

plugins: ['@/plugins/gtag']

关于您的消息中指出的问题，您提到的插件适用于 Google Analytics 的通用版本（即具有UA-XXXXXXXXX-X 格式的 id），如您链接中的示例：

 buildModules: [
   '@nuxtjs/tailwindcss','@nuxtjs/google-analytics'
 ],
 googleAnalytics: 
   id: 'UA-XXXXXXXX-X'
 ,

您在示例中输入的代码G-HWW3B1GM6W 指的是新的 Google Analytics 4，它与之前的系统不同，并且（还）不能与该插件一起使用。

因此，我建议您创建一个 Universal Analytics 类型的媒体资源，并将其 ID (UA-XXXXX-X) 与您指定的插件一起使用。您可以通过点击Show advanced options 找到它（当您创建新属性时）：

【讨论】：

嗨！您知道以这种方式安装是否可以进行路线跟踪吗？谢谢 非常感谢。【参考方案2】：

您可以通过创建插件来使用vue-gtag package。

import Vue from 'vue'
import VueGtag from 'vue-gtag'

Vue.use(VueGtag, 
  config:  id: 'G-XXXXXXXXXX' 
)

记得在 nuxtconfig.js 中添加

plugins: ['@/plugins/gtag']

【讨论】：

谢谢！不要忘记禁用本地主机上的标签 ^ for prod only pass enable: process.env.NODE_ENV === 'production' 【参考方案3】：

我来这里是因为我在开发或生产模式时在 GA 中没有结果。

您需要做的第一件事是为您要测试的网站禁用任何 AdBlocker 或 Anti-tracker。

其次，您需要处于生产模式（npm run build 然后npm start）。

如果您希望处于开发模式并且仍然在 GA 中获得结果，请在 nuxt.config.js 中的 GA 配置中传递debug: sendHitTask: true ：

publicRuntimeConfig: 
    googleAnalytics: 
      id: process.env.GOOGLE_ANALYTICS_ID,
      debug: 
        sendHitTask: true
      
    
 ,

【讨论】：

在 CLion 中设置 Google 测试

】在CLion中设置Google测试【英文标题】：SetupGoogletestinCLion【发布时间】：2016-02-1119:53:36【问题描述】：我已经在网上坐了几个小时，已经尝试在Linux中的Clion上设置Google测试，但没有找到任何东西。有人可以指导我进行设置吗？... 查看详情

google 如何在 Bigquery/Google-Analytics 中设置 fullVisitorId/Client ID？

】google如何在Bigquery/Google-Analytics中设置fullVisitorId/ClientID？【英文标题】：HowdoesgooglesetthefullVisitorId/ClientIDinBigquery/Google-Analytics?【发布时间】：2018-09-1814:32:05【问题描述】：我一直在尝试理解googleclientid背后的概念，在BigQueryExport... 查看详情

在 Google Cloud Function 中设置环境变量

】在GoogleCloudFunction中设置环境变量【英文标题】：SettingenvironmentvariablesinGoogleCloudFunction【发布时间】：2018-05-2810:27:00【问题描述】：我正在构建一个接受POST请求并将数据上传到GoogleBigQuery的小型node.js应用程序。BigQuery需要设置GO... 查看详情

java示例代码_在Google App Engine中设置连接超时

java示例代码_在Google App Engine中设置连接超时 查看详情

Nuxt.js env 属性，理解以及如何使用？

...api/configuration-env我一直在尝试为整个项目在nuxt.config.jsonce中设置我的apiUrl，例如：exportdefaultenv:apiUrl:p 查看详情

如何在 Google Chrome 的内联 Javascript 中设置断点？

】如何在GoogleChrome的内联Javascript中设置断点？【英文标题】：HowtosetbreakpointsininlineJavascriptinGoogleChrome?【发布时间】：2011-07-0614:19:47【问题描述】：当我在GoogleChrome中打开开发人员工具时，我看到了各种功能，例如配置文件、时... 查看详情

如何在 Google Developers Console 中设置费用限制

】如何在GoogleDevelopersConsole中设置费用限制【英文标题】：HowdoIsetacostlimitinGoogleDevelopersConsole【发布时间】：2015-02-2109:12:45【问题描述】：在达到配额之前，GoogleDevelopersConsole中的某些功能（例如AnalyticsAPI）是免费的。其他功能（... 查看详情

如何在 Google BigQuery 中设置用户的查询配额

】如何在GoogleBigQuery中设置用户的查询配额【英文标题】：Howtosetauser\'squeryquotainGoogleBigQuery【发布时间】：2020-01-1508:50:34【问题描述】：我们在BigQuery中收到以下错误消息：超出自定义配额：您的使用量超出了自定义配额QueryUsageP... 查看详情

如何在 Google 图表中设置注释线的样式？

】如何在Google图表中设置注释线的样式？【英文标题】：HowtostyleannotationlinesinGoogleCharts?【发布时间】：2017-03-0818:57:45【问题描述】：我正在使用GoogleChartsAPI在LineChart（在特定点）上使用annotations显示一条垂直线。是否可以设置注... 查看详情

如何在 Google Place AutocompleteViewController 的 GMSAutocompleteViewController 中设置文本

...何在GooglePlaceAutocompleteViewController的GMSAutocompleteViewController中设置文本【英文标题】：HowtosettextinGMSAutocompleteViewControllerinGooglePlaceAutocompleteViewController【发布时间】：2017-05-1320:51:36【问题描述】：在我的应用程序中打开时，我需要... 查看详情

如何在 Android 的 Google PlacePlacePicker 中设置“类型”？

】如何在Android的GooglePlacePlacePicker中设置“类型”？【英文标题】：Howtoset"Types"inGooglePlacePlacePickerinAndroid?【发布时间】：2015-08-3108:56:28【问题描述】：在新的GooglePlacesAPI中，它们带有一个名为PlacePicker的新功能。从他们拥... 查看详情

在 Google Analytics（分析）中设置自定义维度的正确语法是啥？

】在GoogleAnalytics（分析）中设置自定义维度的正确语法是啥？【英文标题】：WhatisthecorrectsyntaxtosetacustomdimensioninGoogleAnalytics?在GoogleAnalytics（分析）中设置自定义维度的正确语法是什么？【发布时间】：2015-08-1110:05:16【问题描述... 查看详情

如何在 Google iOS 登录屏幕中设置项目名称？

】如何在GoogleiOS登录屏幕中设置项目名称？【英文标题】：HowdoIsettheprojectnameintheGoogleiOSSign-Inscreen?【发布时间】：2017-04-0119:40:30【问题描述】：我可以使用Google登录，但OAuth屏幕显示：项目默认服务帐户希望：查看您的电子邮件... 查看详情

在 Google Sheet 中设置顺序验证数据

】在GoogleSheet中设置顺序验证数据【英文标题】：SetsequentialvalidationdatainGoogleSheet【发布时间】：2018-12-1318:43:00【问题描述】：简历：你好。我在GoogleSheet中做了一个依赖下拉选项。但我需要为工作表中的所有行按顺序设置验证数... 查看详情

如何在 google ads api 中设置请求标头

】如何在googleadsapi中设置请求标头【英文标题】：Howtosetrequestheaderingoogleadsapi【发布时间】：2020-08-1706:57:06【问题描述】：我想为我的经理帐户下的一个广告帐户提出预算。我有以下YAML文件：developer_token:13245login-customer-id:132456789... 查看详情

在 Python 项目中设置 GOOGLE_APPLICATION_CREDENTIALS 以使用 Google API

】在Python项目中设置GOOGLE_APPLICATION_CREDENTIALS以使用GoogleAPI【英文标题】：SetGOOGLE_APPLICATION_CREDENTIALSinPythonprojecttouseGoogleAPI【发布时间】：2018-01-1201:18:46【问题描述】：我是一名编程初学者，我正在努力学习如何将谷歌API与Python一... 查看详情

如何在 Google Chrome DevTools 的 lambda 调用中设置断点？

】如何在GoogleChromeDevTools的lambda调用中设置断点？【英文标题】：HowtosetabreakpointatalambdacallinGoogleChromeDevTools?【发布时间】：2015-08-2006:19:38【问题描述】：我使用启用了JavaScript源映射的Babel和GoogleChrome开发者工具。鉴于此代码functi... 查看详情

如何在 google 标记中设置带有边框的图像在 Android 中？

】如何在google标记中设置带有边框的图像在Android中？【英文标题】：HowtosetimageingooglemarkerwithaborderinAndroid?【发布时间】：2021-09-0821:14:35【问题描述】：我有存储在Firebase中的用户个人资料照片，我想知道如何使用带有橙色边框的... 查看详情