专栏首页GA小站1.1.6 、GA跟踪和数据传输原理

1.1.6 、GA跟踪和数据传输原理

1.Web——页面标签技术

GA通过在网页中嵌入一段GA的JS跟踪代码,然后这段代码会收集相关信息通过虚拟1像素的gif图片的形式来发送相关的信息给Google的服务器,以完成数据采集。之所以说是虚拟1像素,是因为这个图片是看不到的,整体的流程如图1-6所示

图1-6 GA数据传输原理

如图1-6所示,跟踪代码部分进行了以下4项操作。

1)创建了一个 <script> 元素,并开始从GA官方网站异步下载JavaScript 库analytics.js。

2)初始化了一个全局函数 ga(也称为 ga() 命令队列),您可以通过该函数来安排要在 analytics.js 库加载完毕可供使用时执行的命令。

3)在 ga() 命令队列中添加一条命令,为通过 “UA-XXXXX-Y”参数指定的媒体资源创建一个新的跟踪器对象。

4)在 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 命令,并提供新的 page 值。

ga('set', 'page', '/new-page.html');

在设置了新的 page 值后,所发送的所有后续匹配将使用新值。要记录网页浏览,请在更新跟踪器后立即发送网页浏览匹配。

ga('set', 'page', '/new-page.html');

ga('send', 'pageview');

虽然从技术角度来说,用于网页浏览匹配的 send 命令可以采用可选 page 字段作为第三个参数,但是当跟踪单页应用时不推荐采用这种方式传递 page 字段。这是因为并未在跟踪器上设置通过 send 命令传送的字段,这些字段仅适用于当前的匹配。当您的应用发送任何非网页浏览匹配(例如事件或社交互动)时,如果未更新跟踪器,将导致错误,因为这些匹配将会与创建跟踪器时包含的任何 page 值关联。

事实上面做法在我看来是有些繁琐的,后面会介绍一种通过数据层的形式来跟踪单页应用,原理是不变的,还是虚拟页面,只不过简化了很多。

4.Flash页面--组件的引入

Flash页面由于技术的差异,现有的跟踪代码是没法跟踪到的,但是Adobe(美国一家跨国电脑软件公司)开发了一个包含analytics.js的组件,使得跟踪Flash页面成为了可能,在跟踪Flash页面的时候需要引入这个组件,详细原理与配置过程位于Google的开发者官方网站。

如果您的flash是嵌入在Web的形式,那么您可以直接使用普通的跟踪代码就是,如果要跟踪flash的行为,可以直接调用dataLayer.push这个方法去实现。

本文分享自微信公众号 - GA小站(ichdata)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分布式ID生成方案总结

    ID是数据的唯一标识,传统的做法是利用UUID和数据库的自增ID,在互联网企业中,大部分公司使用的都是Mysql,并且因为需要事务支持,所以通常会使用Innod...

    macrozheng
  • @dynamicCallable

    Swift 5 中引入了一个新的语法@dynamicCallable(动态可调用)。使用@dynamicCallable标记了目标以后(类、结构体、枚举、协议)...

    YungFan
  • MyBatis之foreach

         foreach 元素是非常强大的,它允许你指定一个集合,声明集合项和索引变量,它们可以用在元素体内。它也允许你指定开放和关闭的字符串,在迭代之间放置分...

    Arebirth
  • 虚拟现实前传-Three.js实现管壳式换热器3D模型在线查看

    使用threejs实现3D模型加载和显示。3D编程就像拍大片,几个关键东西如下所列:

    周星星9527
  • 测试开发进阶(十九)

    https://github.com/vuejs/vue-router/blob/dev/examples/nested-routes/app.js

    zx钟
  • ASP.NET Core 2.2 : 二十二. 多样性的配置方式

    大多数应用都离不开配置,本章将介绍ASP.NET Core中常见的几种配置方式及系统内部实现的机制。(ASP.NET Core 系列目录)

    梁规晓
  • 用css3实现惊艳面试官的背景即背景动画(高级附源码)

    这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收获,也强烈推荐大家看看这本书,你值得拥有。我们将学到

    徐小夕
  • MyBatis操作Oracle批量插入 ORA-00933: SQL 命令未正确结束

    最近在使用MyBatis操作Oracle数据库的时候,进行批量插入数据,思路是封装一个List集合通过Myabtis

    Arebirth
  • WebGoat靶场系列---AJAX Security(Ajax安全性)

    Ajax 即” Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发...

    徐焱
  • Castle DynamicProxy基本用法(AOP)

    本文介绍AOP编程的基本概念、Castle DynamicProxy(DP)的基本用法,使用第三方扩展实现对异步(async)的支持,结合Autofac演示如何...

    thz

扫码关注云+社区

领取腾讯云代金券