GA google_analysis数据埋点使用学习记录(GTM)

2023-10-31 08:08

本文主要是介绍GA google_analysis数据埋点使用学习记录(GTM),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录,可以直接点到实践那里开始看的,前面都是我整理笔记的资料

    • 理论部分
      • 1、将ga的创建代码在项目开始的时候运行一下,如下图。
      • 2、ga函数是什么
      • 3、发送数据
    • 实践
      • 申请账号和媒体资源:
      • 设置跟踪代码,衡量网页浏览
        • 怎么定义一次浏览、一个用户多次浏览的话如何保证数据精准
        • 其他参考
      • 设置跟踪事件
      • 插件使用
      • 转化指标
    • GTM和GA


半个多月之后。。。
现在完成了GTM的埋点需求回来把文章写完,对整个GA和GTM的机制好像更理解了一点。
GA和GTM有关又无关。

GA就好比一个简易版的帮助你分析网站数据的分析网站,你用GA提供的js工具包(analysis.js)提供的ga方法向GA网站发送数据。
而GTM又称 代码管理工具(x),我觉得它更像是 第三方代码管理工具。

打个比方,要是除了GA,你还想让一个其他的网站 W 想要记录网站信息,这时候你又得下载W提供的工具包,辛辛苦苦把同样的数据手动发给W。
(假设你的网站是电商网站,你想用GA记录客流量、购买量信息,这时候W可以是一个引流的广告网站,这个引流的广告网站说我也要你们网站的购买量数据,这样我就知道我这个广告产生了多大作用,所以你也得发一份给我>^<)

然后每次搬砖工都得含辛茹苦地把工具包代码搬到html里,再在页面上同样的位置放置发送代码,搬砖工也很累哒!orz
然后搬砖工打开了GTM,他眼前一亮。
金色传说!
GTM就可以帮你管理这部分 要发给其他网站的 代码。

目前我琢磨到的使用方式如下:

  • GTM工具js还是要放html里的,GTM的跟踪工具window.dataLayer 也是要的。
  • 比如说n个网站都要“购买”数据,那你就只需要建立一个购买的触发器。
  • 然后根据需要建立变量,(自定义变量->变量类型为数据层变量,这样就可以从datalayer发来的对象里自动找到这个变量了)
    在这里插入图片描述
  • 建立完变量之后就建立 事件 (也就是代码),我使用的方式主要是发送 像素事件。
    我根据购买的number,去发送像素,从图里可以看得出,可以在事件里获得发来的数据并处理的。
    这段代码会被插入到你现在页面的html里,所以直接只写一段< img />也是可以的。
    在这里插入图片描述

最后就这样可以使用GTM了。
这样的跟踪方式其实是转手了一道,比如我购买了一个东西,触发了触发器,然后触发器再触发事件去处理传来的数据,向我的网站发送像素,接下来收到像素的我的网站,再发送跟踪请求,到正确的网站W。
也因此GTM被称为第三方代码管理器。

但是好处是你不用把这些代码写在自己的项目里了,比如同一个购买行为要发到5个网站,以前你要写好多代码,黏贴好多东西进你的项目,现在,你只需要发送一段datalayer(“purchase”)去触发购买触发器,然后把代码都放在GTM里,触发器自行触发,发出请求。


理论部分

参考内容来自于官方文档:
https://developers.google.com/analytics/devguides/collection/analyticsjs
简易版:
https://support.google.com/analytics/answer/1008080
在这里插入图片描述

首先申请个id,然后再有一个公网ip地址作为媒体资源的申请地址。

接下来在代码里进行操作。

1、将ga的创建代码在项目开始的时候运行一下,如下图。

可以写一个analysis()函数,在项目启动的时候运行,以下代码会自动将全局函数ga 注册到window上,之后就可以打印一下window.ga看看。
在这里插入图片描述

