SPAのサイトでTreasureDataにPVを送信する方法。

通常は、GTMの「pageview」イベントをトリガーにして、TreasureDataにPVを送信する。

メディアサイト「WWD JAPAN.com （ https://www.wwdjapan.com/ ） 」は、SPA（シングルページアプリケーション）のため、通常のGTMの「pageview」では、PVをTreasureDataに正確に送信できなかった。

この設定でうまくいった。

GTM、SPAでのTreasureDataへのPV送信設定は、以下の通り

「loadPage （datalayerでのイベントpush） 」

SPAページの初期ロード完了トリガー（SPAでは初回1回のみサーバーからHTMLを受け取る。 WWD JAPAN.comでは、SPAでのHTML生成完了後、タイトルなどがHTMLで準備できたタイミングでトリガーしている。）

初回のロード時のみ、TreasureData SDKのロードと、PV送信を行う。

Treasure Data Load SDK and Send PV

<script>
!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","set","trackEvent","trackPageview","trackClicks","ready","fetchGlobalID","fetchUserSegments"],a=0;a<s.length;a++){var c=s[a];e[t].prototype[c]=r(c)}var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/2.1/td.min.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)}}("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>

「change （datalayerでのイベントpush） 」

SPAでのページ遷移は、サーバーを経由しないため、GTMのpageviewイベントはトリガーされない。

SPAでは、ページ遷移は、URLの変化を元に、サーバーのAPIをコールして、情報を取得して、ページを再描画している。そのため、URL変更され、ページが再描画されタイトルなどがHTMLで準備できたタイミングでトリガーしている。

すでに、TreasureData SDKのロードは完了しているため、PV送信のみを行う。

Treasure Data Send PV

<script>
  td.set('$global', 'td_global_id', 'td_global_id');
  // 会員IDなどをセット
  td.set('pageviews', { '<< カスタム変数 >>': "{{<< カスタムバリュー >>}}" });
  td.trackPageview('pageviews');
</script>

まとめ

WWD JAPAN.comは、SPA構成になっている。

タイトル、本文などが空のHTMLをロードして、javascriptからAPIを呼んでページの情報を取得してHTMLを作成する。

SSRで、タイトルなどが入ったHTMLを返すようにしているが、たまに、SSRが失敗してタイトルが空のHTMLが返却される場合がある。

GTMのall pageviewのタイミングだと、うまくタイトルが送信できないことがあるので、HTMLが完成したタイミングで、loadPageイベントを発行して、そのloadPageをトリガーにしてTreasure Data Load SDK and Send PVタグを発行

一度ページをロードすると、サイト内の回遊時、サーバーからHTMLをダウンロードしない。
URLが切り替わるタイミングでchangePageイベントを発行して、そのchangePageをトリガーにしてTreasure Data Send PVタグを発行

最初のページのロードは、SDKのロードと、PV送信
Treasure Data Load SDK and Send PV

次のページからは、PV送信のみ
Treasure Data Send PV