谷歌统计代码使用方式

1、加入 gtag 代码

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

‘*’ 星号就是申请的号码，可去 google站点
查看。
2、统计页面load 时间

window.addEventListener('load', () => {if (window.performance) {var timeSincePageLoad = Math.round(performance.now())let pageload = () => {try {window.gtag('event', 'page_complete', {'name': 'pageOnLoad','value': timeSincePageLoad,'event_category': '页面load完成时间'})} catch (e) {setTimeout(() => {pageload()}, 5000)}}}
})

3、使用 config 命令发送网页浏览

    let seePage = function () {try {window.gtag('config', 'UA-118873303-1', {'page_title': 'new_pageView','page_path': currPath})} catch (e) {setTimeout(() => {seePage()}, 5000)}}seePage()

currPath 就是访问的页面路径 eg 。
4、事件统计

export function viewEvent (eventName, eventCategory, eventLabel) {let eventPage = function () {try {window.gtag('event', eventName, {'event_category': eventCategory,'event_label': eventLabel,'value': 1})} catch (e) {setTimeout(() => {eventPage()}, 5000)}}eventPage()
}
//         使用方式
//        加help 事件viewEvent('view_help', 'view_help_index', 'open_help')

效果

参数解释

    gtag('event', <action>, {'event_category': <category>,'event_label': <label>,'value': <value>}); <action> 是在 Google Analytics（分析）事件报告中显示为事件操作的字符串。<category> 是显示为事件类别的字符串。<label> 是显示为事件标签的字符串。<value> 是一个显示为事件价值的非负整数。

遇到一个现象：当你自己主动给谷歌统计发起会话，会造成跳出率下降！
谷歌的跳出率定义：

“跳出”是指您网站上的单页会话。在 Google Analytics（分析）中，“跳出”特指仅触发了一次对 Google Analytics（分析）服务器的请求的会话。例如，用户打开了您网站上的一个网页，然后就退出了网站，并且这次会话没有触发对 Google Analytics（分析）服务器的任何其他请求。跳出率是指单页会话次数在所有会话次数中所占的比例，也就是用户在您网站上仅查看一个网页并仅触发一次对 Google Analytics（分析）服务器的请求的所有会话次数所占的百分比

（最终我们去除了主动给谷歌统计的代码）

谷歌统计代码使用方式相关推荐

谷歌统计使用代码部署和事件API使用
谷歌统计代码部署和API使用 1.注册谷歌账号要使用GA,必需先成为GOOGLE的注册用户,如果没有请去注册.当然,你有GMAIL邮箱就可以.邮箱就是帐户名. 2.开启Google Analytic ...
在项目开发中统计代码行数的6种方式
文章目录一.使用find和wc命令统计代码行数进行参数的过滤筛选命令参数简要说明二.PowerShell工具统计代码行数条件过滤输出所有文件的行数 PowerShell相关命令的简要说明 ...
Vue项目和Tauri接入Google Analytics谷歌统计流程
Google Analytics官网:https://analytics.google.com/ vue-gtag官网:Get started - vue-gtag 先要在Google Analyti ...
这样统计代码执行耗时，才足够优雅！
作者 | Jitwxs 来源 | https://jitwxs.cn/5aa91d10.html 一.前言代码耗时统计在日常开发中算是一个十分常见的需求,特别是在需要找出代码性能瓶颈时. 可能也是受 ...
优雅统计代码耗时的4种方法！
来源:jitwxs.cn/5aa91d10.html 一.前言代码耗时统计在日常开发中算是一个十分常见的需求,特别是在需要找出代码性能瓶颈时. 可能也是受限于 Java 的语言特性,总觉得代码写起来 ...
jsp中java代码无效_来杯咖啡，教你如何优雅的在java中统计代码块耗时
推荐阅读: Sping源码+Redis+Nginx+MySQL等七篇实战技术文档,阿里大佬推荐阿里内部:2020年全技术栈文档+PPT分享,(万粉总结,回馈粉丝) 在我们的实际开发中,多多少少会遇到 ...
从统计代码来谈JS加载的优化
我有这么一个职业病,每次发现页面很卡,不管谁的网站,都会F12调出Chrome控制台来调试,看看是什么原因导致. 原因其实不外乎这几种: 1.页面文档的加载 2.css/js 的加载这边就 js 说 ...
如何优雅的统计代码耗时，快速知道你的程序慢在哪里！
来源:jitwxs.cn/5aa91d10.html 一.前言代码耗时统计在日常开发中算是一个十分常见的需求,特别是在需要找出代码性能瓶颈时. 可能也是受限于 Java 的语言特性,总觉得代码写起来 ...
如何优雅的在java中统计代码块耗时
在我们的实际开发中,多多少少会遇到统计一段代码片段的耗时的情况,我们一般的写法如下 long start = System.currentTimeMillis(); try {// .... 具体的代 ...
C++统计代码执行耗时
C++统计代码执行耗时文章目录 C++统计代码执行耗时 1. 需求 2. 代码结构 3. CMakeLists文件 4. 核心代码 5. 使用测试 1. 需求统计项目中代码执行耗时 2. 代码结构 ...

谷歌统计代码使用方式

谷歌统计代码使用方式相关推荐

最新文章

热门文章