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

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

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

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

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

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

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

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

Chartbeat Load SDK and Send PV

<script type='text/javascript'>
    (function() {
        /** CONFIGURATION START **/
        var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});

        _sf_async_config.uid = << UID >>;
        _sf_async_config.domain = '<< サイトドメイン >>'; //
        _sf_async_config.flickerControl = false;
        _sf_async_config.useCanonical = false;
        _sf_async_config.useCanonicalDomain = true;
        _sf_async_config.sections = '<< セクション名 >>'; 
        _sf_async_config.authors = '<< 著者名 >>';
        /** CONFIGURATION END **/
        function loadChartbeat() {
            var e = document.createElement('script');
            var n = document.getElementsByTagName('script')[0];
            e.type = 'text/javascript';
            e.async = true;
            e.src = '//static.chartbeat.com/js/chartbeat.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
     })();
</script>
<script async src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

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

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

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

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

Chartbeatでは、Javascriptで動的に生成されたページの回遊時、「Virtual Page」という仕組みを利用してPVを送信する必要がある。

Chartbeat Send PV

<script>
var sendChartbeat = function (count){
	try {
		if (window.pSUPERFLY) {
			pSUPERFLY.virtualPage({
				sections:'<< セクション名 >>',
				authors:'<< 著者名 >>',
				path:'{{Page Path}}',
				title:'{{Page Title}}'
			});
		} else {
			if(count > 0){
				setTimeout(function () {
					sendChartbeat( count - 1 )
				}, 500)
			}
		}
	} catch (e) {
		//
	}
}
sendChartbeat(10)


</script>

まとめ

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

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

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

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

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

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

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