SPA 사이트에서 TreasureData에 PV를 보내는 방법.

일반적으로 GTM의 "pageview"이벤트를 트리거하고 TreasureData에 PV를 보냅니다.

미디어 사이트 "WWD JAPAN.com (htps //w w. ㅋㅋㅋㅋㅋㅋㅋ 코m/)"는 SPA (단일 페이지 애플리케이션) 때문에 일반 GTM의 "pageview"에서는 PV를 TreasureData에 정확하게 전송할 수 없었다.

이 설정으로 잘 작동했습니다.

GTM, SPA에서 TreasureData에 대한 PV 전송 설정은 다음과 같습니다.

"loadPage (datalayer의 이벤트 push)"

SPA 페이지의 초기 로드 완료 트리거(SPA에서는 처음 1회만 서버로부터 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