Ledge.ai出張所 Ledge.ai出張所

Google無双…開幕ッ!GA完全連携A/Bテストツール『Google Optimize 無償版』ついにベータリリース

ついに公開された『Google Optimize』無償版(ベータ)をソッコー触ってみたので、「何ができるのか?」と「どう活用するのか?」をまとめました。

Google『お ま た せ』


ついに来ました。以前デジマラボでも紹介し、リリース予告だけで業界を激震させたABテストツール『Google Optimize』無償版公開です。(ベータ版だけど誰でも使える)

とりあえずデジマラボ編集部でソッコー触ってみたので、以下「何ができるのか?」「どう活用するのか?」のまとめとなります。

できない事って逆に何?至れり尽くせりな無償開放

まずは気になる「何ができるんだっけ?」てとこですが、なんと『有料版とほぼ遜色なし』て感じでした。つまり、以前の記事でお知らせした以下の機能がほぼフル装備状態での無償開放になったようなんです。

※作れるエクスペリエンス数に制限はあるけれど

とりあえずできることリスト

  • GAタグにちょっと加工してURL指定すればOK
  • 表示された画面をドラッグ&ドロップ、直接コード編集でいじってテスト作成
  • 変更履歴は全部残ってるので、バージョン管理もらくらく
  • もちろんトラフィックデータはGA連携でPDCAぐるぐるまわる
  • 1画面に複数テストをぶっ込む『多変量テスト』や、画面を既存LPなんかと入れ替える『リダイレクトテスト』にまで対応。やばい

ちょっとまだそこまで触りきれていないので、もしかすると「これはダメよ」とか「トラフィックはここまでね」みたいなのが出てくるかもしれないですが、ひとまず ”やりたいと思ってたことは割と全部できた” ということだけお伝えしておこうかと。

以下、今すぐA/Bテストを開始するための手順を載っけておきます。

これで今すぐA/Bテスト開始!具体的な設定方法まとめ

やることはいたってシンプルです。

UIは現状英語ですが、ほぼ画面の指示通りにポチポチやってれば設定は完了。詳しくはこのへんを参照いただくとして、以下ちょっと抜粋してみます。

  • Google Optimize でテスト名を指定してコンテナを作成
  • 対象となるページのURLを指定してテスト形式(A/Bテスト|多変量テスト|リダイレクトテスト)
  • GAアカウント > プロパティを選んで紐付け ⇒ 目標とターゲティングを設定
  • 既存のGAタグにちょっとだけコードを追加
  • 専用の拡張機能をChromeに追加してブラウザ上で画面編集開始
  • 編集が完了したらテストのコンテナをリリースしてあとはGAから観測OK

と、まぁこんな感じ。

以下にちょっと注意が必要な項目だけザクッと解説していきますね。


Google Analyticsコードへの改変について

これはすごくシンプルで、現状サイトに埋め込まれている(タグマネ使ってる場合にはコンテナ内に格納されてる)GAタグに対し、わずか1行追加するだけでOKです。


  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-00000000-0', 'auto');
    ga('require', 'GTM-AAAAAAA');
    ga('send', 'pageview');
  </script>

上記でいうとこの『ga(‘require’, ‘GTM-AAAAAAA’);』の部分をいつものGAタグに追加する感じですね。Google Optimizeでテスト作ってる最中に案内が出て来るので、そこで自分のIDを確認してください。

※後から確認する場合はダッシュボード右側の『Install Optimize snippet』を見ればOK

さらにできれば、 <head> タグ内に下記のタグも入れておくと良いらしいです。Google OptimizeがUIを上書きする際に発生する画面のチラツキを低減してくれるんだとか。


  <style>.async-hide { opacity: 0 !important} </style>
  <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
  h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
  (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
  })(window,document.documentElement,'async-hide','dataLayer',4000,
  {'GTM-AAAAAAA':true});</script>


複数ページを指定してテストを行いたい場合は?

例えば商品詳細や記事詳細なんかの『同じ構造のページがいっぱいある』みたいな場合、最初に指定する『EditPage』には対象となるページのどれか一つを入れておけばOKです。

実際画面上でUIをぐりぐりイジる時には最初に指定した対象URL画面をいじって、ターゲット設定から正規表現で同じ構造の対象画面全部に適用する。みたいな感じですね。


