LoginSignup
1

More than 3 years have passed since last update.

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

Posted at

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

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

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

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

image.png

「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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1