2024.02.22
サーバー
Google による2024年2月からの新しいメールポリシー確認と設定
日本語でも利用できる Google Optimize を試してみよう
アップルップルの運営しているコワーキングスペース「ベースキャンプ名古屋」では定期的に「Webマーケティングの日」というイベントが開催されており、今月のテーマとしては「Google Optimize を触ってみよう！」ということでした。
1. アカウントを取得
まずは Google Optimize のページにアクセスしてください。残念ながらこの段階では英語のコンテンツしかありません。お持ちであろう Google アナリティクス で利用しているアカウントで SIGN UP FOR FREE からサインアップしてください。すると、以下のような画面が表示されます。
https://optimize.google.com/optimize/home/#/accounts が表示されますが、ここで # の前に ?hl=ja を追記してみましょう。無事に日本語化ができたことが確認できるのではないでしょうか。パラメーターについては以下のURLが参考になります。
もうしばらくすると、他のシステムと同様に日本語で表示されるのではないかと思いますが、公式にはまだのようですので、自己責任での利用でお願いします。まだ、あまり情報がないサービスなので、日本語で試せることで随分ハードルが下がりますね。いろいろ試してみましょう。
2. コンテナを作成
- で作成したアカウントに、コンテナという単位でサイトを登録します。右側にある5つのステップをクリアしていきます。1つ目の「アカウントとユーザーの管理」については既に完了しています。
3. アカウントについて
1つの Google アカウントで複数のアカウントを管理できそうです。そのアカウント中にコンテナというカタチで複数のサイトを入れていくこともできます。人のアイコンをクリックすると「ユーザーを招待」の画面になります。 Googleアカウント を持っている人を招待すると Google Optimize を共有することもできます。
無料版だと、1つのサイトしか利用できないかもって思っていたので、複数のアカウントやコンテナが設定できたので、大喜びしながらテストをしています。
4. Google アナリティクスとのリンク
Google アナリティクスのプロパティを選択して、その中の1つのビューを選択します。
5. スニペットのインストール
Google アナリティクスと同様に JavaScript のタグをテストするサイトに追記します。
Google オプティマイズ のブラウザ上でサイトのコンテンツを修正するために必要な JavaScript タグで、Google アナリティクスのタグの上に書く必要があります。
<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-ZZZZZZZZ':true});</script>以下のタグは、 ga('require', 'GTM-ZZZZZZZ'); のような部分が追加されていることになります。
<script>
|s| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|s| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|s| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|s| })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|s| ga('create', 'UA-xxxxx-xx', 'auto');
|s| ga('require', 'GTM-ZZZZZZZZ');
|s| ga('send', 'pageview');
</script>6. テストの作成
ここからが本番ですね。「テスト」を作っていきます。この1つのコンテナというところには無償版では3つのテストまでしか作成できないという制限があります。
テストとしては、以下の3つのテストが可能です。
| A/Bテスト | ページの複数のパターンをテストします。A/B/n テストとも呼ばれます。 |
|---|---|
| 多変量テスト（MVT） | 複数の異なるセクションを含むパターンをテストします。 |
| リダイレクト テスト | 異なる URL またはパスで識別される個別のウェブページをテストします。 |
「A/Bテスト」は説明を省きますが、「多変量テスト」は複数のA/Bテストを一緒にやるような感じで、「リダイレクト テスト」は別ページを用意しておいて、そのページに指定された割合でリダイレクトするテストになります。このリダイレクトテストはリダイレクトされるため URL が変わるので注意が必要です。さらに詳しいことは、Google のヘルプを読んでみてください。
7. A/Bテストを設定する
実際にテストをするページの URL を設定し、どのタイプのテストをするかを選択してください。
8. 新規パターンを追加
オリジナルに加え、新しいパターンのページを用意します。「+新規パターン」から好きな名前を追加しましょう。この名前が Googleアナリティクス側でも利用するので分かりやすい方がオススメです。50% と 50% になっていると、その割合で違うページが表示されることになります。
目標のところは、コンバージョンの設定が表示されいるかと思いますので、どのコンバージョンで2つのテストを比較するかを設定しましょう。
この段階では、上記の「パターン１」というのも、「オリジナル」も同じコンテンツが表示されてしまいます。
9. オリジナルと違うページを作ってみよう
Google Chrome のエクステンション「 Google Optimize 」をインストールする必要があります。Google のサービスになりますので、他のブラウザでは動かせないのではないかと思います。
エクステンションのインストールが終わったら、A/Bテストのページのパターンのところで「パターン１」をクリックしてみてください。普段のページの上に赤い部分が追加されてカスタマイズのためのパネルが表示されます。ここまで出来れば、あとは好きにブラウザ上で変更していくことができ（保存）＆（完了）ボタンで準備完了です。
10. テストを開始
（テストを開始）というボタンをクリックでテストを開始です。
11. Google アナリティクスでレポートを表示
テスト結果については「Googleアナリティクスでレポートを表示」をクリックしてもらうと、オプティマイズからアナリティクスのサイトに移動してチェックできるようになります。
残念ながら現時点ではデータがないのでまたの機会になりますが、行動 ＞ テスト のところに表示されるようになります。 オリジナル・パターン１ というのが表示されているのが確認できるかと思います。
これまで Google アナリティクスでも、A/Bテスト機能というのがありましたが、URL が変わってしまうことで私としては使うのが難しいなって思っていましたが、今回の Google Optimize については、自社のサイトやクライアントワークでも活用していくことになりそうだと思っております。
