3.2.8 、Google Tag Manager实战指南——虚拟页面跟踪单页应用

1.什么是单页应用?

单页应用就是指浏览器访问站点的时候,使用期间不会重新加载页面,给用户的看到的是所有URL就是一样的,有体验原生APP的感觉,这是一种从Web服务器加载的富客户端。

2.单页应用的优点:

  • 一次开发,多端兼容,大大减少了开发的工作量。
  • 减轻服务器压力,只提供数据。
  • 前后端分离,各司其职,这个应该不算是特有的优点。

虽然单页应用还是有部分缺点,但是优点大于缺点,所以深受开发者的喜爱,单页应用在移动端上盛行。由于单页应用使用过程中不会重新加载页面,给采用页面加标签技术的跟踪方案带来了诸多的不便,如GA里面的页面报告就只有一个URL,页面浏览量远远小于实际情况,以及很多报告都不能使用。

如果要想Web那样跟踪单页应用,那么需要采用虚拟页面的形式去跟踪。

实现原理:如图3-85所示,打开新的页面的时候向数据层推送事件,然后在GTM将事件转化成PV,跟直接推送PV相比,这种方法好处就是可以通过GTM上的触发器控制页面和Hits的数量,而不需要做发版。

图3-85 单页应用跟踪原理

这种方式的原理等于与前一节事件跟踪的dataLayer方法。基本上对于使用GTM来管理APP也是类似的原理,都是通过数据层来管理屏幕,维度,指标等

设置过程:

