高度なChartbeatタグ実装

概要

このページでは高度なChartbeatタグ実装の方法について解説します。

ログインユーザーや定期購読ユーザーに提供するコンテンツがある場合、そのログイン情報をChartbeatで計測することにより、ログイン状態別のコンテンツエンゲージメントを分析できるようになります。

無限スクロール（Infinite Scroll）やシングルページ・アプリケーション（Single Page Applicaion＝SPA）など、JavaScriptで動的にページを生成するサイトでの計測方法についても紹介します。

ログイン情報取得

ログイン情報を取得するには、1. _cbqグローバル変数を宣言、2.ユーザーのログイン状態を_cbqグローバル変数にPushする、という実装になります。

_cbqグローバル変数を以下のJavaScriptコードで宣言します。

var _cbq = window._cbq = (window._cbq || []);

次のJavaScriptコードのように、現在アクセスしているユーザーのログイン状態をKey-Valueペア形式で_cbqグローバル変数にPushします。

_cbq.push(['_acct', 'user_type']);

Keyの「_acct」は固定値、Valueの「user_type」は次の3つの規定値のいずれかをセットします。

一般的な実装としては、通常のChartbeatタグの _sf_async_config設定 の直後で_cbqグローバル変数を宣言し、_cbq.push()を実行することをお薦めします。例えば、以下のようなコードになります。

<script type='text/javascript'>
    (function() {
        var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
        /** CONFIGURATION START **/
        _sf_async_config.uid = #####; //CHANGE THIS
        _sf_async_config.domain = 'YourDomain.com'; //CHANGE THIS
        _sf_async_config.useCanonical = true;
        _sf_async_config.useCanonicalDomain = true;
        _sf_async_config.sections = ''; //CHANGE THIS TO YOUR SECTION NAME(s)
        _sf_async_config.authors = ''; //CHANGE THIS TO YOUR AUTHOR NAME(s)
        var _cbq = window._cbq = (window._cbq || []);
        _cbq.push(['_acct', 'paid']);
        /** 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>

動的生成ページの計測

無限スクロール（Infinite Scroll）やシングルページ・アプリケーション（Single Page Applicaion＝SPA）でサイトを構築している場合、追加で実装が必要です。

新たなコンテンツに切り替わるごとに、virtualPage関数を呼び出します。この関数はクリックやスワイプのイベント、コンテンツが変化するトリガーとなるピクセル数に紐づけて、計測情報を更新するよう特別に設計しています。virtualPage関数は次のような数行のコードで、コンテンツの切り替え時に実行してください。

pSUPERFLY.virtualPage({
      sections: "新たなセクション1, 新たなセクション2",
      authors: "新たな著者名",
      path: "/新たなパス",
      title: "新たなタイトル"
    }):

virtualPageでは、特に引数を指定しない場合、直前の計測に使用したセクション名や著者名を記録します。もし、新しいページでセクション名や著者名がない場合は、次のように空文字列を引数に指定してください。

authors:"",

コンテンツが切り替わったときは、その新しいコンテンツをユーザーが閲覧したことを反映するため、新たなパスとタイトルをvirtualPageの引数で渡してください。

重要なポイント

virtualPage関数は最初に外部流入したときには実行できません。初期コンテンツの表示時は通常のchartbeat.jsタグを実行し、動的に次のコンテンツを表示したときのみvirtualPage関数を実行してください。