CTRはどっちが高い?Google Optimizeを使ってA/Bテストをやってみよう

投稿者: | 2018年9月6日
ぱっと読むまとめ
ブログ構築お任せください!
・この記事のようなブログを作成したい
・TechPRESSのようなブログを作成したい
・無料ブログではなく自分のドメインでブログを構築したい
・ブログだけでなく、特殊な機能を設置したい
・Wordpressで構築したいけど時間がない
・サーバーの運用もお任せしたい

そんなあなたにTechPRESSのブログ構築サービスは如何ですか?
簡単なブログ設置であれば最短1日で独自ドメイン+SSL+ブログをご用意します。

料金はミニマム設定で25,000円から(ドメイン代は実費を頂きます)

info@techpress.jpまでお気軽にお問い合わせください

ぱっと読むまとめ

Google Tag ManagerとGoogle Optimizeを連携してA/Bテストを実施してみよう

赤と青。どちらのボタンがクリックされる?

そもそもボタンとテキストリンクのどちらがCTR高い?

リンク色は青がいい?それとも赤の方がクリックされる?

そんな事を実際にサイト上で試してしまうA/Bテスト。Google Optimizeを利用すれば、簡単にテストすることができます。TechPRESSではアフィリエイト記事のボタンの色を変えて、何色が一番CTR高いのか試してみました。

Google Optimizeの設定をします

Chromeに下記エクステンションをインストールしてください。

インストールできたらOptimizeのページにアクセスします。

テストの作成をクリックします。テストを実施するURLを入力し、A/Bテストを選択しました。

Google Optimize テストの作成

下記画面になります。

まずは左上の「スケジュールを作成」から期間を設定します。

Google Optimize 基本画面

テスト期間を入力します。最低でも1ヶ月ほど実施するのが良いでしょう。

Google Optimize テストスケジュール画面

また初期画面に戻ります。

次はパターンを設定します。「パターンを作成」をクリックしてください。

 

A/Bテストを実施するページが表示されます。

Google Optimize A/Bテスト設定画面

色を変更したいボタンを選択します。

Google Optimize 変更したいボタンを選択

右ナビからHTMLの編集をクリックしdivのclass要素を変更しました。TechPRESSではis-redをis-blueにすれば青いボタンになりますので、そのように変更。

Google Optimize HTMLの編集

ボタンが青くなりました。

Google Optimize ボタンの色変更

完了をクリックします。初期画面に戻りました。

Google Optimize 初期画面

 

調子にのって緑色のボタンも作成してみました!

Google Optimize 緑ボタンを作成

 

 

再度初期画面に戻ります。

右ナビを見るとGoogleアナリティクスと連携していないよ、という警告が出ていました。

言われた通りにTechPRESSのプロパティとリンクさせます。

Google Optimize チェックリスト Google Optimize と GAをリンク

Googleアナリティクスとリンクできたら、左下にある「テスト目標を追加」をクリックします。

今回は「どのボタンがクリックされたか」を知りたいので「アフィリエイトのA8.netへ飛んだ数が一番多いもの」がどれかを調べてみようと思います。

TechPRESSでは全てのリンククリックをGAのイベントに格納していますので、a8のリンクへ飛んだというイベント数を計測したいと思います。

カスタム目標を選択。

Google Optimizeの目標を設定

目標タイプをイベントにし「イベントアクション」が「https://px.a8.netで始まる」数を計測したいと思います。(TechPRESSではイベントアクションに飛び先のURLを記録しているため)

イベントを目標に設定

ここまででOptimizeの設定は一通り完了です。

次にOptimizeコードをサイトに埋めていきます。

初期画面右側に「オプティマイズをインストール」というリンクがありますので、こちらをクリックします。

導入方法が出てきました。こちらを開きながら、別タブでGoogleタグマネージャーを開いてください。

Googleタグマネージャーを利用していない方は、下記コードをサイト内に貼りましょう。

オプティマイズの導入方法

次はGoogleタグマネージャーの設定

全てのページでOptimizeタグが発火しても無駄なので、該当ページでのみ発火するようにします。

まずはトリガーの作成です。今回は下記のようなトリガーを作成しました。

→後日談:下記は間違っています!正しくはPage Pathを選択し、oisixではなく、/oisixと入力する必要があります。失礼しました。

Googleタグマネージャでトリガーの作成

つぎにタグの設置です。

設置したいコンテナを開き、タグ>新規ボタンをクリックします。

Googleタグマネーキャでタグの作成

タグタイプはGoogle Optimizeを選択します。

コンテナIDに先ほど表示されていた下記のGTM-XXXXXを入力します。

また、Googleアナリティクス設定はご自身のGAのトラッキングIDを選択します。

オプティマイズタグの設定

トリガーは先ほど作ったOisixトリガーを選択します。これで/oisixのページのみGoogle Optimizeタグが発火します。

また、OptimizeタグがGoogleアナリティクスのタグより前に発火するよう設定します。

Googleアナリティクスのタグを開き、下記タグの順序づけでGAタグが発火する前にOptimizeタグが発火するように設定してください。

「GAはOptimizeが配信できなかった場合や一時停止になっている場合には配信しないでください」には絶対にチェックを入れないでください。Googleアナリティクスタグが正常に配信されなくなります。

→後日談:下記で順序づけをしても良いのですが、そうすると「/oisixのページだけで発火せよ」というトリガーが効かず、全ページで発火することが確認されました。なのでOptimizeタグの「タグの優先度」を上げてコントロールするという方法が良いと思います。

GAタグの前にOptimizeタグを発火させる

それでは、この状態で公開します。

サイトに一つコードを追加します

最後に一つ。導入の説明ポップアップで次に進むと、もう一つコードを入れるよう指示があります。

それがページフリッカーを最小限に抑えるコード。こちらはGoogleタグマネージャーからの配信は推奨されておりませんので、全ページのheadのなるべく上。しかしDataLayerがあれば、それの下というちょっとややこしい位置に記載しましょう。

→後日談:このタグを入れるとテスト時にチラツキがなくなるのは良いのですが、表示がものすごく遅くなります。不要だと判断した場合は設置しないほうが良いかもしれません。

フリッカーを抑えるタグ

正しくインストールされているか確認

Optimizeの画面に戻ります。

右ナビに診断用のリンクがあります。そちらを押して最終確認してください。

問題があれば、その箇所を指摘してくれます。

下記ページに解決方法が載っていますので、該当のエラーを検索してみてください。

問題なければ下記のようになります。あとはスタートするだけです!

全て問題なければ「テストを開始」のボタンがクリックできる状態になります。こちらをクリックして、あとはしばらく放置してみましょう!

テスト中のページ

こちらになります。

確認ついでにOisixのお試しセットも注文お願いします。

 

ブログ構築お任せください!
・この記事のようなブログを作成したい
・TechPRESSのようなブログを作成したい
・無料ブログではなく自分のドメインでブログを構築したい
・ブログだけでなく、特殊な機能を設置したい
・Wordpressで構築したいけど時間がない
・サーバーの運用もお任せしたい

そんなあなたにTechPRESSのブログ構築サービスは如何ですか?
簡単なブログ設置であれば最短1日で独自ドメイン+SSL+ブログをご用意します。

料金はミニマム設定で25,000円から(ドメイン代は実費を頂きます)

info@techpress.jpまでお気軽にお問い合わせください
ぱっと読むまとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA