Chartbeatを実行するための実装ガイド
Chartbeatタグ実装
概要
お客様サイトのHTMLに、ChartbeatのJavaScriptタグ（chartbeat.jsコード）を実装することで、Chartbeatでサイトを計測できるようにします。このJavaScriptタグは定期的にビーコンとしてユーザの行動データをChartbeatのサーバに送信します。そのデータを集計分析することでエンゲージメントデータをChartbeatで分析します。
chartbeat.jsコードはCDN（ontent distribution network）で配信して非同期に動作するため、お客様サイトの読み込みを阻害することはありません。
コード
下記のコードを <head> タグ内に追加してください。HTMLにcanonicalを記述する場合、そのcanonicalはChartbeatタグの手前に記述してください。もし、HTMLの要素からsection（セクション）やauthor（著者）変数、ログイン状態を取得する必要があるときは、それらの要素の後の <body> タグ内に追加することもできます。
<script type='text/javascript'>
(function() {
/** CONFIGURATION START **/
var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
_sf_async_config.uid = #####; //お客様のChartbeatアカウントID
_sf_async_config.domain = 'YourDomain.com'; //サイトドメイン
_sf_async_config.flickerControl = false;
_sf_async_config.useCanonical = true;
_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>
UIDとサブドメイン
UIDの設定
下記コードのUIDの値に、お客様のChartbeatアカウントIDを設定してください。
_sf_async_config.uid = UID;
Chartbeatのコードは、下記URLからも取得できます。
https://chartbeat.com/publishing/setup/code
ドメインの設定
下記コードのdomainの値に、お客様のWebサイトのドメイン名を設定してください。
_sf_async_config.domain = 'domain.com';
モバイルサイト・サブドメインのトラッキング
Webサイト内で、モバイル向けやカテゴリ別などで複数の異なるサブドメインを使用されていて、同じダッシュボード内でそれらの分析を行う場合は、下記の.domainの値にデスクトップ向けの同じドメイン名を各サブドメインのページのHTMLに設定してください。
_sf_async_config.domain = 'デスクトップ用のドメイン名';
これらのサブドメインごとに別のダッシュボードで複数のサブドメインを個別に分析したい場合は、ChartbeatのSettingページから”add site”を選択して、ダッシュボードの追加設定を行ってください。
CanonicalURLとドメインの設定
モバイルデバイス向けのコンテンツや、その他の理由で同じ記事に対して異なるURLパス構造を使用されている場合は、下記のuseCanonicalの値をtrueに設定することで、CanonicalURLの値を参照して異なるURLの記事を同じ記事としてダッシュボード上で分析することができます。
_sf_async_config.useCanonical = true;
モバイルデバイス向けのコンテンツや、その他の理由で同じ記事に対して異なるサブドメイン名を使用されている場合は、下記のuseCanonicalDomainの値をtrueに設定することで、CanonicalURLの値のドメイン名を参照して異なるドメイン名の記事を同じ記事としてダッシュボード上で分析することができます。
sf_async_config.useCanonicalDomain = true;
カスタムのパス指定
Canonical URLを使用せずにパスの指定を行いたい場合や、モバイルのサイトやアプリで同じ記事に対して異なるパスを使用されている場合は、下記の例を参照して.pathの変数を設定してください。モバイルの場合は、ここではデスクトップのページのパスと一致するパスを設定してください。
パスは常に”/“で始まるものを使用し、CMSなどで自動生成されるパスを指定する場合は、下記の例のように個別の設定値を設定してください。
_sf_async_config.path = "/directory/path";
_sf_async_config.path = cms.path.variable;
_sf_async_config.path = window.location.pathname;
カスタムのページタイトル
Chartbeatは、通常 <title> タグで設定されたページタイトルを認識します。
Chartbeatでの分析データ上でカスタムのページタイトル名を使用したい場合は、.titleの変数を使用してページタイトル名をこの値で上書きすることができます。これは、ページ名の最初にWebサイト名を使用していたり、同じようなページ名を複数のページにまたがって使用している場合に活用できます。
.titleの値は、下記のようにマニュアルで設定するか、CMSからタイトルを取得することができます。
_sf_async_config.title = "Story Title";
_sf_async_config.title = cms.title.variable;
セクション名と著者名
Chartbeatでは、セクション名（.sections）や著者名（authors）でフィルタリングをかけて分析を行うことができます。ここに複数のセクション名や著者名を設定したい場合は、それぞれの値をカンマで区切って設定してください。
_sf_async_config.sections = "セクション名";
_sf_async_config.authors = "著者名";
AMP（Accelerated Mobile Page）用コード
Accelerated Mobile Pages（AMP）プロジェクトは、サイトのモバイルWebページの読み込み時間を短縮することを目的として開発されました。モバイルユーザーは、ページのロード時間が遅いと感じると、即座にサイトを離脱する傾向があります。
AMP対応のページを作成することで、ユーザー体験がを向上させ、読者層の確保につなげましょう。
Chartbeatが提供するAMP用コードを実装すると、ダッシュボードの左側のサイトエクスペリエンスセクションの下に新しいフィールドが表示されます。これにより、AMP技術を使って作成したコンテンツに関連する、コンカレンツの数がカウントされるようになります。
まず、AMPページの <head> タグ内に以下のタグを記述してください。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
続いて <body> タグ内に、以下のような <amp-analytics> タグを記述してください。
<amp-analytics type="chartbeat">
<script type="application/json">
{
"vars": {
"uid": "12345",
"domain": "yoursite.com",
"sections": "section 1, section 2"
// Author, etc.
}
}
</script>
</amp-analytics>
AMPページ用Chartbeatコードに含めることができる変数は下記のとおりです。
uid (Chartbeat Account ID)
domain
sections
authors
title
contenttype
canonicalpath
制約事項
AMP技術の制約上、「VISITOR FREQUENCY」は計測できず、AMPアクセスのすべてが「Unclassified」に振り分けられます。また、Recirculationは「0%」となり、スクロール率も取得できません。