Optimize JavaScript API では、独自の JavaScript コードを使用し、コールバック関数を使ってパターンに変更を加えることができます。また、これらのコード変更と、オプティマイズのビジュアル エディタで行った編集内容を組み合わせることも可能です。これは、変更が適用されたタイミングで追加のアクションを実行するコードを開発する必要がある場合に特に便利です。また、デバッグ全般にも非常に役立ちます。
この記事の内容:実装コールバックの登録
オプティマイズのクライアント API を使うと、自分のサイトで提供される JavaScript コードに基づいてテストの実装をご自身で入力し、オプティマイズ エディタの使用を完全に省略することができます。ただし、ページがユーザーに表示されるようになった後で JavaScript が呼び出される場合があるため、フリッカー防止メカニズムをご自身で実装する必要があります。
注意を要する重要な要素として、オプティマイズが非同期で読み込まれるという点が挙げられます。このため、テストが含まれているかどうかを同期コードから確認することはできず、正常に動作する場合があっても、実行順序は保証されません。
代わりに、実装をコールバックとして入力する必要があります。
// Should be used in scripts placed after the Optimize or GTM
// installation or the initialization of the dataLayer variable.
// Not required if the Google Analytics gtag implementation is used.
function gtag() {dataLayer.push(arguments)}
function implementExperimentA(value) {
if (value == '0') {
// Provide code for visitors in the original.
} else if (value == '1') {
// Provide code for visitors in first variant.
} else if (value == '2') {
// Provide code for visitors in section variant.
}
...
}
gtag('event', 'optimize.callback', {
name: '<experiment_id_A>',
callback: implementExperimentA
});
テストの実装コールバックは、特定の識別子（テストの詳細ページで確認可能）で登録できます。
注意を要するもう一つの重要な要素として、完全な DOM ツリーが利用可能になる前にコールバックが呼び出される場合があるという点が挙げられます。このため、ページの要素を変更する必要がある場合は、ページの状態を確認し、実装を登録して、DOMContentLoaded イベントのイベント ハンドラとして後で実行する必要があります（ページに jQuery が使用されている場合は、jQuery.ready などを使用）。次の例をご覧ください。
function implementExperimentA(value) {
...
else if (value == '2') {
// Assuming that you have jQuery in your page
$( document ).ready(function() {
$('#my_element').text('Hello from variant 2');
})
}
...
}
MVT テスト
MVT テストの場合、テストから提供される値には、ダッシュ（「-」）で区切られたすべてのセクション パターンのインデックスが含まれます。
function implementExperimentA(value) {
var sections = value.split("-");
if (sections[0] == '0') {
// Provide code for first section for visitors in the original.
} else if (sections[0] == '1') {
// Provide code for first section for visitors in first variant.
}
...
if (sections[1] == '0') {
// Provide code for second section for visitors in the original.
} else if (sections[1] == '1') {
// Provide code for second section for visitors in first variant.
}
}
複数のテストの処理
複数のテストを実装する単一のコールバックを入力することもできます。
function implementManyExperiments(value, name) {
if (name == '<experiment_id_A>') {
// Provide implementation for experiment A
if (value == '0') {
// Provide code for visitors in the original.
} else if (value == '1') {
// Provide code for visitors in first variant.
...
} else if (name == '<experiment_id_B>') {
// Provide implementation for experiment B
...
}
gtag('event', 'optimize.callback', {
callback: implementManyExperiments
});
デバッグ リソース
Optimize JavaScript API では、「get」メソッドを含む google_optimize グローバル変数も利用できます。この変数は、デバッグを行う際に役立ちます。たとえば、特定のページ訪問でテストが有効になっているかどうかは、次のような場合でも確認できます。
- 変更が表示されていない（例: 現在非表示になっているコンテンツに変更が適用されている）。
- 問題がある（例: ターゲット対象の要素がページ上に存在しなくなった）。
- 一部のパターンに変更がない。
- ユーザーが元のパターンに割り当てられている。
テストをデバッグするには、オプティマイズのテスト詳細ページでテスト ID を取得してから、Chrome DevTools > [Console] で次のように入力して、このテストに割り当てられているパターンを確認します。
console.log(google_optimize && google_optimize.get('<experiment_id_A>'));
google_optimize が定義されていない可能性があります。DevTools コンソールの結果が「未定義」の場合、ページでテストが有効になっていません。考えられる原因は次のとおりです。
- ターゲティング ルールに一致しない。
- 割り当てられたパターンの比重では、ユーザーがいなかった。
- ブラウザの状態（例: Google アナリティクスのサイト アクティビティをオプトアウトしている）が原因でユーザーが除外された。
- ページ非表示スニペットがインストールされている場合: ユーザーのネットワーク速度が async-hide タイムアウトよりも遅い。詳細
- 別のブラウザタブでビジュアル エディタが開いている。テストは編集モードのときは実行されません。詳細
- 別のテストのパターンをプレビューしている。プレビュー モードで実施できるテストは 1 つのみです。
- テストでカスタム アクティベーションが使用されているが、まだ有効にされていない。
- テストでカスタム アクティベーションが使用されており、有効にされたが、後で無効にされた（ターゲティング ルールが一致しなくなった）。
DevTools コンソールの結果の説明:
- 0 - 有効なテストが実行され、ユーザーがパターン 0（元のパターン）に割り当てられました。
- 1 – 有効なテストが実行され、ユーザーがパターン 1 に割り当てられました。
- 2 – 有効なテストが実行され、ユーザーがパターン 3 に割り当てられました。
- 以下同様
現在有効なテストをすべて表示するには、[DevTools] > [Console] で次のように入力します。
gtag('event', 'optimize.callback', {
callback: (value, name) => console.log(
'Experiment with ID: ' + name + ' is on variant: ' + value)
});
ページ初期化の遅延
テストの値を使用するために、ページの初期化中に重要な機能の発動を遅らせることが必要になる場合もあります。たとえば、追加のデータを読み込む Ajax リクエストがある場合や、さまざまなパターン用のリクエストに異なる URL パスを使用する場合などです。
そのような場合は、ページ非表示スニペットを利用して、この重要な機能の発動をできるだけ遅らせ（ページ非表示のタイムアウトに基づく）、どのような状況でも呼び出されるようにすることをおすすめします。さらに、テストに参加していないユーザー（ターゲティング ルールと一致しないか、テストにトラフィック全体が含まれていない場合）に対して、この機能が初期化されるようにする必要があります。
これを行うには、ページ非表示スニペットをページに含め、非表示を終了させるコールバックをオーバーライドします。
function delayedInitialization() {
var value = google_optimize &&
google_optimize.get('<experiment_id_A>');
if (value == '0') {
// Provide code for visitors in the original.
} else if (value == '1') {
// Provide code for visitors in first variant.
...
} else if (value == undefined) {
// Provide code for visitors not in the experiment
}
}
var hideEnd = dataLayer.hide.end;
if (hideEnd) {
dataLayer.hide.end = function() {
delayedInitialization();
hideEnd();
}
} else {
delayedInitialization();
}
上記の例のように、google_optimize というグローバル ウィンドウ変数があり、これを使用することでテストの値を取得できます。ただし、オプティマイズのコンテナが読み込まれた後で初めて定義されるため、これを直接コード内で使いたいという場合でも、同期スクリプトには使用できないことに注意が必要です。
当然ながら、google_optimize 変数は、（ネットワークに関する問題などの理由で）オプティマイズ コンテナのスクリプトの読み込みが失敗すると定義されないことがあります。また、上記のコードでは、カスタム アクティベーションを使ったテストの場合、有効化と値の提供までに時間がかかるため、未定義のテスト値が返されることに注意が必要です。
アクティベーション イベント
テストでアクティベーション イベントを使うと、パターンが再度有効または無効になるたびに、コールバックが複数回呼び出される場合があります。パターンが無効になると、テスト値は未定義になります。
function implementExperimentA(value) {
if (value == '0') {
// Original was activated or re-activated
// (may be called multiple times).
} else if (value == '1') {
// First variant was activated or re-activated
// (may be called multiple times).
...
} else if (value == undefined) {
// Experiment was de-activated
// (may be called multiple times).
}
想定どおり、コールバックは同じ値（再有効化時）または未定義で複数回呼び出されます。
value -> 1 1 1 undefined 1 undefined 1 1 ...
コールバックの登録解除
コールバックの呼び出しを停止し、テスト値の処理から登録を解除することが必要になる場合があります。アクティベーション イベントを使っているテストがあり、ページや単一ページ アプリケーションが想定とは異なる新しい状態に移行しつつあって、テスト値を処理できない場合などがこれに該当します。
コールバックを登録解除し、クリーンアップするには、以下のようなコードを使います。
gtag('event', 'optimize.callback', {
name: '<experiment_id_A>',
callback: implementExperimentA,
remove: true
});
複数のコールバックを使っている場合は、以下のようなコードで登録解除し、クリーンアップします。
gtag('event', 'optimize.callback', {
callback: implementManyExperiments,
remove: true
});
関連資料
- オプティマイズのアンチフリッカー スニペットの使用方法 – オプティマイズのデベロッパー向けサイト
- サーバーサイド テスト – オプティマイズのデベロッパー向けサイト
- AMP テスト – オプティマイズのデベロッパー向けサイト