谷歌统计 Google Analytics使用gtag.js 进行数据统计（VUE）

最新推荐文章于 2024-04-30 16:57:21 发布
VIP文章 最新推荐文章于 2024-04-30 16:57:21 发布
阅读量4.7k 收藏 8
点赞数 3
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41582348/article/details/121206049
版权

版本
谷歌统计有两个版本：

早期版本 Google Analytics（分析）(Universal Analytics)，获取的是跟踪ID，以“UA-”开头；
新版本Google Analytics（分析）4，获得的是媒体资源的衡量ID，以“G-”开头；

今天使用的Google Analytics（分析）(Universal Analytics)；

用于实施衡量的库和 SDK有两个：

analytics.js
gtag.js

今天使用的是gtag.js

1.全局代码
UA-XXXXX-X是自己谷歌统计后台中获取（管理-媒体资源-跟踪信息-跟踪代码-跟踪ID）
将以下代码放在index.html的head标签中

<head>
...
...
...
<!--谷歌统计 全局网站代码 Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-X"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
   
      dataLayer.push
最低0.47元/天 解锁文章
再见 1998
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
google流量统计代码
03-06
你可以将这段代码放到自己网页的底部，会实施网页的最新访问量统计，这是段不错的统计代码
google Analytics 自定义事件的设置与获取（埋点）
weixin_43639743的博客
12-05 8825
前提：在使用google统计的时候，需要使用到自定义事件（埋点）上传，让运营进行分析，所以由此做个记录，希望可以帮助到其他人。 总体分析：你先要将sdk放入代码中，再去平台设置相关事件，然后在代码中使用gtag()上传埋点数据，平台就可以直接获取到相应的数据了。 1、需要去google上面获取gtag.js的sdk代码，放入到前端页面中； <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="ht
使用 gtag.js/GTM 在网站上设置consent mode（基本模式）
qq_38865642的博客
02-26 929
使用基本意见征求模式实现时，先阻止 Google 代码加载，直到用户授予同意。
谷歌统计代码使用方式
Turbo的博客
12-27 4110
1、加入 gtag 代码 &amp;lt;!-- Global site tag (gtag.js) - Google Analytics --&amp;gt; &amp;lt;script async src=&quot;https://www.googletagmanager.com/gtag/js?id=UA-*****-1&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;scrip
谷歌统计Google Analytics使用入门
m0_68249464的博客
04-01 2003
网站统计相信大家都不陌生，但如果你的网站针对的是海外用户，那么这个Google Analytics就非常好。它可以很详细的记录访客信息及行为，让你更直观的了解网站的流量来源！ Google Analytics是什么？ Google Analytics是作为 Google 开发的一款流量分析工具，为目标独立站的引流解决数据统计与分析的问题。以便于商户更好地定位自己投放和引流情况，从而对品牌独立站进行不断地改善与强化。 从 Google Analytics 数据中我们可以获得很多有趣信息，例如：流量从
Google-Analytics 学习与思考
RE_PHPzjw的学习黑板报
06-07 1231
前言 Google-Analytics是google旗下一款网站数据记录类服务系统。并且在GitHua上开源。 1.1 如何接入自己网站 登陆官网–Google Analytics 然后要绑定一下Google开发者 在首页选择设置Google Analytics 我们可以看见有几个JS可供选择，我们主要介绍gtag.js所以我们选择gtag.js 我们按照gtag.js的说明将...
vue-gtag：Vue的全球站点标签插件（gtag.js）
02-06
Vue标签 Vue的全球站点标签插件 全局站点标签（gtag.js）是一个JavaScript标记框架和API，可让您将事件数据发送到Google Analytics（分析），Google Ads和Google Marketing Platform。 有关gtag.js的常规，请阅读gtag.js开发人员指南。 Vue 3更新 在此新vue-gtag-next 上发布了Vue 3兼容版本，您可以在vue-gtag-next安装该软件包。 一旦Vue正式发布版本3作为最新版本，我将以vue-gtag软件包发布它。 如果您有任何反馈意见，请考虑在打开问题 :folded_hands: 要求 Vue ^ 2.0.0 安装 n
Google Analytics 优化/Google Analytics加载失败导致阻塞的解决方法
qq_43743402的博客
03-17 1180
Google的服务能用的非常有限了，Google Analytics之前还算正常，近期经常处于pending状态，多是googletagmanager.com/gtag/js挂起，导致整个页面数据都无法正常渲染。正常的给的代码是这样的插入上述代码后，网页渲染时执行的流程如下：1.下载https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y脚本（下面简称gtag.js），此过程不阻塞HTML的解析。
设置 Google Analytics（分析）全局网站统计代码
sinat_28371057的博客
02-16 2914
设置 Google Analytics（分析）全局网站统计代码 本文包含的主题： 基本说明 根据您的网站类型设置数据收集 验证您的全局网站代码是否正常工作 相关资源 基本说明 无论您要从哪些网站收集数据，如果您尚未为每个目标网站分别创建 Google Analytics（分析）媒体资源，请先进行创建。 系统会在您创建媒体资源时生成唯一跟踪 ID 和全局网站代码，该代码中包含相应媒体资源的跟踪 ID。如需有关查找跟踪 ID 和全局网站代码的信息，请参阅下一部分。 将全局网站代码复制并粘贴到您要
gTag使用实录
wwz123124的博客
06-27 6853
gTag是谷歌（Google）在2017年9月推出的新的谷歌分析（GA / Google Analytics）监测代码，用来统计网页的浏览数据 gtag('event', '<event_name>', {<event_params>}); gtag.js API 由单个函数 (gtag()) 构成，其语法如下： gtag(<command>, &lt...
gatsby-plugin-gtag:Gatsby插件，可将Google Analytics（分析）gtag.js（替换为analytics.js）添加到网站
05-25
gatsby-plugin-gtag 将Google Analytics gtag.js添加到网站 与，但是它没有使用脚本，而是使用 包括出站链接模块。 安装 npm install --save gatsby-plugin-gtag 用 // In your gatsby-config.js module . exports = { plugins : [ { resolve : `gatsby-plugin-gtag` , options : { // your google analytics tracking id trackingId : `UA-XXXXXXXX-X` , // Puts tracking script in the head instead of the body
angular-gtag：Angular的Google Analytics gtag.js
01-29
角度gtag.js 一个用于Angular的简单Google Analytics 程序包。 安装 npm install angular-gtag --save 将跟踪代码从GA管理控制台添加到index.html ，并将send_page_view设置为false。 < head > < script async src =" https://www.googletagmanager.com/gtag/js?id=UA-YOUR_TRACKING_ID " > </ script > < script > window . dataLayer = window . dataLayer || [ ] ; function gtag ( ) { dataLayer . push ( arguments ) ; } gtag ( 'js' , new Date ( ) ) ; gtag ( 'config' , 'UA-YOUR_TRACKING_ID' , { 'send_page_view' : false } ) ; </ script > </ head >
谷歌统计代码
12-31
谷歌统计代码
vue-gtag-Vue的全球站点标签插件-Vue.js开发
05-27
Vue全局站点标签（gtag.js） ）是一个JavaScript标记框架和API，可让您将事件数据发送到Google Analytics（分析），Google Ads和Google Marketing Platform。 有关gtag.js的常规文档，请阅读gtag.js开发人员指南。 ...
vue-analytics-Google Analytics（分析）的Vue插件。-Vue.js开发
05-27
Google从analytics.js移到了新的gtag.js库，并且我创建了一个名为vue-gtag的新插件。 如果您要创建一个新项目，建议您开始使用该版本。 vue-analytics Google Analytics（分析）的Vue插件为什么要使用它？ 该插件...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 624
步骤很详细，直接上教程……
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 14
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 361
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue 后端接口返回这段代码（<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-LR9XVHCN1K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-LR9XVHCN1K'); </script>）怎么放到vue页面中
06-09
你可以在 Vue 组件的 mounted 钩子函数中，通过动态创建 script 标签，将这段代码插入到页面中。请参考下面的代码示例： ``` mounted() { const script = document.createElement('script'); script.async = true; script.src = 'https://www.googletagmanager.com/gtag/js?id=G-LR9XVHCN1K'; document.body.appendChild(script); window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-LR9XVHCN1K'); } ``` 这样就可以在 Vue 页面中加载 Google Analytics 的 gtag.js 代码并正常运行。注意，这段代码需要在 Vue 实例挂载后才会执行，所以应该放在 mounted 钩子函数中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值