<!-- Google Analytics -->
<script>
/*** Creates a temporary global ga object and loads analytics.js.* Parameters o, a, and m are all used internally. They could have been* declared using 'var', instead they are declared as parameters to save* 4 bytes ('var ').** @param {Window}        i The global context object.* @param {HTMLDocument}  s The DOM document object.* @param {string}        o Must be 'script'.* @param {string}        g Protocol relative URL of the analytics.js script.* @param {string}        r Global name of analytics object. Defaults to 'ga'.* @param {HTMLElement}   a Async script tag.* @param {HTMLElement}   m First script tag in document.*/
(function(i, s, o, g, r, a, m){i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.// Creates an initial ga() function.// The queued commands will be executed once analytics.js loads.i[r] = i[r] || function() {(i[r].q = i[r].q || []).push(arguments)},// Sets the time (as an integer) this tag was executed.// Used for timing hits.i[r].l = 1 * new Date();// Insert the script tag asynchronously.// Inserts above current tag to prevent blocking in addition to using the// async attribute.a = s.createElement(o),m = s.getElementsByTagName(o)[0];a.async = 1;a.src = g;m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');// Creates a default tracker with automatic cookie domain configuration.
ga('create', 'UA-XXXXX-Y', 'auto');// Sends a pageview hit from the tracker just created.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

2、ga函数是什么

emmm打印出来是这样的,8是很懂,总之好像是要使用analysis.js文件?
然后并不是一个简单的函数,使用它主要是先创建链接(create),然后再发送事件ga(‘send’, ‘pageview’);
在这里插入图片描述
啊。lucky。官网里详细说明了这个函数是什么。
命令队列的命令以及对应参数参考:https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference
在这里插入图片描述
所以使用的时候先创建,创建完之后会根据下载下来的analysis.js文件重写window.ga函数。
window.ga函数对象拥有几个常用属性:
以及可以使用readyCallback,也就是回调函数,会在js文件下载完,所有ga命令队列中的历史命令执行完之后 执行,参数是跟踪器实例数组
1、函数:getAll()、getName
跟踪器实例的一些方法:
1、get(“name”) 获取数据。 之前看到的tracker.name这种方法打印不出跟踪器的name。默认跟踪器的name为t0。
2、set(“page”,“xxx”) 设置数据

3、发送数据

使用send命令。
可以参考这个博客使用GTM:https://blog.csdn.net/william_n/article/details/104001559
(Gtag官网参考地址:
https://developers.google.com/gtagjs
https://developers.google.com/analytics/devguides/collection/gtagjs

如何在站点查看发送数据
在这里插入图片描述

1、网页浏览数据追踪:
ga(‘send’, ‘pageview’);一般一个页面一个,我也好奇为啥不写上第三个参数,把pathname写上去。
监听路由跳转函数,在每一次跳转的时候就发送一次

history.listen(data=>{window.ga && window.ga('send', 'pageview');
})

官网上这么写的,应该是会自动捕获路由。

// 尝试用这个代码打印出自己的追踪其内部属性数据看看window.ga && window.ga.getAll().forEach(trackers=>{console.log(trackers.get("name"),trackers.get("page"),trackers.get("location"),trackers.get("title"))})

在这里插入图片描述

原因2是。好像说单页面应用不用。
因为我们在发送之前,需要更新跟踪器,也就是使用(“set”,“page”,xxx)这样去更新当前的浏览网页,对于单页面应用来说有一些交互行为是可能会引起错误(?)
来源:https://zhuanlan.zhihu.com/p/83747967
来源2(官网):https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications?hl=zh-cn

在这里插入图片描述

实践

申请账号和媒体资源:

首先(大受震撼.jpg)现在我们创建的GA资源一般都是GA4媒体资源,有两个特点:
1、媒体资源ID前面没有了UA开头的号码。
2、GA4项目没有数据视图。(应该是全部合并成使用标签创建?没有太看得懂)

在这里插入图片描述

目前这篇文章还是针对Universal Analytics版本(GA4之前的版本)做学习。因为大部分网站现在其实还是用的GA3,而且GA4太新了我找不到学习资料哈哈哈,(4版本的控制页面也和3完全不同),反正Universal Analytics版本后面也可以升级GA4,而GA4无法降级回来,所以就创建3版本的啦。

如果你发现你创建的媒体资源号前面没有UA开头,可以考虑重新创建账号。
参考:https://zhuanlan.zhihu.com/p/317729827

我买了个9块一年的域名,用这个申请了账号。

设置跟踪代码,衡量网页浏览

看这里看这里,官网的教程

首先尝试配置网页浏览事件。
我图方便,直接用umi建网页,因此编译html也隐藏起来了(弊端哈哈哈),嗯,所以我没有像教程里说的放在< script>里面,我直接放在一个运行时启动的函数里,像这样
在这里插入图片描述
接下来再加上一个路由监听,每一次监听都发送一次网页浏览事件。
在这里插入图片描述
然后你再转回到analysis的页面,就会看到这样监听出来了。
呜哇!啪啪啪鼓掌。
在这里插入图片描述
点开侧边 实时->内容,可能会看到这样的页面,出于各种考虑,可能会需要记录用户进入网站的方式等等。

在这里插入图片描述
你可能会疑惑,什么是来源、媒介 怎么设置它们?
来源/媒介 是google已经设置好的相匹配的一对数据,比如 google / organic、facebook.com / referral、pixnet.net / referral、(direct) / (none)
更详细的可以看看这篇文章(真的很详细): https://www.webguide.nat.gov.tw/News_Content.aspx?n=531&s=2935
(里面的管道分组在简体里好像是被翻译成 渠道分组)

既然是 “网页浏览量”,那可能就会有一个问题:

怎么定义一次浏览、一个用户多次浏览的话如何保证数据精准

GA的会话设定,必看
这三篇都读一下,感觉有帮助。
在这里插入图片描述

ga把一次会话理解为一个容器,其中包含了用户在网站上执行的操作。默认来说一次会话是30分钟时限,其中还有广告跳转、午夜重新更新的规则。

关于userID的官方解读1
userID与cookie解读2
如何保证精确性,其实GA会在浏览器cookie里留下一个针对浏览器的唯一id,它的默认时长有2年,但是换浏览器会失效、比如手机和网页同时看会记为两个用户,因此我们网站可以使用自己设置的userID,之后发送给ga网站分析时,它会认为我们设置同一个userID就是同一个用户。

window.ga && window.ga('set', 'userId', userId);
其他参考

防止浏览量虚高,对第三方referral做调整,比如对于电商,用户下单后跳转到第三方支付网站支付,如果支付不成功,有跳转回来,这种情况会造成新的会话开启,导致会话虚高,因此需要对GA做设置,使得GA遇到上述情况的时候不会开启新的会话,(也就是过滤)设置的地方在Property下的Referral Exclusion List。
https://www.ichdata.com/install-ga-tracking-code.html

设置跟踪事件

网页浏览只能看到路由的维度,而要细分到页面上的某个操作,必须以“事件”(event)为维度跟踪。
ga使用send方式发送跟踪时间,gtag使用另一种方式。

但是共通都是有几个衡量量词:

名称使用值(ga / gtag)说明
< action>eventAction / event_category将在 Google Analytics(分析)事件报告中显示为事件操作的值。(互动名称)
< category>eventCategory / event_category事件类别,通常是用户与之互动的对象(例如 ‘Video’)
< label>eventLabel / event_label事件标签,事件的描述等

在这里插入图片描述

设置完后可以在这里看到
在这里插入图片描述

插件使用

基本使用网页浏览+事件记录就可以满足大部分需求了,如果产品有更精细的维度需求,再慢慢看新的教程吧。
插件的话使用一个ecommerce 电子商务插件。
也就是电子商务跟踪。
1、先在报告里打开跟踪。(管理,数据视图,电子商务设置,打开即可。)
可以设置事件标签漏斗。
在这里插入图片描述

2、在代码中加入插件 ga(‘require’, ‘ecommerce’);
3、如何使用。

  • https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce

添加完交易数据和商品数据后别忘了send。

在这里插入图片描述

转化指标

比如设置一个目标,接下来给某个事件设置价值。
在这里插入图片描述

GTM和GA

学着学着看到一个新概念,叫做:GTM
全称google tag manage。
但是我不清楚明明已经有了send event方式,为什么还要引入一个新概念去操作页面上的事件呢?
然后我找了一些资料:
https://www.jianshu.com/p/e66457eff06b

在这里插入图片描述
GTM是跟踪代码管理器,和我们用的GA不一样。。
虽然最后它们的事件点击数据追踪都是会汇集到我们的GA报告里的,不过资料里都说使用GTM去跟踪埋点更易于后期维护,和不妨碍现有的代码逻辑。

创建一个跟踪代码管理器。
使用指南: https://developers.google.com/tag-manager/quickstart

这篇关于GA google_analysis数据埋点使用学习记录(GTM)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/313955

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

Hadoop集群数据均衡之磁盘间数据均衡

生产环境,由于硬盘空间不足,往往需要增加一块硬盘。刚加载的硬盘没有数据时,可以执行磁盘数据均衡命令。(Hadoop3.x新特性) plan后面带的节点的名字必须是已经存在的,并且是需要均衡的节点。 如果节点不存在,会报如下错误: 如果节点只有一个硬盘的话,不会创建均衡计划: (1)生成均衡计划 hdfs diskbalancer -plan hadoop102 (2)执行均衡计划 hd

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数