Google Analytics监测含有井号(#)的URL

Google Analytics 监测含有井号(#)的 URL 的需求通常是网页中有使用井号做描点,如 H5(Html5)网页切屏;还有就是单页面应用(Single-page App),如时下比较流行的 AngularJS。 URL 结构如下:

  • xxx.com/#page1
  • xxx.com/#page2
  • xxx.com/#page3

目前 Google Analytics 会自动将井号过滤掉,多个 URL 自动合并为一个 xxx.com,导致不能监测到每个单独的 URL 数据。好在 Google Analytics 比较灵活,可以借助 Google Tag Manager(以下简称 GTM) 自行配置解决这一问题。

1、配置变量(Variables)

登录 GTM,点击对应的容器(Container)。在 Variables 中找到 History 并勾选「History Source」,如下图:

hash0.jpg

创建新变量命名为:Get URL hash mark,选择 Custom JavaScript,并将如下内容填入:

function() {  
  return window.location.pathname + window.location.search + window.location.hash;  
}

如下图:

hash1.jpg

2、配置触发器(Triggers)

创建新的触发器命名为:Event-History Change,选择 History Change,并选择「History Source」=「popstate」,如下图:

hash2.jpg

3、配置标签(Tags)

编辑之前配置过 Google Analytics 的 Tag,点开「更多设置」,再点开「设置域」,在域内容中选择「page」,并在值中选择第一步创建的变量「Get URL hash mark」,如下图:

ga3.jpg

并在「Triggering」中选择刚才编辑好的 Triggers:Event-History Change. 保存并发布。

4、实时报表中看结果

如果配置正确的话,刷新带有井号的 URL 后,在 Google Analytics 的实时报表中将看到数据了,如下图:

hash4.jpg

到此,大功告成了:)

评论