Google オプティマイズでついやりがちな 3 つのヤバいミス

Google オプティマイズを使う際の注意点

  1. 同じ要素を何度も「HTML を編集」しない
  2. ファーストビューで目立つ編集はしない
  3. 毎日、毎月、不定期で変わる要素は絶対に直接編集しない

Google オプティマイズは、 A/B テストツールとしてよく知られていますが、ユーザー毎に UI を変えるパーソナライゼーションが出来るなど、非常に優秀な無料ツールです。

特にビジュアルエディタ機能は、ソースコードを書けなくても簡単に UI に変更を加えられる、とても便利な機能です。
しかし実はこの ビジュアルエディタ 、一歩間違えると Web サイトを破壊してしまうような大変な事態になってしまうリスクもはらんでいます。

初心者から中級者まで、よくやりがちなヤバいミスたちをご紹介します。

ミス①:何重にも同じ要素の変更をしてしまう

ヤバい度 ★☆☆

ビジュアルエディタに慣れてくると、画像を加えたり、テキストカラーを編集したり、様々な要素を編集するようになります。
この時に気をつけなければならないのが、「同じ要素を重複して編集しないようにすること」です。

これをやり過ぎてしまうと、変更履歴の管理が煩雑になったり、変更点次第では読み込み速度にも影響があります。

これについて説明する前に、まずは Google オプティマイズの基本的な仕組みをおさらいしましょう。

1. Google オプティマイズ上で変更を加える

Google オプティマイズでは「ビジュアルエディタ」と呼ばれる編集ツールを使って、A/B テスト等の対象になるページを直感的に編集することができます。
簡単にテキストを編集できるのはもちろん、HTML の編集も行えるので画像の差し替えやボタンの色の編集なども行えます。

2.Google オプティマイズ上に変更点がバラバラに保存される

ビジュアルエディタでページに加えた操作は、それぞれ別の変更点として保存されます。

3.ユーザーの画面で変更点が順番に適用される

実際ユーザーがページにアクセスをすると、変更点が適用された形でページが表示されます。

以上が Google オプティマイズの基本的な仕組みです。

上記の例では、「1.画像 → 2.段落 → 3.見出し」の順で変更を行っており、Google オプティマイズは 3 つの変更点を別々に保存します。

それではここで問題です。

今度は、 「1.画像 → 2.段落 → 3.画像」 という順番で変更を加えた時、どのようになるでしょうか?

A: 1 つめの変更点と同じ画像なので、変更点が上書きされて合計 2 つになる
B: 1 つめの変更点と同じ画像だが、変更点は上書きはされず合計 3 つのまま

実際に先ほどのページで検証してみました。

この時 Google オプティマイズ上では、このように変更点が保存されていました。
ご覧の通り、 3 つ目の変更点も上書きされずに残っていたので、
「B: 1 つめの変更点と同じ画像だが、変更点は上書きはされず合計 3 つのまま 」
が正解でした。

一体これの何がヤバいのか?
表面上全く問題はないように見えますが、実は裏ではとても無駄なことが行われています。
本来読み込まなくても良いはずの無駄な(変更点1の)画像も読み込まれてしまっているのです。

今回の場合は 1 つの画像でしたが、クリエイティブの A/B テストとなると何回も画像の調整を行う可能性があります。

その画像が全て裏で読み込みが行われていたら、ページスピードに影響が出るのはいうまでもありません。

対策:画面右上の「変更点」から変更を加える

無駄な処理を加えないようにするためには、一度変更した要素を変更する時に、
過去に加えた変更を編集することが有効です。
先ほどの上部ナビゲーション右「○件の変更」というテキストを選択すると、過去に加えた変更の一覧が表示されます。
ここから過去に加えた変更点の編集を行うことができます。 「編集」を押すと、過去に加えた変更の内容が表示されます。 この変更点の内容を修正することで、変更内容が上書きされます。

このように過去に加えた変更点の編集を行うことで、無駄に変更点を増やしたり、必要以上に画像を読み込むことなども無くなります。


ミス②:ファーストビューに見た目の大きな変更を加える

ヤバい度 ★★☆


百聞は一見にしかず。

まずはこちらをご覧ください



ご覧いただけましたでしょうか?
ガッツポーズをする男性の前に、やる気のない男性がちらっと見えたのではないかと思います。(見えなかった場合は、キャッシュを削除してもう一度試してみてください)

これが Google オプティマイズを使う際の注意点の一つ「チラつき」(flicker)です。

先ほどもご紹介しましたが、 Google オプティマイズでは JavaScript が裏側でページ内の要素を変更しています。
この要素の変更が画面のレンダリングが完了した後に行われてしまうため、一瞬変更前のデザインが出てしまいます。

そのため、ファーストビュー(ユーザーが画面を読み込んだ時に最初に見える領域)の要素を変更することが、このチラつきの原因になってしまっているのです。

ユーザーからすると、一度見えた文字やボタンが消えるのは、バグが発生したようにも見えますし、とても良いユーザー体験とは言えません

対策:アンチフリッカー(anti-flicker)スニペットを使う

