目次
1.非技術的な説明基本
技術的な説明は抜きで、Optimizely がどのように動作するのかを知りたいですか?実はとてもシンプルです:Optimizely では、A/B テスト(スプリットテスト)と多変量テストをウェブとモバイルで実行できます。1 つのエクスペリエンスのさまざまなバージョンを比較することにより、どんな要素がより良いユーザーエクスペリエンスや、さらに多くのコンバージョンへとつながるかを判別することができます。
Optimizely が実際のウェブサイトに対して実行される際には、1 行の JavaScript スニペットを通じて実行されます。このコードは、Optimizely をサイトにロードし、(「ベースライン」または「オリジナル」のエクスペリエンスを見る訪問者ではなく)「バリエーション」に振り分けられる訪問者のエクスペリエンスを変更します。
モバイルアプリをテストしている場合、Optimizely は iOS や Android 用のSDK(Software Development Kit)を介して実行されます。
最後に、Optimizely は訪問者とコンバージョンについてのデータを収集し統計エンジンによりそのデータを分析し、ベースラインと比較してどのバリエーションが勝者でどのバリエーションが敗者かを明らかにします。これにより、サイトにどんな変更を実装するか決定することができます。
このプロセスの概略を以下に示します。
Optimizely を使用すると、ほかにどんなことができますか? A/B テストと多変量テストに加えて、次のことが可能です。
OPTIMIZELY スニペットの実行順
以下の図は、ページロード中に同期実行される Optimizely スニペットコードの動作順を示すものです。 この図の Cookie については、後述します。
上の図では、[実験バリエーションコード実行] というボックスが示されています。バリエーションコードとは何でしょうか? Optimizely エディターでページのバリエーションを作成する際、エディターで実行する各アクションは、1 行の JavaScript としてエンコードされます。
実験開始後、訪問者がそのページをロードすると、バリエーションを表示するために、この JavaScript が実行されます。たとえば、ある画像を別の画像に切り替える場合、対応する JavaScript コードは次のようなものになります。
このコードは、訪問者のブラウザーに対して、エディターで指定した画像を、アップロードした新しい画像(現在は Optimizely サーバー上のここに保管されている)に置き換えることを指示しています。
Optimizely エディターでバリエーションを作成する際、右下隅の [コードの編集] をクリックすると、コードが表示され、自分で編集することも可能です。
Optimizely エディターは、実験ページのバリエーションに加える変更ごとに、1 行のJavaScript を生成します。それら自動生成された JavaScript 行は、次のような構造をしています。
それには、現在ハイライトされている要素(この場合は id 属性が hplogo の画像)のjQuery ID、およびアクション(この場合は幅と高さの寸法の調整)が含まれます。
Optimizely では、バリエーションコードを評価する際に、2 つの制約を処理する必要があります。
これらの制約に対処するため、Optimizely では、以下のアルゴリズムを使用することにより、バリエーションコードを 1 行ずつ評価します。
上の図では、バリエーションコードに「ピュアな」JavaScript(jQuery ではない)を含めた場合、Optimizely は、その後 DOM がすべてのバリエーションコードを評価できる準備が整うまで待機することになります。バリエーションコードの評価に使用される実際の正規表現は、次のものです。
Optimizely の実行順によっては、バリエーションページがロード前に「フラッシュ」する可能性があります。この動作は、リンク記事で説明されているように、optimizely_evaluate フラグを追加することによりオーバーライド可能で、Optimizely のロード後すぐにコードの一部を評価するよう強制することができます。 Optimizely の評価フラグの形式は、次のとおりです。
ここに「ピュア JS」をコーディング
ヒント:
コメントコードや空行のために、DOM を準備するまでのロードがさらに遅くなってしまうのでは、と心配になるかもしれません。 /* */ のブロックスタイルの複数行コメントを使用すると、DOM 準備までの Optimizely による評価が遅くなります。たとえば、
/*
このようなコメントは
コードの実行から、
DOM 準備までの時間が遅くなる
*/
// この形式の単一行コメントは、
// テストに影響しない
空行および // コメントはロードの遅延を発生させないため、コメントのベストプラクティスとして // を使用するようにしてください。
jQuery が複数行にまたがって書かれていると、DOM が準備完了になるまでページでの Optimizely バリエーションコードの表示が遅れます。複雑な jQuery をフォーマットする際はご注意ください。
Optimizely では、永続訪問者レベルの Cookie を使用することにより、ユーザーを個別に特定し、そのアクションを追跡します。 複数の Cookie を設定して、それぞれにデータの異なる部分を格納します。
ファーストパーティー Cookie は、対象ウェブサイトにドメインが設定されている(.yoursite.com など)Cookie です。 Optimizely は、ファーストパーティー Cookieを、サイトで利用可能な最高レベルのドメインに設定します。それにより、ユーザーは、すべてのサブドメインで追跡されます。
要約:
optimizelyEndUserId
optimizelyBuckets
optimizelySegments
optimizelyRedirect
optimizelyPendingLogEvents
これらの Cookie のドメインは、.optimizely.com に設定されています(お使いのページに関連してサードパーティー Cookie として分類されます)。 Optimizely では、ド メインをまたいでユーザーを追跡し、そのアクションをオリジナルドメインの実験/バ リエーションにあわせて調整するためにこれらの Cookie を採用しています。
ファーストパーティー Cookie と類似の情報と名前が使用されます。
これらは、Optimizely のエディター使用時にのみ設定されるファーストパーティーCookie です。 したがって、ウェブページのエンドユーザーがこれらの Cookie を目にすることは決してありません。