.Web——页面标签技术
GA通过在网页中嵌入一段GA的JS跟踪代码,然后这段代码会收集相关信息通过虚拟1像素的gif图片的形式来发送相关的信息给Google的服务器,以完成数据采集。之所以说是虚拟1像素,是因为这个图片是看不到的,整体的流程如图1-6所示。
图1-6 GA数据传输原理
如图1-6所示,跟踪代码部分进行了以下4项操作。
-
创建了一个<script>元素,并开始从GA官方网站异步下载JavaScript 库analytics.js。
-
初始化了一个全局函数 ga(也称为 ga() 命令队列),您可以通过该函数来安排要在 analytics.js 库加载完毕可供使用时执行的命令。
-
在 ga() 命令队列中添加一条命令,为通过“UA-XXXXX-Y”参数指定的媒体资源创建一个新的跟踪器对象。
-
在 ga() 命令队列中添加另一条命令,为当前页面向 GA发送网页浏览数据。
从上面的跟踪代码可以知道,GA跟踪代码是异步加载的,所以对网页的加载时间的影响是最很小的,可以忽略。
当在网站中添加了跟踪代码段之后,就会针对用户访问的每个页面发送网页浏览数据。GA通过处理此数据可以推导出大量信息,其中包括用户总共在您网站上停留多少时间;用户在每个网页上停留的时间以及用户查看这些网页的次序;用户单击了哪些内部链接(根据下一个网页浏览的网址得到)。
此外,IP 地址、用户代理字符串以及 analytics.js 在创建新跟踪器时查看的初始网页可用于确定以下这类信息:用户的地理位置,用户使用的浏览器和操作系统,屏幕尺寸以及是否安装Flash或Java、引荐网站等。
上述数据都原始和衍生数据都存储在Google全球的服务器,您看到就是各种各样的报告。
2.APP——SDK
APP的跟踪是通过嵌入SDK的方式,需要在GA中生成一个包含Tracking ID的SDK配置文件,然后将这个SDK嵌入APP中,在触发的时候向GA服务器发送数据,在这里可以理解 Activity 或 Fragment对应Web的页面。
3.H5——单页应用
单页应用(SPA,Single Page Web Application) 指的是在首次加载网页时加载浏览整个网站所需所有资源的网络应用或网站。当用户单击链接并与网页互动时,系统将以动态方式加载后续内容。应用会经常更新地址栏中的网址来模仿传统的网页导航,但始终不会再发出整个网页加载请求。
简单的说就是在打开不同的页面的时候URL是不变的,这对于传统的页面跟踪基于URL来区分不同页面,显然,现有跟踪方法就不适用了,需要做一些调整升级,用虚拟页面的形式来跟踪。
当应用动态加载内容,并更新地址栏中的网址时,存储在您的跟踪器上的数据也应更新。要更新跟踪器,可使用 [set](https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference” \l “set) 命令,并提供新的 [page](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference” \l “page) 值。
ga(‘set’, ‘page’, ‘/new-page.html’);
在设置了新的 page 值后,所发送的所有后续匹配将使用新值。要记录网页浏览,请在更新跟踪器后立即发送网页浏览匹配。
ga(‘set’, ‘page’, ‘/new-page.html’);
ga(‘send’, ‘pageview’);
虽然从技术角度来说,用于网页浏览匹配的 [send](https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference” \l “send) 命令可以采用可选 page 字段作为第三个参数,但是当跟踪单页应用时不推荐采用这种方式传递 page 字段。这是因为并未在跟踪器上设置通过 send 命令传送的字段,这些字段仅适用于当前的匹配。当您的应用发送任何非网页浏览匹配(例如事件或社交互动)时,如果未更新跟踪器,将导致错误,因为这些匹配将会与创建跟踪器时包含的任何 page 值关联。
事实上面做法在我看来是有些繁琐的,后面会介绍一种通过数据层的形式来跟踪单页应用,原理是不变的,还是虚拟页面,只不过简化了很多。
4.Flash页面–组件的引入
Flash页面由于技术的差异,现有的跟踪代码是没法跟踪到的,但是Adobe(美国一家跨国电脑软件公司)开发了一个包含analytics.js的组件,使得跟踪Flash页面成为了可能,在跟踪Flash页面的时候需要引入这个组件,详细原理与配置过程位于Google的开发者官方网站。
如果您的flash是嵌入在Web的形式,那么您可以直接使用普通的跟踪代码就是,如果要跟踪flash的行为,可以直接调用dataLayer.push这个方法去实现。