アクティベーション イベント

動的なウェブサイトおよびシングルページ アプリでオプティマイズのテストを実施します。

オプティマイズでは、ウェブページの初期読み込み時でのみにデフォルトでコンテンツが変更されますが、動的なウェブサイト(AMP、React、Angular などのツールで構築されたもの)およびシングルページ アプリ(SPA)では、通常、最初のページ読み込みが完了した後にも追加のコンテンツが読み込まれます。こうした後から生じるウェブ コンテンツについては、アクティベーション イベントによって変更することができます。

アクティベーション イベントを使用してオプティマイズのテストを有効化するには、[ページの読み込み 編集] をクリックし、リストから [カスタム イベント時] または [継続的] を選択します。

アクティベーション イベント ボタン

アクティベーション イベントの種類

オプティマイズには、数種類のアクティベーション イベントが用意されています。

  • ページの読み込み時 – オプティマイズのテストはページの読み込み時にデフォルトで実施されるため、ほとんどの静的なウェブサイトで有用です。
  • 継続的 – 対象内容に一致するすべての新しい要素に対し、必要な変更が適用されます。
  • カスタム イベント時 – データレイヤー イベントごとに 1 回限り実行されるカスタム イベントです。

アクティベーション イベントに関するヒント

[カスタム イベント時] または [継続的] のいずれを選択した場合でも、オプティマイズのテストを実施するには、ページ ターゲティング ルールおよびオーディエンス ターゲティング ルールのすべてが満たされている必要があります。

オプション 1: 継続的な有効化

ほとんどの動的なサイトには、継続的な有効化が推奨されます。

[アクティベーション イベント] > [継続的] を選択すると、可能な限り自動的に変更リストが適用されます(例: 対象内容に一致する新しい要素が検出された時点)。

オプティマイズでは、最新のウェブブラウザに組み込まれている MutationObserver API を使用して、最初のページ読み込み時以降に追加されたコンテンツが継続的にモニタリングされます。変更が検出されると、そのページは再スキャンされ、新たに検出された対象内容に一致するすべての要素に変更リストが適用されます。

ヒント
 
オプティマイズにより変更されるのは、新たに検出された要素のインスタンスのみです。たとえば、class=”sale" 属性を指定して赤色で表示された商品の「購入」ボタンすべてが識別の対象であるとします。ユーザーがスクロールするにつれ、商品と各購入ボタンが次々と表示されていきますが、変更されるのはこれらのうち新しいボタンのみで、ページに読み込まれたすべてのボタンが変更されることはありません。要素のインスタンスが一度変更されると、変更リストの適用が完了とみなされ、それ以降変更されることはありません。ある要素の同じインスタンスを 2 回以上変更したい場合は、カスタム アクティベーションを使用してください。

継続的な有効化を設定する

オプティマイズのテストで継続的な有効化を使用する手順は、次のとおりです。

  1. テストを作成します(A/B テスト、多変量テスト、リダイレクト テスト、パーソナライズ)。
  2. テストの詳細ページで [設定] > [アクティベーション イベント] に移動します。
  3. [ページの読み込み 編集] をクリックします。
  4. プルダウン メニューから [評価] > [継続的] を選択します。
  5. [完了] をクリックします。

オプティマイズのアクティベーション イベントのスクリーンショット

注: オプティマイズのテストを実施するには、ページ ターゲティング ルールおよびオーディエンス ターゲティング ルールのすべてが true と評価されている必要があります。

自動無効化

テストに関するページ ターゲティング ルールまたはオーディエンス ターゲティング ルールが一致しない場合、テストは以前に適用されていた変更に自動的に戻ります。

注: JavaScript の変更は自動的に取り消すことができません。(無効化のコールバックを実装して戻り値として指定している場合を除く)。

オプション 2: カスタム イベント

カスタム イベントでは、オプティマイズのテストをより詳細に設定することができ、ページの準備が整った時点でイベントを発生させることが可能です。カスタム イベントに一意の名前を付けると、データレイヤー イベントをサイト全体に実装して、オプティマイズのテストを実施することができます。 

カスタム イベントを使用するには、データレイヤー イベントを発生させ、新たに検出されたすべての要素に変更リストを適用するように、オプティマイズのテストを実施します。カスタム イベントは、データレイヤー イベントごとに 1 回限り実行されます。イベントを継続的に実行する場合は、[継続的] を使用してください。

カスタム イベントを使用してオプティマイズのテストを有効化する手順は、次のとおりです。

  1. ウェブサイトのデータレイヤーからカスタム イベントを作成します。
  2. 新しいデータレイヤー変数を作成します。
  3. JavaScript でイベントを有効にします。

カスタム イベントを作成する

まず、ウェブサイトのデータレイヤーからカスタム イベントを作成します。

  1. [アクティベーション イベント] の横にある [ページの読み込み編集] をクリックします。
  2. プルダウン メニューから [評価] > [カスタム イベント時] を選択します。
  3. データレイヤーから [イベント名](例: optimize.activate)を入力します。
  4. [完了] をクリックします。

カスタム イベントを作成した後、通常どおりページ ターゲティング ルールおよびオーディエンス ターゲティング ルールをオプティマイズで設定し、再有効化または無効化が必要かどうかを判断します。

新しいデータレイヤー変数を作成する

アクティベーション イベントを作成したら、データレイヤー変数を作成する必要があります。

  1. [データレイヤー変数] > [新規作成] の順にクリックします。
  2. 読み取りに使用するデータレイヤー変数の名前を入力します。
  3. 変数に名前を付けます。
  4. [変数を作成] をクリックします。

