Ledge.ai出張所

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

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

Ledge.aiニュース 2017/3/29 7:00 マーケティング／広告 | 解説／ノウハウ

497 85 33

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>