JavaScript API でデザイン案の情報を取得する – Kaizen Platform(サイト改善) ヘルプセンター

概要

KaizenPlatform提供のJavaScript APIを利用することで、エクスペリエンスの情報や、ページに反映したデザイン案の情報を取得する事ができます。

他社の計測ツール等の送信ログに、KaizenPlatformのデータを付与したい
公式では用意されていないツール(ヒートマップツールなど)と連携したい

といった内容に対応することができます。

このページでは、APIの活用方法や仕様について記載します。

なお、

サイト運営担当のエンジニア
外部計測ツールの導入・管理の担当者

といった、ある程度計測ツールやJavaScriptにご理解のある方の閲覧・実装を推奨しております。

JavaScript APIで、ページに反映したデザイン案の情報を取得する

サンプルコード

<script>
var kzs = window.kzs || function() { var _ = window.kzs; return (_.q || (_.q = [])).push(arguments); };

kzs("getVariation", function(data, state) {
  if(state == "decided") {  // A/B テストのデザイン案反映が実行される場合、という意味の分岐
    console.log(data.experimentId);  // エクスペリエンスの ID
    console.log(data.variationId);  // 表示したデザイン案の ID

    // 上記変数を使って、外部ツール等の仕様に沿って情報を渡してください。以下例:
    someTool.sendEvent({
      event: "kaizen test view",
      eid: data.experimentId, 
      vid: data.variationId
    });
 }
});
</script>

API Syntax

kzs("getVariation", function(data, state){
  // ここに目的に沿った処理を追加
});

第 2 引数の callback function が実行されるタイミング

下記にKaizenPlatformのJavaScriptの処理シーケンスを示します。
赤文字で示すタイミングで第 2 引数に渡したfunctionが実行されます。

original doc (ヘルプ記事運営担当用)

第 2 引数の callback function で取得できる情報

上記 API の第 2 引数に指定するfunctionにて取得できる情報は以下です。

state

unmatched : どのエクスペリエンスにもマッチしなかった状態
matched : エクスペリエンスにマッチのみしている状態

テスト対象: ページ修正の場合

decided : エクスペリエンスもデザイン案も確定した状態

テスト対象: 画像差替え or ポップアップの場合

triggered : エクスペリエンスもデザイン案も確定した状態

data

名前	要約	例
experimentId	エクスペリエンス ID	'100102'
experimentType	テスト対象	'singlePageTest': ページ修正 (UI エディター) 'redirectTest':ページ修正 (スプリット URL) 'instantOffer': 画像差替え or ポップアップ
roundId	ラウンド ID	'120'
roundType	ラウンド種別	'initial': 準備中 'interim': 中間ラウンド中 'competition': 競争ラウンド中
roundStateId	ラウンド状態 ID	'135'
roundStateType	ラウンド状態種別	'active': 実施中 'paused': 一時停止中
variationId	投稿案 ID	'100150': デザイン案またはオリジナル案の場合 '-1': バケット対象外の場合 ※ GA / AA 連携機能で送られる値とは仕様が異なるのでご注意ください。同機能の値仕様はこちら
gaSlot	エクスペリエンス設定画面で事前に設定した Google アナリティクスカスタム変数のキー番号	1
gaCTrack	エクスペリエンス設定画面で事前に設定した Google アナリティクスカスタムトラッカー名	t2
scVars	エクスペリエンス設定画面で事前に設定した Adobe Analytics 変数名	eVar72, prop44
uaCDim	エクスペリエンス設定画面で事前に設定した Googleユニバーサルアナリティクスカスタムディメンションのインデックス	1
uaCTrack	エクスペリエンス設定画面で事前に設定した Googleユニバーサルアナリティクスカスタムトラッカー名	t2

該当する投稿案がない場合、全ての値が undefined のオブジェクトがコールバックされます。

API 実行コードの設置箇所について

よくご質問頂く懸念点

GTM 等のタグマネージャーにて Kaizen タグを配信している場合、どこに API 実行コードを設置すれば良いでしょうか？
タグマネージャーにて、API 実行コードを単独のタグとして配信しても大丈夫でしょうか？
Kaizen タグは対象ページ HTML に直設置しているのですが、API 実行コードのみタグマネージャーで配信しても問題ありませんか？

回答

サンプルコードの 1 行目にも記述している下記コードを含めて頂く事で、タグマネージャーでの単独タグ配信や HTML ページの任意箇所への設置など、任意の形で配信して構いません。期待通り動作します。

var kzs = window.kzs || function() { var _ = window.kzs; return (_.q || (_.q = [])).push(arguments); };

概要