オプティマイズで新しいデータレイヤー変数を作成する

JavaScript でイベントを有効化する

上記のステップが完了した後、オプティマイズのテストを有効化するために、データレイヤー イベント(上記で入力したイベント名を使用)を発生させる必要があります。対象とするウェブページが望ましい状態まで読み込まれた時点で、以下の JavaScript でオプティマイズのテストを有効にします。

dataLayer.push({'event': 'optimize.activate'});

optimize.activate イベントが発生すると、その他のターゲティング条件が評価され、すべての条件が true の場合のみテストが有効状態になります(変更リストが適用されます)。

複数の AJAX 呼び出しがあり、それらすべてから制御が戻らないとページをテストできないとします。その場合、各 AJAX 呼び出しの後でイベントを発生させ、特定の変数値をチェックする JavaScript ターゲティング ルールを追加します。追加した JavaScript ターゲティング ルールが true と評価され、AJAX 呼び出しから戻った時点ではじめてテストが実行されます。

変更リストを再有効化する

すべてのターゲティング条件が満たされていれば、ターゲット イベントが複数回発生するようにテストを設定できます。

ターゲット イベントを複数回発生させる場合、その他のターゲティング条件がすべて満たされると、変更リストが再有効化されます。この場合、Google オプティマイズは該当するページをチェックし、新しい要素が読み込まれていないか、それらを変更リストに従って更新する必要があるかどうかを確認します。その後、新しく読み込まれた要素を適切に更新します。既存の要素は変更されません。

サイトのページに動的なショッピング カートを追加し、ユーザーが商品をクリックすると、その商品がカートに追加されるようにしました。ここで、次のようなテストを実施するとします。

  • 商品がカートに追加されるたびに、画像を挿入する
  • ユーザーが商品を 1 つ以上カートに追加したとき、ページの最上部に特典メッセージを表示する

ユーザーがカートに商品を追加したり、カートから商品を削除したりするたびに、このページでアクティベーション イベント(shoppingCartChanged)が発生します。このテストでは、ページの状態と適用された変更の両方が使用されます。

この例の場合、「カートに商品が入っているかどうか」がターゲティング条件となります。

ユーザーが最初に商品を追加した時点で変更リストが有効になり、次の処理が実行されます。

  • カート内の 1 つの商品に画像を追加する
  • ページの最上部に特典メッセージを追加する

ユーザーがさらに別の商品をカートに入れると、変更リストが再有効化され、次の処理が実行されます。

  • カート内の 2 つ目の商品に画像を追加する

ユーザーが 2 つ目の商品をカートに入れたときは、新たな特典メッセージがページに追加されません。また、最初にカートに入れた商品にも新しい画像が追加されません。変わったのは、新しい商品が追加されたことだけです。テストの変更リストが最初に適用されたとき、この商品は存在していませんでした。

変更リストを無効化する

アクティベーション イベントを使用して、テストの変更リストを無効にすることができます。たとえば、上記のショッピング カートの例で、テストのターゲティング条件を満たさないユーザーには特典コードを表示したくありません。また、多くの単一ページ ウェブアプリは、サイト内の複数のセクションでコンポーネントを共有していますが、テストの変更は 1 つのセクションにのみ適用する必要があります。

テストが有効化されてイベントが発生し、ターゲティング条件を満たさなくなった場合、そのテストで前に適用した変更が取り消されます。この場合、該当するページは、テストが有効化される前の状態(変更リストが適用される前の状態)に戻ります。

上記の例では、ユーザーが最後の 1 つのアイテムをカートから削除すると、特典メッセージも削除されます。

JavaScript の変更は自動的に取り消すことができません。(無効化のコールバックを実装して戻り値として指定している場合を除く)。

シングルページ アプリケーションと仮想ページ

ターゲティング条件を使用して、単一ページ型ウェブアプリの仮想ページを指定できます。使用する条件はサイトの構成によって異なりますが、ほとんどの単一ページ型ウェブアプリでは URL フラグメントを使用するのが最も簡単です。

URL フラグメントに仮想ページを割り当てないウェブアプリもあります。たとえば、一部のサイトでは、A/B テストに最適なニュースレター登録のインタースティシャルを使用しています。これらのインタースティシャルやその他の類似要素をテストするには、オプティマイズ テストに新しいターゲティング条件を追加します。JavaScript 変数ターゲティングを使用して、特定のコンテンツまたは要素が存在するかどうかをチェックできます。

同じコンポーネントを複数のページで共有する単一ページ アプリケーションでは、CSS ルールを使用してコンポーネントのスタイルを変更します。この場合、無効化機能が非常に役に立ちます。アプリが別の仮想ページへ遷移すると、仮想ページの <STYLE> タグが <HEAD> から除去されます。

単一ページ アプリケーションでのアクティベーション

変更リストを再有効化する際、オプティマイズ サーバーに接続して新たにリクエストする必要はありません。アクティベーション イベントを使用すれば、ページ上のいずれかの要素が変更された後でイベントを発生させることができます。

たとえば、7 行のコードで記述されたアクティベーション イベントを AngularJS アプリに追加し、ダイジェスト ループのたびにイベントを発生させることができます。

以下は、そのコード例です。

myapp.run(function($rootScope, $timeout) {
   $rootScope.$watch(function(){
     $timeout(function(){
       dataLayer.push({'event': 'optimize.activate'});
     },0,false);
   })
})
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。