1. 海外社媒客户开发工具【免费】了，帮你从GG/FB/Ins/谷歌地图上免费获取客户
SPA(single-page application，单页应用或单页网站)指的是在首次加载网页时加载浏览整个网站所需所有资源的网络应用或网站。很多JavaScript框架，如AngularJS，Ember.js，Knockout.js，Meteor.js，ExtJS，Vue.js和React都采用了SPA原则。询盘云就是一个使用了Vue框架建立的SPA单页网站。
SPA与传统的网页加载方式不同之处在于：当用户点击链接并与网页互动时，系统将以动态方式加载后续内容。应用会经常更新地址栏中的网址来模仿传统的网页导航，但始终不会再发出整个网页加载请求。
在传统网站上运行默认的 JavaScript 跟踪代码段没有任何问题，因为该代码段在用户每次加载新页面时都会运行。但是，对于SPA，网站以动态方式加载新的网页内容，而不采用整个网页加载方式，因此GTM或GA代码段仅运行一次。也就是说，当有新内容加载时，GTM或GA代码段并不会被重新加载，也就无法实现数据统计的目的。
如果网站使用GA来统计的话，当有新内容加载时，必须通过人工方式跟踪后续的网页浏览，即通过虚拟页面的方式来统计SPA的页面浏览。当SPA动态加载内容，并更新地址栏中的网址时，存储在您的跟踪器上的数据也应更新。
1.使用 analytics.js跟踪
要更新跟踪器，请使用 set 命令，并提供新的 page 值：ga('set', 'page', '/new-page.html');
在设置了新的 page 值后，所发送的所有后续匹配将使用新值。要记录网页浏览，请在更新跟踪器后立即发送网页浏览匹配。
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
2.使用 gtag.js 跟踪
当应用动态加载内容并更新地址栏中的网址时，也应该更新通过 gtag.js 存储的页面网址。要更新 page_path，请通过为 page_path 参数指定一个值来修改媒体资源的 config：
gtag('config', 'GA_TRACKING_ID', {'page_path': '/new-page.html'});为 page_path 添加新值后，发送到该媒体资源的所有后续事件都将使用这一新值。
3.使用GTM
可以发现如果使用GA来跟踪SPA的话，都需要在单独增加一些虚拟页面的代码才能实现。要使用虚拟页面，您需要在每次“页面”更改时推送一个事件，然后触发一个触发并设置虚拟页面名称的网页浏览标记。有了GTM之后，跟踪SPA的方法比GA简单了很多，不用再找技术修改SPA代码，市场人员直接通过配置GTM就可以实现。
GTM网站容器的内置变量中叫“历史记录”。当用户点击SPA中的链接并与网页互动时，GTM历史记录能够捕捉到地址栏中的网址变化，并记录在New History Fragment（新历史记录片段）中。GTM跟踪SPA应用或网站就主要通过这个变量来实现。具体方法如下：
- 在GTM中建立Google analytics账号ID {{GA-id}}
- 按照GTM默认的代码部署说明将代码部署在SPA上，如果之前有部署GA代码的话，需要删除
- 手动建立“页面跳转”触发器，触发条件为“历史记录变更”，它能够捕捉到SPA网站中的地址栏网址变化，并将当前网址存储在{{New History Fragment}}变量中
- 在代码中建立“页面浏览”代码，将GTM捕捉到的数据传递给GA。
- 触发条件为自带的“All Pages页面浏览”和刚建立的“页面跳转“触发器
- 跟踪类型为页面浏览
- 替换GA中如下字段：page – {{New History Fragment}}
1. 海外社媒客户开发工具【免费】了，帮你从GG/FB/Ins/谷歌地图上免费获取客户
微信扫一扫 或 点击链接联系我