不同版本的Google Analytics做跨站跟踪
跨域跟踪,也叫做跨站跟踪,是用户在不同网站(域名)之间跳转的时候能识别到是同一个人。
在实际的过程中,有时候多个站点需要看成一个站点来评估网站的流量情况,比如同一产品对不同地域使用不同域名,或壳站和主站之间,或主站与商城网站,这就需要对网站做跨域跟踪。
原理
我们知道,Google Analytics是通过Client ID识别用户的,而Client-ID 是随机生成的独一无二的字符串,生成后的 ID 存储在浏览器的 Cookie 中,这样用户再次访问同一网站时即可被识别。
假设有两个网站A和B,当从A站点跳转到B站点的是时候用同一个Client ID,那么就可以实现跨域跟踪了,具体实现是通过URL传递Client ID,用户从A网站点击跳转到B网站,到达B网站的着陆页会附带A网站Client ID,然后B网站将这个Client ID作为自己的Client ID,从而识别到是同一个用户。
在Google Analytics中做跨站跟踪主要是对allowLinker和linker做设置,allowLinker是链接器参数,作为是从URL上获取Client ID并将其设置为自己的Client ID,linker是链接器插件,是从A跳转到B的时候,将A的Client ID添加到B的着陆页上。
假设现在有A.com和B.com需要做跨域跟踪,看看如何设置:
Universal Analytics跨站
Universal Analytics,其实就是统一版跟踪代码,有两种方式可以实现跨域:
硬编码
硬编码就是直接在Google Analytics的跟踪代码做修改实现跨域跟踪,未修改的跟踪代码是:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
A网站的跟踪代码修改为:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-Y', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['B.com'] );
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
B网站的跟踪代码修改为:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-Y', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['A.com'] );
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
这个就是跨站跟踪,看上去和官方的示例是一模一样的,但往往实际上却是错误的,因为你除了跨站跟踪,往往还有一个单站的跟踪,也就是一个网站向多个GA发送数据,这种情况是需要使用跟踪器的,官方的跨站跟踪的示例是只做默认跟踪的,所以使用默认生成的跟踪器就可以的了,但你是向多个GA跟踪数据,所以需要使用跟踪器。
添加跟踪器后A网站的跟踪代码为:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-Y', 'auto', 'clientTracker',{'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['B.com'] );
ga('clientTracker.send', 'pageview');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview')
</script>
<!-- End Google Analytics -->
添加跟踪器后B网站的跟踪代码为:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-Y', 'auto','clientTracker', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['A.com'] );
ga('clientTracker.send', 'pageview');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
这样就可以实现想多个媒体资源/GA发送数据了。
注意:上面的代码是先跨站跟踪后做普通跟踪,不要先普通跟踪后跨站跟踪,因为这样会导致跨站跟踪的时候的Client ID覆盖了普通跟踪生成的Client ID,会影响原有的数据跟踪,普通跟踪中会将看做是一个New Users,还有另一种处理方式,就是将跨站传递的Client ID不适用默认的_ga用另一个cookie保存,这个专用于跨站,那么跟踪代码可以改为:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-Y', 'auto','clientTracker', {name: 'rollup', cookieName: '_rollupGa','allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['A.com'] );
ga('clientTracker.send', 'pageview');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
是不是觉得有些复杂呢?所以我推荐使用GTM布署,GTM的方法就简单多了。
GTM上
每个站点对应一个GTM容器,每个站点在GTM都做同样配置,将不同站点的数据向同一个GA-view发送,Tag中的allowLinker和cookieDomain是解决不同站点同一用户的识别问题,用户在跨站的时候将用户唯一标示clientid传递到另一个站点公用,从而解决跨站用户唯一性的问题。
设置过程
将跨站用的Tracking ID用一个常量变量存储,命名为“跨站跟踪专用TrackingID”:
创建一个常量变量,命名为“跨站专用Cookie”,作如下设置:
创建一个谷歌分析设置变量命名为“跨站跟踪”,做如下设置:
创建一个Tag命名为“跨站跟踪基础代码”,做如下设置:
这样就完成了跨站跟踪。
一样的问题,这样跨站会跨站用户在原跟踪中被看做是新用户,需要用一个专门的cookie存储跨站用的Client ID,设置改为:
Global Site Tag跨站
Global Site Tag就是全局版,分为普通全局版和混合全局版,带它们的代码结构是一直的,设置也是一样的,如:
普通全局版
普通全局版使用的Tracking ID,未修改的跟踪代码是:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');
</script>
混合全局版
混合全局版使用的测试D,未修改的跟踪代码是:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XJGBFSLMD8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XJGBFSLMD8');
</script>
就ID不一样,所以直接以混合全局版作为示例,AB网站的共用一样的跟踪代码,修改为:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XJGBFSMD8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XJGBFSMD8',{
'linker': {
'accept_incoming': true,
'domains': ['A.com','B.com']
}
}); </script>
也可以用set在前面加载:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XJGBFSMD8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('set', 'linker', {'domains': ['A.com','B.com'], 'accept_incoming': true;});
gtag('js', new Date());
gtag('config', 'G-XJGBFSMD8');
</script>
向多个测量ID发送数据的时候要使用group,类似统一版的跟踪器的作用,如果没设置就默认default。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XJGBFSMD8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XJGBFSMD8',{'groups': 'agency',
'linker': {
'accept_incoming': true,
'domains': ['A.com','B.com']
}
}); gtag('config', 'GA_MEASUREMENT_ID');
</script>
如果是用测量ID的,我估计在GTM也可以做跨站跟踪,但官方目前还没提供GTM里面的详细参数文档,你可以根据硬编码的文档提供的关键字去GTM里面尝试去设置。
- Table API&SQL的基本概念及使用介绍
- 使用Linq to Sql 创建数据库和表
- Flink DataSet编程指南-demo演示及注意事项
- 解决 wcf HTTP 无法注册 另一应用程序正在使用 TCP 端口 80
- 构建Flink工程及demo演示
- F-Stack之kqueue封装为epoll介绍
- wcf http 返回图片
- F-Stack与Seastar对比
- Flink DataStream编程指南及使用注意事项。
- sqlserver 行转列
- FreeBSD下的工具(sysctl、netstat等)如何移植到F-Stack
- java面试基础知识(一)
- Linq 实现 DataTable 行转列
- sql常用的系统存储过程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 打卡群刷题总结0826——组合总和
- 排序之简单排序
- 打卡群刷题总结0827——组合总和 II
- 快速学习-Gateway--服务网关
- 用Python写一个身份证号码校验系统
- 手摸手 Elastic Stack 使用教程 - 环境安装
- SAS-输出文档生成目录的方法
- 醒醒神,爱奇艺笔试真题
- Qt音视频开发22-通用GPU显示
- 通吃岛屿问题
- 堂妹问我:Dubbo的服务暴露过程
- LeetCode 657. 机器人能否返回原点
- ! [rejected] master -> master (fetch first)
- Mybatis源码学习(二)Mapper动态代理
- Mybatis源码学习(三)executor