1、变量,接收[数据层](https://www.ichdata.com/tag/数据层" \t "_blank)的[自定义事件](https://www.ichdata.com/tag/自定义事件" \t "_blank),如图8-86所示:

图8-86 自定义事件

这配置表示接收所有的自定义事件。

2、触发器,

匹配[数据层](https://www.ichdata.com/tag/数据层" \t "_blank)中需要触发的页面或屏幕,只有匹配到的才会出现在page或screenname里面,可以随意控制,如图3-87所示:

图3-87 自定义事件触发器

3、代码

在要设置的字段中找到page,值就是前面的变量EventName,这个就是将[数据层](https://www.ichdata.com/tag/数据层" \t "_blank)的事件转成page,您在GA报告里面看到的就是page了,需要注意的是tracktype是pageview,也就是页面跟踪的,具体设置如图3-88所示:

图3-88 代码配置

触发器就是前面的“dataLayer事件跟踪屏幕触发”,这样所有的页面都会被跟踪到,可以像Web那么继续使用GA。

原文地址:https://www.cnblogs.com/ichdata/p/11721315.html

时间: 2024-09-29 18:09:42

3.2.8 、Google Tag Manager实战指南——虚拟页面跟踪单页应用的相关文章

3.2.4 、Google Tag Manager实战指南——跨站跟踪

在实际的过程中,有时候多个站点需要看成一个站点来评估网站的流量情况,比如同一产品对不同地域使用不同域名,或壳站和主站之间,这就需要对网站做跨域跟踪. 实现原理:每个站点对应一个GTM容器,每个站点在GTM都做同样配置,将不同站点的数据向同一个GA的媒体资源发送,代码中的allowLinker和CookieDomain是解决不同站点同一用户的识别问题,用户在跨站的时候将用户唯一标示clientid传递到另一个站点共用,从而解决跨站用户唯一性的问题,具体的配置图解如图3-44,图3-45所示: 图3

3.2.1、Google Tag Manager实战指南—— 容器的导出与导入

在GTM中,可以将现有的配置导出,然后再导入到其他的容器中,利用这个可以导入别人的配置,看别人的怎么使用GTM或复制同样的配置到其他站点,导入和导出的方法非常简单:1.导出在GTM中单击“管理”→“导出容器”→“选择版本或工作区”→“Default Workspac”→“导出”就可以到处整个容器的配置文件,如图3-36所示,文件的格式为json: 图3-36 导出GTM容器配置 2.导入在GTM中单击“管理”→“导入容器”,可以看到如图3-37所示的界面: 图3-37 导入容器 选择容器文件:就

3.2.3、Google Tag Manager实战指南—— 跨域跟踪

如果您使用统一版跟踪代码,即analytics.js,这个已经默认开启了跨子域跟踪的,可以直接使用跟踪代码,如图3-41所示,但还需要配置一些东西: 图3-41 跟踪代码里面的auto表示自动将Cookie生成在顶级域名之下,也就是两个子域会是共用同一个顶级域名里的Cookie了.如果您是用GTM管理的,直接配置CookieDomain就行了,这个的作用就是前面auto,设置如图3-42所示: 图3-42 配置CookieDomain 上面两种方法都是实现同样的作用,接下来就是引荐流量排除了,使

3.2.2 、Google Tag Manager实战指南——第三方代码部署

第三方代码的部署方式有两种,一种是采用内置模板的方式,一种是采用自定义HTML的形式,下面以部署Adroll再营销代码作为例子,首先登陆Adroll去获取跟踪代码,如图3-38所示: 图3-38 Adroll代码 需要注意的是跟踪代码里面有两个ID,一个是广告ID,一个是像素ID,这两个ID在用内置模板部署的时候就需要注意,不要混淆. 1.内置模板方法 在GTM中单击“代码”→“新建”→“选择一个代码类型以开始设置”→“Aroll Smart Pixel”,然后填上广告ID和像素ID,触发器选择

3.2.5 、Google Tag Manager实战指南——全局变量转自定义维度

在做AB test的时候,由于页面的不同,两种类型的用户可能会有不同的表现,但用户在分类的时候一般采用随机的方式,看两类用户的行为表现,这里就需要在页面添加一个用户分组字段,如A组走新界面,B组走旧界面.这就需要一个字段能够在GA上将两类用户做区分,可以通过GTM读入全局变量后转成GA维度的方法,具体原理如图3-49所示. 实现原理:将分组标示作为页面的全局变量,变量中的JavaScript变量读取全局变量,然后在GA中自定义维度新建一个字段,记下索引,在GA默认跟踪代码中自定义维度分别增加变量

3.2.9 、Google Tag Manager实战指南——广告参数传递

通常需要区分不同渠道来源的时候一般会使用UTM标记,其实还有另一种方式可以传递广告参数,这个需要使用GTM,同时配合自定义维度来使用. 原理是:在GTM通过变量配置,将推广URL中的特殊渠道参数取出,然后转成GA中的维度,一般而言,这个渠道参数和用户绑定是半年 如果推广的URL是:www.example.com?site=site1&Banner=Banner1&keyword=word1 详细设置过程: 1.GTM中获取广告参数 在GTM的变量中选用网址类型,然后选择组件类型是查询,查询

3.2.10、Google Tag Manager实战指南—— 获取用户IP

众所周知,GA里面是没有提供IP这个字段的,而且也明文规定不准上传能够识别用户的信息.但是很多用户,特别是大陆地区的用户在习惯了百度统计提供IP用于用户计数,也希望GA能够获取的到用户IP,实际上是可以实现的,但是不要明文上传IP,做些装饰,还是可以实施的.获取IP还有一个实用的作用就是可以用于垃圾流量的分析,如某个IP的访问很多,跳出率很高,那这个基本就可以判定是刷量. 原理:用js去通过第三方API查询获取得到用户的IP的信息,然后将IP加密写入Cookie,再通过GTM读取第一方Cooki

3.2.6 、Google Tag Manager实战指南——用UserID将后台数据与GA数据打通

在实际的应用中,我们往往需要将我们自己后台的数据库里面的数据跟GA里面的用户匹配起来,或是想知道不同用户在不同设备的使用情况,跨设备的使用情况,这一切都有赖于使用User ID来实现,实现的原理如图3-53所示. 实现原理:GA中的用户唯一标示符是userid,通过用自己生成的唯一标识符覆盖GA自动生成的即可,详细过程为:用户注册生成ID的时同时生成ID的Hash值GA_UID,两者之间是一一对应关系,再将GA_UID设置成页面的全局变量,在GTM中通过js变量将GA_UID读入,是在GA中自定

3.1 .1、Google Tag Manager基础知识——GTM简介

Google Tag Manager(谷歌代码管理系统,GTM)可以帮助您快速轻松地更新网站或移动应用上的代码和代码段,例如用于流量分析和营销优化的代码和代码段.您还可以通过跟踪代码管理器的界面添加和更新 AdWords.Google Analytics.Firebase Analytics.Floodlight 和第三方代码或自定义代码,而无需修改网站代码.这样既减少了错误,也免除了配置代码时向开发求助的麻烦. 1.GTM工作原理 针对网站的跟踪代码管理器通过其容器代码运行,您需要将容器代码放