ターゲット設定に正規表現を指定できる

具体的な適用範囲は、ダッシュボードにある『Target』タブから設定可能。ここで『URL>正規表現(matches regex)』を選んで正規表現で適用させてしまいます。

もちろん複数条件を [or] や [and] で指定することもできるので、商品詳細ページがカテゴリごとにちょっと構造が違う…なんて場合にも、コンテナ(要するにテスト対象ページ群とテスト内容の固まり)を分けて指定すれば対応が可能です。

実は上記で使った『URLターゲティング』以外にも、『GAオーディエンス』『行動シーケンス』『地域』『ブラウザなどのユーザー環境』『JSの任意変数』『Cookie』『クエリパラメータ』などなど、これでもか!という条件で出し分けが可能だったりします。なにそれ怖い

GAアカウントとの紐付けは?

これぞ公式ツールの真骨頂。なんとコンテナを作成したタイミングで、勝手にGoogle Analyticsの「行動」タブ内にコンテナ名そのまんまなレポートが新しく追加されてしまいます。

もちろん最初っからオリジナルとテスト対象のトラフィックをグラフ分けされた状態です。なんだこれ最高か。

で、これってつまりは…

  • もうややこしいカスタムレポートを作る必要がない
  • AとBとCと…と複数テストをやっても一瞬で可視化できる
  • アドバンスドセグメントで『SNS経由でAのパターンを見たスマホのトラフィック』なんて切り分け分析も簡単にできちゃう

ということ。

ちょっともうどうしたら良いんでしょう…。もうこのツールで良いじゃん。全部できるじゃん。。。

画面編集も超高機能!何の知識もなくても(多分)大丈夫

テスト版を作る場合は、最初に指定した画面をベースにブラウザ上でゴリゴリやっていくわけですが、これまたすごい出来でした。


要素をドラッグして移動させたり…

GUIでグリグリ要素の装飾を変えたり…

専用の拡張機能が必要になるので、編集するにはGoogleChromeでやるのが条件となりますが、その操作感はもはや『コーディング』というより『図工』って感覚。

以下にちょっとまとめてみましたが、まとめる必要があったのか?というレベルです。

  • 要素をマウスで選択
  • ドラッグ&ドロップで自由に移動
  • HTMLやCSSを自由に書き換えてもOK
  • 既存要素をGUIで自由に色替え&サイズ替えしても大丈夫

これだけ使いやすければ、例えば…

『このボタン、もうちょっと大きくして上のほうにしてみたら…?』
『ここに吸着ボタンを埋め込んだら…?』
『この文字もうちょい大きいほうがいいんじゃない…?』
『○○経由の人にだけ、この画面にバナー入れてみましょうよ』

みたいな。

思ってはいるけどシステムとかリソースとか予算とかの兼ね合いで試すわけにもいかなかったアレコレが、今スグ実際に試せちゃいます。無料で。元のソースに一切影響なく。

う…ううーーむ。なんかすごすぎて色々怖くなってきた。

マーケットに与える影響は?Googleによる蹂躙がはじまる?

ここ最近荒ぶってるGoogle先生のリリースプロダクトの中でも、飛び抜けた影響を業界に及ぼしそうな今回の開放。もはや価格破壊…ていうか市場無双って感じですが、果たしてどうなるんでしょう?

一つ言えるのは、多分Google先生はそこで『仮説を考える時間こそが大事なんだぜ!』と叫びたいんだろうなー。ということ。

だって同時リリースされたGoogleによるOptimaize利用マニュアルでも、最初の最初に書かれたフローに書いてあるんですもん。

『まず仮説を考えてください』 て。

うん。これをマニュアルの最初のフローに持ってくるあたり、Google先生の本気を感じちゃいますね。

ではまたー。

デジマラボ 編集部 by デジマラボ 編集部
BITAデジマラボ編集部です。最新Tech界隈の「なんかすごいね」を、『現場の提案』にするための情報をけっこうがんばってお送りします。

「BITA デジマラボ」掲載のオリジナル版はこちらGoogle無双…開幕ッ!GA完全連携A/Bテストツール『Google Optimize 無償版』ついにリリース

用語集CSS / HTML / SNS / UA
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]