Optimizelyで表示する際にページレイアウトが崩れてしまう | Optimizely 正規代理店イー・エージェンシー
  • 最終更新日:2015年12月22日

Optimizelyで表示する際にページレイアウトが崩れてしまう

タグ :

Optimizelyでページを表示する際にレイアウトが崩れてしまう場合、下記の2つの状況が考えられます。

1.Optimizelyのエディター/プレビューに読み込むとレイアウトが崩れる
2.実験を開始した後にレイアウトが崩れる

解決方法

1.Optimizelyのエディター/プレビューに読み込むとレイアウトが崩れる

エディター/プレビュー画面はOptimizelyが擬似的に再現しているもののため、元のソースに依存してしまい、完全に本番サイトが再現できない場合があります。
若干のレベルであれば、割り切ってエディターを利用し、検証段階で、実機で確認されることをお勧めします。

2.実験を開始した後にレイアウトが崩れる

実験開始後にレイアウトが崩れてしまっている場合、バリエーションの作成段階で要素が正しく変更できていない可能性があります。
バリエーションで要素を正しく変更できているか確認して下さい。

実機での確認方法

テスト開始後にレイアウトの崩れを発見するのでは遅いので、テスト開始前に実機で確認して頂くことをお勧めします。

1.実機で確認する際に必要な設定

ホーム画面の設定からプライバシーを選択し、[強制バリエーションパラメーターを無効にする]のチェックを外し保存します。

Optimizelyレイアウト1

2.実機検証に必要な情報の取得

実機検証を行うには、実験IDとバリエーション番号が必要です。
検証する実験に入り、実験IDとバリエーションを確認します。

・実験ID…Original=0,Variation#1=1(バリエーションの数字が実験IDです。)
・バリエーション番号…id=~(~の数字部分)

Optimizelyレイアウト2

3.パラメーターを付け足す

下記パラメーターを実験対象URLに追加します。

?optimizely_x実験ID=バリエーション番号
※パラメーターは?または&で追加します。

例)
・実験対象URL:https://example.jp/
・実験ID=1
・バリエーション番号=01234556789
上記条件で実機での検証を行う場合下記のようになります。
https://example.jp/?optimizely_x1=0123456789

以上が、Optimizelyで表示する際にページレイアウトが崩れてしまう場合の対処方法です。

Optimizelyのサポートに関するお問い合わせはこちらまで

ヘルプの関連記事

Optimizely⇒UA_GTM 連携方法について
投稿日: 2017年01月10日
SNS ボタンのクリック目標の計測
投稿日: 2016年09月26日
リダイレクト実験:個別URLのテスト
投稿日: 2016年09月16日
CSSだけでテスト作成 : テストバリエーションにのみ適用されるCSSを書く方法
投稿日: 2016年09月16日
テストの実装でよく使われる jQuery の機能のご紹介 vol2
投稿日: 2016年09月14日

ヘルプのよく読まれている記事