🍇

GoogleOptimizeでABテストを実装するのに色々調べてみた。

2021/06/01に公開

現在私が担当しているサイトがNext.jsを使用したサイトなのですがそこにGoogle Optimizeを使用してABテストを行いたい。という依頼が来て、実装を始めたというのが今回の流れになります。

Google Analyticsもほぼ触ったことがなかったのでそこを調べて先方にも説明し、どのようにOptimizeを使用するのか、使用できるようにするのか。
そういうところも考えて作成しなくてはならなかったのでマーケティングプラットフォームを調べることから始まりました。そんな健忘録になります。

Google Analyticsとは？

皆さんも知っている通り分析ツールです。
これをサイトに設置するだけで、例えば、この一週間の間に

どれだけの人が訪問したか？
このページに来て他のページに行ったか？（別サイトのリンクとか貼ってあると分かりやすいですね）
どのくらいで該当ページから離脱したか？

・・・等他にも確認出来ることは様々あります。
このようにどんな人達がこのサイトをどんな目的で見に来たのか確認出来るようになるツールです。
現在はGoogle Analytics 4（GA4）が2020年10月にβ版からリリースされ使用されています。
もっと詳しく、という方は下記からGoogleの公式サイトからご確認を。

どうしてGoogle Optimizeを使うのにGoogle Analyticsの知識が必要になるのか？

これはアナリティクスで作成したユーザーリストを使用するためです。
つまりはアナリティクスと連携することでGoogle Optimizeが使用可能になります。
（GTMでもGoogle Optimizeを連携出来ますが基本的には非推奨となっています）

Google Optimizeとは？

様々なユーザーに合わせてサイトをカスタマイズしていけるものです。
これを使うことでサイト上で表示のテストを行うことができ、自分のサイトはどちらのほうが集客できるのかな？などをテスト結果をモニタリングして一番良い結果が得られるページにすることができます。

別パターンでどっちのほうが集客出来るのか？というのはよくあることで、そういうときに使用することで良いWEBサイトが作れるようになるものです。

題名の通り今回はABテストのために設置しましたが、他にも

リダイレクトテスト
多変動テスト（MVT）
バナーテンプレート
カスタマイズ
・・・等様々なテストを行えます。

では、どうやって設定するのか？

ここから実践的なものになります。
まずこの記事を作成した現在（2021年5月現在）ですがGA4では
Google Optimizeは使用できません。
今後のアップデートで使用出来るようになるとのことなのでそれまでは以前のバージョンを使用するようにしましょう。

Google Analyticsアカウント作成

まずはアカウント作成します。
アカウント名はお好きなものを設定してください。

次にプロパティの設定。
プロパティ名もお好きなもので設定して大丈夫です。
アカウント内でこのプロパティ名を複数作成することが可能で、これでトラッキングIDというものを発行出来ます。これは複数作成可能で、別々で分析したいものがある場合、分けることが出来るので複数サイトを別々で分析したいんだけど、アカウントは一つのもので管理したいなんてときにはプロパティの欄を確認しましょう。

！ここで注意です！

オプティマイズはGA4では使用できない、とお話したかと思います。
ですので従来のバージョンを一緒に作成しなくてはなりません。（GA4ともう一つ従来Verが作成されます）
これがユニバーサルアナリティクスプロパティです。

[詳細オプションを表示]→[ユニバーサルアナリティクスプロパティの作成]
この項目をオンにします。

そうするとウェブサイトのURLとプロパティをどっちも作りますか？（GA4と従来Ver）と聞かれるのですがこれは今後のことを考えて両方作ってもいいと思います。お好みで。

最後にビジネス情報を入れて作成しましょう。

これでGoogle Analyticsアカウント設定が完了です。

Google Optimizeのアカウントの作成

まずはGoogleオプティマイズのページに行き利用開始を押して設定していきます。

これで使用するアカウントが作成されて、この中にコンテナと言われるものを作ります。
コンテナのイメージは上で紹介したGoogle Analyticsのプロパティにイメージは近いです。
なので紐付けるときは特別なことがない限りGoogle Analyticsのプロパティと合わせてコンテナは作成しましょう。

これでアカウントは完成です。

次はABテストの作成をしていきます。

エクスペリエンスの作成

エクスペリエンスを作ります。
これはテスト項目です。どんなページで、どんなテストを行いたいか？ということです。
名前はどんなテストをしているのか書いておくといいと思います。
今回はABテストなんでABテストを選んで作成します。
ちなみにこのときABテストしたいページのURLが必要になりますので準備しておきましょう。

ターゲティングとパターン

次にターゲティングとパターンの作成を行いたいと思います。
こちらでABのテストを作成します。
作成するとパターンに【オリジナル】と【パターン１】というのが出来ますので【パターン１】にテストしたい変更を加えます。
基本的にこちらではcssもjsも追加が可能になっているので結構大きな変更も対応できるようになっています。
今回は適当に文字と背景色を追加・変更してみようと思います。

ターゲッティングには比重というところがあり、基本的には50%50%となっていて確率でオリジナルとパターン１が出てくるようになっています。
こちらもカスタマイズ出来ますのでパターン1を多めに出したい場合などあったら確率も自由に変更することが可能です。

測定と目標

ここでGoogleアナリティクスの連携を行います。
ちゃんとアナリティクスを設定していればここに連携出来るアナリティクスが出てくるはずですので連携します。

テスト目標も設定しましょう！
これはテストを実施するのに何を見ておきたいか？と考えてください。
目標はメイン目標１つ、副目標が2つまで実装出来ます。

設定

最後にオプティマイズがインストールされているかどうかを確認します。
【手順を表示】をクリックすると表示されるスクリプトタグがあります。これをgtag.jsと一緒にサイトに組み込むことでオプティマイズにてABテストを行うことが出来ます。
なのでサイトにスクリプトタグを仕込みましょう。
gtag.jsの後に組み込んでおけば大丈夫です。

最後に【インストールを確認】を押してサイトにインストールされているかどうか確認します。

スクリプトタグをインストールされていれば【オプティマイズは正しくインストールされています】と出ますのでこれでオプティマイズでABテストする準備はOKです！ABテストをはじめましょう！！
基本的にはテスト期間は2ヶ月ほどとなっていますが、それだけ出来れば十分かなと思っております。

おわり

今回はオプティマイズの実装について行いました。
次回はNext.jsでどうやって実装したかをやりたいなと思います。