Web Tracking for Single Page Application Sites Using Google Tag Manager

Treasure Data recommends you verify the implementation of any new features or functionality at your site using the Treasure Data JavaScript SDK version 3 before you start using it in production. It manages cookies differently. Be aware when referring to most of these articles that you need to define the suggested event collectors and Treasure Data JavaScript SDK version 3 calls in your solutions.For example, change //cdn.treasuredata.com/sdk/2.5/td.min.js to //cdn.treasuredata.com/sdk/3.0.0/td.min.js.

Usually, GTM can be used to send PV, triggered by "pageview" trigger, to Treasure Data tables.

While for SPA (Single Page Application) sites, like WWD JAPAN.com （ https://www.wwdjapan.com ), PV triggered by "pageview" trigger can not be sent to TD correctly.

Use the loadPage and changePage triggers.

loadPage trigger (event push on data layer)

SPA page will be loaded only once, then generate contents by using server-side APIs. "loadPage" will be triggered after the initial page load completes and HTML title is set.

Using loadPage trigger will send PV to TD tables only once.

Sample:

<script type="text/javascript">
!function(t,e){if(void 0===e[t]){e[t]=function(){e[t].clients.push(this),this._init=[Array.prototype.slice.call(arguments)]},e[t].clients=[];for(var r=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}},s=["addRecord","blockEvents","fetchServerCookie","fetchGlobalID","fetchUserSegments","resetUUID","ready","setSignedMode","setAnonymousMode","set","trackEvent","trackPageview","trackClicks","unblockEvents"],n=0;n<s.length;n++){var c=s[n];e[t].prototype[c]=r(c)}var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/2.5/td.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}}("Treasure",this);
    
var td = new Treasure({
  host: '<< host >>',
  writeKey: '<< writeKey >>',
  database: '<< DB >>',
  startInSignedMode: true
});
td.set('$global', 'td_global_id', 'td_global_id');
// 会員IDなどをセット
td.set('pageviews', { '<< カスタム変数 >>': "{{<< カスタムバリュー >>}}" });
td.trackPageview('pageviews');
</script>

Web Tracking for Single Page Application Sites Using Google Tag Manager

Was this helpful?