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

カスタム イベントを使用してテストを有効化します。

一般に、動的なページや単一ページで構成されたウェブアプリは、初回のページ読み込みが完了した後、必要に応じて追加のデータを読み込みます。こうした処理に対応するため、Google オプティマイズにはアクティベーション(有効化)イベントと呼ばれる機能が備わっています。

この記事の内容:

仕組み

Google オプティマイズのアクティベーション イベントは、動的なページ(単一ページ アプリケーションの動的なサブセクションなど)をテストするための機能です。Google オプティマイズは、最新の状態のアクティベーションや、変更リストの再有効化と無効化をサポートしています。

Google オプティマイズのアクティベーション イベントを使用すると、サイトの dataLayer にプッシュしたイベントを対象にテストを実施できます。サイト全体で使用できるイベント名と、Google オプティマイズのその他のターゲティング ルールを使用して、特定の処理を指定します。

カスタム イベントに対するテストを有効化する

Google オプティマイズでは、イベントとターゲティング ルールを組み合わせることで、新しいテストを継続的に実施できます。テストのたびに、サイトのクライアント側コードを変更する必要はありません。

オプティマイズのテスト詳細ページの [ターゲット設定] タブ。

テストの詳細ページの [ターゲット設定] タブには、カスタム イベントに対するテストを有効化するための項目があります。

この場合、指定したイベント名の dataLayer イベントが発生するまではテストが実行されません。このイベントを発生させるには、ページが適切な状態になった時点で、そのページから次の javascript を実行します。

dataLayer.push({'event': '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);
   })
})
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。