Google Tag ManagerとGoogle Optimizeを連携してA/Bテストを実施してみよう
赤と青。どちらのボタンがクリックされる？
そもそもボタンとテキストリンクのどちらがCTR高い？
リンク色は青がいい？それとも赤の方がクリックされる？
そんな事を実際にサイト上で試してしまうA/Bテスト。Google Optimizeを利用すれば、簡単にテストすることができます。TechPRESSではアフィリエイト記事のボタンの色を変えて、何色が一番CTR高いのか試してみました。
Google Optimizeの設定をします
Chromeに下記エクステンションをインストールしてください。
インストールできたらOptimizeのページにアクセスします。
テストの作成をクリックします。テストを実施するURLを入力し、A/Bテストを選択しました。
下記画面になります。
まずは左上の「スケジュールを作成」から期間を設定します。
テスト期間を入力します。最低でも１ヶ月ほど実施するのが良いでしょう。
また初期画面に戻ります。
次はパターンを設定します。「パターンを作成」をクリックしてください。
A/Bテストを実施するページが表示されます。
色を変更したいボタンを選択します。
右ナビからHTMLの編集をクリックしdivのclass要素を変更しました。TechPRESSではis-redをis-blueにすれば青いボタンになりますので、そのように変更。
ボタンが青くなりました。
完了をクリックします。初期画面に戻りました。
調子にのって緑色のボタンも作成してみました！
再度初期画面に戻ります。
右ナビを見るとGoogleアナリティクスと連携していないよ、という警告が出ていました。
言われた通りにTechPRESSのプロパティとリンクさせます。
Googleアナリティクスとリンクできたら、左下にある「テスト目標を追加」をクリックします。
今回は「どのボタンがクリックされたか」を知りたいので「アフィリエイトのA8.netへ飛んだ数が一番多いもの」がどれかを調べてみようと思います。
TechPRESSでは全てのリンククリックをGAのイベントに格納していますので、a8のリンクへ飛んだというイベント数を計測したいと思います。
カスタム目標を選択。
目標タイプをイベントにし「イベントアクション」が「https://px.a8.netで始まる」数を計測したいと思います。（TechPRESSではイベントアクションに飛び先のURLを記録しているため）
ここまででOptimizeの設定は一通り完了です。
次にOptimizeコードをサイトに埋めていきます。
初期画面右側に「オプティマイズをインストール」というリンクがありますので、こちらをクリックします。
導入方法が出てきました。こちらを開きながら、別タブでGoogleタグマネージャーを開いてください。
Googleタグマネージャーを利用していない方は、下記コードをサイト内に貼りましょう。
次はGoogleタグマネージャーの設定
全てのページでOptimizeタグが発火しても無駄なので、該当ページでのみ発火するようにします。
まずはトリガーの作成です。今回は下記のようなトリガーを作成しました。
→後日談：下記は間違っています！正しくはPage Pathを選択し、oisixではなく、/oisixと入力する必要があります。失礼しました。
つぎにタグの設置です。
設置したいコンテナを開き、タグ＞新規ボタンをクリックします。
タグタイプはGoogle Optimizeを選択します。
コンテナIDに先ほど表示されていた下記のGTM-XXXXXを入力します。
また、Googleアナリティクス設定はご自身のGAのトラッキングIDを選択します。
トリガーは先ほど作ったOisixトリガーを選択します。これで/oisixのページのみGoogle Optimizeタグが発火します。
また、OptimizeタグがGoogleアナリティクスのタグより前に発火するよう設定します。
Googleアナリティクスのタグを開き、下記タグの順序づけでGAタグが発火する前にOptimizeタグが発火するように設定してください。
「GAはOptimizeが配信できなかった場合や一時停止になっている場合には配信しないでください」には絶対にチェックを入れないでください。Googleアナリティクスタグが正常に配信されなくなります。
→後日談：下記で順序づけをしても良いのですが、そうすると「/oisixのページだけで発火せよ」というトリガーが効かず、全ページで発火することが確認されました。なのでOptimizeタグの「タグの優先度」を上げてコントロールするという方法が良いと思います。
それでは、この状態で公開します。
サイトに一つコードを追加します
最後に一つ。導入の説明ポップアップで次に進むと、もう一つコードを入れるよう指示があります。
それがページフリッカーを最小限に抑えるコード。こちらはGoogleタグマネージャーからの配信は推奨されておりませんので、全ページのheadのなるべく上。しかしDataLayerがあれば、それの下というちょっとややこしい位置に記載しましょう。
→後日談：このタグを入れるとテスト時にチラツキがなくなるのは良いのですが、表示がものすごく遅くなります。不要だと判断した場合は設置しないほうが良いかもしれません。
正しくインストールされているか確認
Optimizeの画面に戻ります。
右ナビに診断用のリンクがあります。そちらを押して最終確認してください。
問題があれば、その箇所を指摘してくれます。
下記ページに解決方法が載っていますので、該当のエラーを検索してみてください。
問題なければ下記のようになります。あとはスタートするだけです！
全て問題なければ「テストを開始」のボタンがクリックできる状態になります。こちらをクリックして、あとはしばらく放置してみましょう！
テスト中のページ
こちらになります。
確認ついでにOisixのお試しセットも注文お願いします。