ウィジェットのトラッキング

🚧

A/Bテストの組み込みのドキュメントを参照してください

組み込みに関する全体像を把握するためには、A/Bテストの組み込みのドキュメントを参照することを推奨します。A/Bテストの組み込みのドキュメントでは、トラッキング、リコメンデーションの表示、A/Bテスト用のスライス、callbackの上書きに関するすべてのコードについて網羅しています。事前にそれらのコードに関する説明をお読みいただくと、このドキュメントでトラッキングがどのように動作するか、より深く理解できるようになります。

🚧

トラッキングの重要性

トラッキングは、下記の2つの理由から有効に活用していただけます:

  • トラッキングは、ウィジェットのCTRなどのような数値の分析を行います。また、Google Analyticsのようなサードパーティのツールを使用してリコメンデーションを分析することができます。
  • これは、アルゴリズムの精度を向上させ、リコメンデーションの質を高めるために不可欠な要素です。

LiftIgniterを適切に使うには、本番環境にウィジェットを適用する際に、トラッキング機能を有効化することが大切です。

この機能の技術的な仕様については、$p("track") のドキュメントを参照してください。

1. トラッキングウィジェット

SDKのトラック関数を使用して、ウィジェットのトラックを行うことができます。トラック関数を呼び出す前に、このエレメントが準備されている必要があるため、コードスニペットに示したとおり、トラック関数は、registerコマンドのcallbackの中で呼び出す必要があります。

📘

関数の引数について

  • elements: トラックしたいDOMエレメントの配列。 それぞれのトラックするエレメントは、特定のリコメンデーションに対するDOMエレメント全体である必要があります。前項に説明したMustacheテンプレートにおいては、エレメントは‘#li-recommendation-unit > div.recommended_item’のセレクタに一致します。
  • name: トラックするページ領域の名前
  • source: このインプレッションの間に稼働しているアルゴリズムの名前。LiftIgniterの場合は"LI"を使用してください。
  • _debug: テスト時に使用するオプション。この値を"true"に設定すると、トラックしているエレメントに対する可視(Visible)やクリックのイベントに対するアラートを送ります。 このフィールドは本番環境への適用前に無効にしてください。
$p('track', {
  	// LiftIgniterのリコメンデーションをトラックする
	elements: document.querySelectorAll('#li-recommendation-unit > div.recommended_item'), // 表示されたコンテンツに使用しているセレクタに変更してください。
    name: 'your widget name',
    source: 'LI', // ベーススライスをトラックしている場合は"base"
    _debug : true  // オプション: トラックしているエレメントに対する可視(Visible)やクリックのイベントに対するアラートを送ります。このフィールドは本番環境への適用前に無効にしてください。
});
// $p('register')を含めた例

// 異なるウィジェットに対するRegisterコール
$p('register', {
	max: 6, // 表示するアイテムの数
	widget: 'bottom-widget',
	opts : {},
	callback: function(resp) {
		var el = document.querySelector('#li-bottom-recommendation-unit');
		var template = document.querySelector('#li-bottom-recommendation-template').innerHTML;
		el.innerHTML = $p('render', template, resp);
        console.log("Debug was set to true; disable it in production!");
		$p('track', {
			elements: document.querySelectorAll('#li-bottom-recommendation-unit > div.recommended_item'), 
            name: 'bottom-widget',
			source: 'LI',
			opts: {},
			_debug : true
		});
    }
});

[elements]フィールドは、リコメンデーションを含むエレメントのリストです。トラッキング機能は、指定したDOMエレメントの中のすべてのアンカーを特定して、ユーザがどんなリコメンデーションを閲覧したかを知らせるリスナーを添付し、リコメンデーションへのクリックごとにフィードバックを取得します。

sourceは、リコメンデーションを作成する際に使用したアルゴリズムの名前です。A/Bテストにおいては、LiftIgniterには"LI"、元のアルゴリズムに対しては"base"を使用します。これ以外の名前もログに記録しますが、その名前を事前に登録しないと、ボードへの表示は自動で行われません。

2. 正常にイベントが起動されているかのテスト

  • 表示されたアイテムが最初にviewpoint(可視領域)に入った際に、"visible for default-widget:LI"のようなアラートが表示されます。これは、イベントが起動され、アイテムがビューポイントに入ったことを、LiftIgniterのシステムに通知したことを意味します。
  • リコメンデーションのアイテムのいずれかをクリックすると、"click for default-widget:LI"のようなアラートが表示されます。これは、イベントが起動され、ユーザがリコメンデーションをクリックしたことを、LiftIgniterのシステムに通知したことを意味します。デバッグの作業を簡易化するために、右クリックを使用して間違えてページから離脱しないようにすることを推奨します。
  • Chrome Developer ToolsのNetwork Panelを使用して、petametrics.comをフィルタリングすることで、LiftIgniterに送信されるイベントを確認することができます。これは、ウィジェット特有のイベントと、死活監視のイベントを含みます。詳細については、ウィジェットイベントのページのデバッグに関する説明を参照してください。

❗️

トラブルシューティング

  • クリックに対するアラートを確認できても、可視(Visible)に対するアラートが確認できない場合は、閲覧に対するアラートが、他のコンソールメッセージによって停止されている可能性があります。コンソールのテストを行うには、処理結果のregisterとFetchを行った後のcallbackの外にトラッキングのロジックを置いてください。
  • リコメンデーションをクリックした後に、クリックおよび可視(Visible)のアラートを受信しても、URLの後にタグが追加されていない場合は、お客様のWebサイトが自動的にURLを更新したり、タグを外したりしている可能性があります。これは、トラッキングやアルゴリズムへの影響はありませんが、いくつかの分析の機能が処理されなくなるため、サードパーティーの分析ツールの数値に問題をきたす場合があります。
  • 特定のエレメント上でのtrack関数は、最大でも一回だけコールを行うようにしてください。複数のコールを行うと、一件のクリックやイベントに対して、複数のカウトを行ってしまう可能性があります。

🚧

本番環境にデプロイする前に、_debugを無効にしてください。

_debugを外す: 本番環境にデプロイする前に、"true"およびその他のconsole.logの宣言を外してください。