オプティマイズのランタイム中の動作

サイト訪問者のブラウザにおける動作と、変更がどのように適用されるかを説明します。

ユーザーがサイトにアクセスするたびに、以下で説明されるオプティマイズの 3 つのステップが実行されます。

この記事の内容:

同期ダウンロードと非同期ダウンロード

同期インストールは最も簡単な方法であり、高いパフォーマンスが確保されますが、オプティマイズは非同期で動作するため、サイトの通常の動作に影響しません。オプティマイズ コンテナはページの他のスクリプトやリソースと並行してダウンロードされ、それらをブロックすることはありません。先にダウンロードされた他のスクリプトは遅滞なく実行されます。

ただし、オプティマイズはページのコンテンツを変更することが多いため、優先順位に注意する必要があります。

オプティマイズのコードはできるだけ早く実行されるよう <HEAD> の前に置き、ページの他のスクリプトやライブラリにブロックされないようにすることをおすすめします。

オプティマイズのコードの位置が不適切な場合、ページ フリッカー、ページが表示されない、コンテナのタイムアウト(アンチフリッカー スニペットを使用している場合)などの問題が発生する可能性があります。

アンチフリッカー スニペット

JavaScript コードにより HTML ページの変更が行われる際に発生する問題として一般的なのが、ページ フリッカーです。変更されたページが表示される前に、一時的に元のページが表示される現象です。

オプティマイズのようなツールを使用している場合にページ フリッカーが起こると、サイトを訪れたユーザーが混乱したり、自分がテストの対象になっていることに気づいたりする恐れがあります。これはサイトとテスト結果の両方に影響を与えます。こうした状況を発生させないよう、オプティマイズはさまざまな機能を備えています。

第一の防御策はアンチフリッカー スニペットで、非同期ダウンロードという特徴を持つオプティマイズには欠かせません。

同期スクリプトの場合、ブラウザによるページの解析と表示がブロックされ、最悪の場合はサイトが動作しなくなります。一方、非同期スクリプトはいつでも(ページが表示された後でも)実行でき、致命的な問題(サイトが読み込めなくなる等)も発生しませんが、ページ フリッカーを起こす可能性があります。

アンチフリッカー スニペットを配置すると、オプティマイズ コンテナをダウンロードするのに十分な時間が確保されるまで、ウェブページが一時的に非表示になります。オプティマイズ コンテナは、ページのレンダリングをブロックする可能性がある他のスクリプトやリソースと並行してダウンロードされるため、アンチフリッカー スニペットを一般的なページに適切に設置すれば、パフォーマンスに影響はありません。

ページ フリッカーを防ぐための機能はアンチフリッカー スニペットだけではありません。オプティマイズによる変更を表示するために、ページ フリッカーはページがブラウザにダウンロードされて表示される状態になるまでに終了します。

注: アンチフリッカーのタイムアウトは、オプティマイズがページに加えるオーバーヘッドを示すものではなく、最悪のケースを想定して設定します。また、推奨されるタイムアウト値は、サイトやオプティマイズのパフォーマンスではなく、主にサイトを訪れたユーザーのネットワーク速度に関係します(受信シグナルが弱い場合など)。

タイムアウト値に達するまでにオプティマイズ コンテナ(および他のページリソース)がダウンロードされておらず、ユーザーのデバイスで実行されていない場合は、ページの非表示は終了し、予定されているオプティマイズ テストも終了します。この場合、このユーザーによるサイト訪問はテスト トラフィックから除外されます。

オプティマイズ コンテナがダウンロードされると全体的なページの非表示は終了し、ダウンロードされたコンテナがテストルールを評価して、選択したテスト パターンに含まれる要素のみが非表示になります。これらの要素がまだダウンロードされていない場合も同様です。

Page-hiding-snippet-flow-diagram

ターゲティング ルールの評価

オプティマイズ コンテナがダウンロードされると、デフォルトの「ページ読み込み」オプションで有効化するように設定された、すべてのテストのターゲティング ルールが評価されます。デフォルト以外の有効化が設定されているテストは、アクティベーション イベントがトリガーされるまで待機します。

注: オプティマイズ エディタの起動に使用するテスト モデル ページは、最初にデフォルトのターゲティング ルールとして割り当てられていても、ターゲティングとは無関係です。テストに適用されるルールは、テスト詳細ページの [ターゲティング] タブで確認できます。

(ユーザーがテスト開始前にサイトを訪問していたとしても)テスト開始後の最初のサイト訪問時にユーザーにパターンを割り当てます。パターンは、パターンの重み付けに従い(Google アナリティクス クライアント ID に基づき)ランダムに割り当てられます。ユーザーにはテスト終了時まで同じパターンを割り当て、割り当て以降に発生するアクション(目標など)はそのパターンに関連付けられます。

一貫性のあるエクスペリエンスを提供するため、パターンの割り当ては専用のファーストパーティの Cookie(_gaexp)に保存され、同じユーザーが再び訪問したときに使用されます。次回の訪問時にそのパターンが必ず表示されるわけではなく、ルールが再評価されて一致した場合のみ、同じパターンが表示されます。ただし、そのページや他のページでのコンバージョンは、ルールに関係なくそのパターンに割り当てられます。