Google オプティマイズでは、チラつき防止のために、アンチフリッカー(anti-flicker)スニペットというものを用意してくれています。
このスクリプトを実装すると、先ほどのようなチラつきが出なくなり、ユーザーのストレスを緩和することができます。

先ほどのページにアンチフリッカーを実装したものがこちらになります。


先ほどと比べてチラつき(やる気のない男性の画像)が出なくなっているはずです。
これがアンチフリッカーの効果です。

一点注意が必要なのが、アンチフリッカーは GTM(Google Tag Manager)では実装ができないということです。インラインで(直接ソースコードに)書き込まなければならないので、実装に際してはエンジニアに相談しましょう。

ミス③:動的に生成される要素を上書きしてしまう

ヤバい度 ★★★ MAX

今回ご紹介する最もヤバいミスは、Web サイトによっては大トラブルになりかねない深刻なものです。

意図せずしてこのミスをしてしまうと、誤った情報が Web サイトに出てしまう可能性があります。

説明用サンプルとして、架空のニュースサイト(Optimize ニュース.com)を用意しました。 このニュースサイトのニュースを例にご説明します。

ある日、Optimize ニュース編集部内で、「もっとトップのニュースをユーザーに見て欲しい」という声があがり、トップニュースのフォントサイズをもっと大きくすることになりました。

Google オプティマイズを使うと簡単にテストができるということで、早速フォントサイズを大きくしてみました。 「HTML を編集」から フォントが大きくなり、これでトップニュースのクリック率が上がるだろうと編集部は喜びました。


しかし、翌日 1/2 ユーザーから問い合わせが。
「トップページに昨日のニュースが乗ってるみたいなんだけど、大丈夫?」

慌てて トップページを見てみると、 フォントサイズは大きいままですし、一見何も問題ないように思えます。

しかしよく見てみると、トップに昨日のニュース(1/1 紅白歌合戦。今年の視聴率は?)が残ってしまっています。

本来 1/2 にはトップページはこのようになるはずでした。 1/2 のトップニュースは「箱根駅伝」の話題のはずでした。

Google オプティマイズで変更したのはフォントサイズだけにも関わらず、過去のトップのニュースが残ってしまっているのです。


これが Google オプティマイズ最大の落とし穴「動的要素の上書き」です。

なぜこのようなことが起きているのか?
最初に「HTML を編集」で変更を加えた内容を見てみると、このようになっています。 左下に「選択した要素の HTML を置換します」と書かれていることにお気づきでしょうか。
つまり、「編集を加えた時の HTML 情報(文言、フォントサイズなど)を保存して、読み込まれた時に同じ場所(セレクタ)の HTML 要素を上書きする」という処理が、Google オプティマイズによって行われているのです。

動的に変わる要素に変更を加えると、過去の情報に上書きされて誤った情報がサイトに載ってしまいますので、要注意です。

今回のケースのような、ニュースメディアの「ニュース見出し」
あるいは金融情報サイトでの「価格、為替レート情報」
EC サイトにおける「キャンペーン情報」
などの動的要素を変更範囲に加えてしまうと大トラブルになりかねませんので、お気をつけください。

対策:動的要素を含む要素は変更しない。どうしても必要ならば、CSSかJSを編集

この現象で特に注意すべきなのが「直接編集していなくても、編集エリアに入っているだけで上書きされる」という点です。
先ほどの見出しの下に「もっと見る」という導線を設置してみようと思います。
「HTML を編集」から 広めのセクションを選択していますが、見出しの直後に「もっと見る」というテキストリンクを加えます。 一見すると問題なくテキストが変更されているように見えますが、変更内容の履歴を見てみると、 という風に見出しセクションが丸ごと置換されるようになってしまっています。
このように直接編集をしていなくても、編集エリアに含まれているだけで上書きがされてしまいます。

なので、「HTML を編集」する際には選択している領域に動的要素が入り込まないように注意が必要です。
そしてビジュアルエディタの編集が終わったら、変更点を見直して、動的に変更される要素が含まれていないかを確認してから公開するようにしましょう。

「どうしても動的に生成される要素が編集したい」という場合には、CSS や JS での記述もできますのでそこから編集するのが良いでしょう。
CSS の編集は、ビジュアルエディタ右上の < > マークから行うことができます。

まとめ

いかがでしたでしょうか。 冒頭に述べた通り、 Google オプティマイズは手軽に A/B テストやパーソナライゼーションが無料でできる優れたツールです。

しかしこの記事で紹介したようにポイントを押さえて使わなければ、大変なトラブルになりかねません。
この記事で紹介した内容を踏まえつつ、きちんと変更履歴を確認してプレビューモードを見た上で、公開を行うようにしましょう。

この記事の読者の皆さまが、 Google オプティマイズの罠にハマらないことを切に願います。

2

0

B!

0

2

0

大谷 恭平 (Kyohei Otani)

アイオイクス 社にて SEO、CRO、Web 解析コンサルタントとして活動後、仮想通貨取引所 bitFlyer 社にて、グロースチームリーダー、及びデータエンジニア兼 Web/App 解析を担当。
海外のマーケティング専門家との交流や、セミナーでの発信を通して、日本では馴染みの薄かった CRO(コンバージョン率最適化)の普及に貢献。日本人 2 人目の CXL 認定オプティマイザー。