前端实战-使用GTM和GA对网站精细化埋点


现在几乎所有的网站都会使用Google统计分析工具(Google Analyze, 简称GA)对网站进行监控和用户分析,但是GA只能作用于基于url级别的用户跟踪,但是如何利用GA能够争对用户在DOM级别的跟踪?这里我们可能需要使用Google Tag Manager(GTM)对网站进行埋点工作了。


使用GTM对元素进行埋点的方式主要分为两种,一种是通过GTM的数据变量的功能对页面进行元素定位;还有一种是通过修改网站源代码的方式对埋点元素进行属性的添加

页面定位埋点

  1. 首先我们可能需要找到页面中DOM的位置:


    image.png
  2. 我们可以看到这个元素DOM的class属性和它的文本值,或者其他的一些属性。
    然后我们通过GTM中的触发器(Target)的功能去对元素进行定位,如图:

image.png

从图中我们可以看到,我们选择的触发器类型和触发条件都是点击。所以需要点击的时候才会监听到这个DOM。还有一点是,添加的条件越多,定位的元素更精准~

代码层级定位埋点

一般情况下,使用页面定位埋点可以很好的解决大部分问题,但是当我们需要在页面上进行大量埋点的时候,那工作量,想想都是酸爽的,并且即使你埋点完了,维护呢?又是一份很大的工作量。

这个时候就需要通过代码埋点的方式出场了。

定位

这里的定位和上面说的定位差不多,但是,你需要定位的是你源码的位置,因为你需要改代码了!
然后在代码位置添加一个自定义属性,如图:


image.png
取值

我们为什么要在代码层添加一个这么多余且没有用的属性呢?不!他是有用的,我们需要这个自定义属性的值呢。

但是我们如何去取值呢?

打开GTM的变量模板,我们定义自己的变量,如图:


image.png

可以清晰的看到上面是一段js的函数代码~ 毕竟这是前端,前端,前端实战嘛。
不过有下面几点需要注意:

  1. 在使用GTM选择变量类型的时候,需要选择自定义JavaScript。
  2. 在代码的第二行,我们可以看到一个可能在js中运行会报错的东西--{{element}}。这是一个GTM内置的一个自动事件变量,但是,虽然这是内置的,但是还是需要你取设置定义这个变量,如图:
image.png
  1. 属性名字并不是一定要ga-data
  2. 由于前端项目使用的是iview组件,所以我们添加的属性位置不一定是在我们点击的位置,所以我们需要通过遍历的方式向上查询ga-data的属性,所以代码按自己的需求变更,所以就不贴代码了。
赋值

然后我们通过GTM获取到了我们设置的属性值,在这里我们设置为(1001,1002...),但是这样的数字并不是我们需要的,所以我们需要将这些值赋予其本该存在的意义。在这里我们使用了GTM的对照表功能,如图:

image.png

这样每个值都有其我们需要监听的意义了。

关联GA和GTM

我们现在已经将点给埋好了,可是我们最终需要的是实际的数据输出。所以我们需要使用GTM的代码模块进行配置,如图:

image.png
image.png

在代码类型这里,GTM提供了很多模块,我们需要选择google analytics 模块,这里选择第一个。

由于我们埋点的方式是点击事件的跟踪,所以选择的跟踪类型选择事件

在GA里面,存在着三个事件(event)的内置维度:事件类别(event category),事件操作(evnet action),事件标签(event tag)。所以我们可以通过设置这三个维度给GA传递我们需要传递的值。在这里我设置的事件类别为自定义的一个事件值为固定的,事件操作设置为上述的对照表变量,事件标签设置为页面路径,为了监听每个事件发生的页面。

跟踪ID设置为你的GA项目ID,为UA-xxxxxx-x 这样的值。

触发器这里我们需要打开触发器模块,自定义一个触发器,当我们获取到ga-data属性值后,可是我们怎么知道这个ga-data值是否是我们要去监听的元素点呢。所以设置如图:


image.png

同样的,触发器的类型我们需要选择的是点击-所有元素,触发条件我们设置为我们获取的getGaData的变量值在一定的区间范围内。然后我们将代码中的触发器选择我们设置好的触发器。

在此,我们设置好了GTM的所有配置,在GTM工作区间的右上角,我们可以看到两个按钮,如图:

image.png

我们可以先通过预览(debug)按钮查看是否存在设置错误问题。若是没有报错我们可以通过点击发布按钮对配置好的项目进行发布,发布后需要几十分钟的时间才会生效。

生效后,我们打开我们的GA界面,如图:

image.png

我们可以通过实时里面的事件界面,通过点击埋点元素,可以看见这里会产生相应数据。

然后,我们通过GA项目中的行为 =》 事件 =》 概览中可以看到数据(需要次日才能有相应的数据)如图:

image.png

然后我们可以看到如下信息:

image.png

结语

使用GA和GTM可以更加精准的对网站进行埋点跟踪,现在市面上也有很多很好的埋点工具(要钱~~),所以,可以根据自己的需求使用这些工具去对自己的网站进行一些运营工作。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,473评论 1 11
  • N年前做过一次GA集成,当时用的是原始手段进行埋点。最近有项目需求,进行GA集成,咨询了一下公司的专家。我擦,原来...
    kala888阅读 6,381评论 0 1
  • 本文介绍如何将谷歌优化的代码添加到网站上,以及如何使用GA和GTM确保跟踪的效果。 入门 为了设置和使用谷歌优化,...
    Zhang_SEM阅读 1,284评论 0 0
  • 导读:埋点分析,是一种常用的数据采集方法。经过不断演化发展,由此所演变出的数据采集方式,已出现很多类型,并各具特点...
    君临天下夜未央阅读 1,563评论 0 19
  • 人都是孤獨的,某些時候或許很需要有個人,最後發現還是自己~ C讀經: - 2Samuel23:2 "The Spi...
    NCNeverland阅读 102评论 0 0