フォローする

JavaScript API でデザイン案の情報を取得する

この記事の対象

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

この記事の目的

  • Kaizen Platform で実施する U/I の A/B テスト情報 (ページに反映したデザイン案の情報) を、他の外部計測ツールなどに送信する方法の把握

概要

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

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

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

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 が実行されるタイミング

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

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

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

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

state

  • unmatched : どのエクスペリエンスにもマッチしなかった状態
  • matched : エクスペリエンスにマッチのみしている状態
  • decided : エクスペリエンスもデザイン案も確定した状態

data

名前 要約
experimentId エクスペリエンス ID '100102'
experimentType タイプ 'singlePageTest': UIエディター
'redirectTest': スプリット URL
roundId ラウンド ID '120'
roundType ラウンド種別 'initial': 準備中
'interim': 中間ラウンド中
'competition': 競争ラウンド中
roundStateId ラウンド状態 ID '135'
roundStateType ラウンド状態種別 'active': 実施中
'paused': 一時停止中
variationId 投稿案 ID '100150'
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); };
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。