その割り当ては、ユーザーがアクセスしたページで複数のテストが進行中の場合、同じ Cookie に連結されます。ブラウザに保存できるCookie のサイズには制限があるため、ユーザーに割り当てられる同時テストの数には上限が設けられています。ユーザーの Cookie がこの制限を超えると、テスト トラフィックから除外され、追加のテストのパターンは表示されません。テストが終了すると、パターンの割り当てがクリーンアップされ、そのユーザーを追加のテストに追加することができるようになります。

ユーザーがテストに割り当てられると、ランタイムは必要なパターン情報が Google アナリティクスでトラッキングされるようにします。カスタム アクティベーションを使用せずに、デフォルトの「ページ読み込み」設定で有効にしたテストの場合、パターンの割り当ては Google アナリティクスのページビュー ヒット、およびそのヒットを使用したテスト トラッキングの前に行われます。それ以外の場合(または推奨されるオプティマイズのインストール手順に従っていなかった場合)は、Google アナリティクスの追加データがヒットし、テスト トラッキングが行われます。

テストの重み付けが変更されても、パターンは再割り当てされません。パターンの重み付けをゼロに設定しても、重み付けの変更前にいずれかのパターンに割り当てられたユーザーのトラフィックが発生する可能性があるからです。

複数のテストが行われる場合、テストは互いに独立して行われます。1 回の訪問で複数のテストに参加できるため、予期せぬ相互作用が発生しないように注意する必要があります。同じページで複数のテストを行うことはまったく問題ありませんが、テストに偏り(例: あるテストのパターンが他のテストのパターンの成果を向上させる)が発生しないよう、ページ内の別の領域でテストを行う必要があります。

注: オプティマイズのパターンには「ベスト エフォート」が適用されます。パターンの CSS セレクタの一部が存在しないか、JavaScript による変更で例外が発生したとしても、サイトの訪問はテスト パターンの一部として測定されます。

最後に、ターゲティング ルールの一部はサーバー側で評価され、ダウンロードされたコンテナからテストが完全に除外されます。

Targeting rule evaluation flow diagram

選択された A/B および MVT パターンの適用

コンテナがパターンを選択すると、パターンが適用されます。パターンは、オプティマイズ エディタに表示される変更操作のリストとして定義され、通常はリストに表示される順に適用されます(競合がない場合は最適化が行われます)。

各変更は、1 つ以上の要素に対応する CSS セレクタを対象とします。複数の要素を対象とする変更かどうかは、エディタで検出されます。

オプティマイズが実行されている時点で、変更の要素がページに表示されていないこともよくあります。そのような場合、オプティマイズは必要な CSS ルールを追加して非表示状態を維持し、変更リストの実行を一時停止します。

ターゲット要素が使用可能になるとすぐに変更が適用されて非表示の CSS ルールが削除され、リストの次の変更が同じように適用されます。

DOMContentElement イベントの後でブラウザのページ ステータスが「ready」になると、最後にオプティマイズは残った変更の適用を行います。この時点で変更の要素が検出されなければ、オプティマイズは次の処理に移ります。

注: スタイルの変更は通常 CSS ルールで行われるため、上記の手順を行う必要はありません。スタイルの変更はオプティマイズが読み込まれるとすぐに適用され、スタイルの変更のために追加のページの非表示が発生することはありません。

CSS セレクタを対象とする JavaScript による変更は、このセレクタの要素がブラウザで表示可能になると実行されます。

オプティマイズでは、コードが意図したよりも後で実行される可能性があるため、<BODY> に配置した(jQuery を使用するなどの)1 つの JavaScript による変更を 1 つのパターン全体に実装することはおすすめしません。JavaScript の対象となるセレクタは、変更する要素、または可能な限り小さい親コンテナ要素に限定するようにしてください。

最後に、異なるタイミングでページ上に表示される複数の要素を対象とする CSS セレクタがある変更もあります。オプティマイズ エディタでは、Shift キーを押しながらクリックすると複数の要素を選択できます。オプティマイズは表示されたとおりに変更を行い、最後にすべての要素の非表示を終了します。

Application of variants flow diagram

テストを有効化するためにカスタム イベントを使用する場合は、ページが読み込まれた後で、アクティベーション イベントを送信するたびにターゲティング ルールの評価が行われます。初めてルールが一致すると、パターンがユーザーに割り当てられ、Google アナリティクスのヒット(通常はデータヒット)が送信されて、テストのトラッキングとパターンの変更が確実に適用されます。

デフォルトのページ読み込みの場合とは異なり、ランタイムの処理はこれで終わりではありません。通常は、ページの状態(URL や DOM ツリーなど)に大きな変更があるたびに、アクティベーション イベントを追加で送信する必要があります。この状況が発生した場合は、次の 2 つの可能性があります。

  • ターゲティング ルールは変わらず一致しますが、その場合パターンは「再有効化」されます。ランタイムはパターンの変更を再実行しますが、前回の実行時にはなかった新しい要素にのみ適用されます。

  • ターゲティング ルールが一致しないため、パターンは「無効化」されます。変更は取り消され、要素は適用前の状態に戻ります。イベントごとに、有効化の前にすべての無効化が行われるため、ページは元の状態に戻り、新しいテストを正しく適用できる状態になります。なお、この javascript の変更は自動的に取り消すことができません。

関連資料

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。
検索
検索をクリア
検索を終了
Google アプリ
メインメニュー
ヘルプセンターを検索
true
101337
false