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までお気軽にお問い合わせください

オススメの新着記事

無線機無くても空港に居なくても世界中の航空無線が聞ける その名もLiveATD.net 通常、航空無線を聞くためには高価なレシーバーが必要。しかしこのサイトならどこに居ても気軽に航空無線を聞くことができるんです。 https://www.liv...
Googleアナリティクスで会員・非会員を記録するには? お悩み相談を頂きました。「Googleアナリティクスで会員・非会員を記録するには?」です Googleアナリティクスで「会員か非会員か」の情報を格納したい場合があると思います。 しかし一体...
このゆるさが懐かしい!「全く役に立たないサイト」のリンク集 ここまで役に立たないWEB、久々に見ました。その名も「私を役立たずなサイトに連れていって」 PLEASEボタンをクリックしてください。あなたを役に立たないWEBサイトへ連れていきます。 ...
手書きスケッチをHTMLに自動変換できる時代がキタ! HTMLとCSSを手で組むの面倒ダナァ そんなため息がコーダーさんたちから聞こえてきそうです。もしくはモックを作るための前処理をしているプログラマさんかもしれません。 しかし、本日はそんな...
Googleアナリティクス自信ニキなら認定資格(GAIQ)を取ってみよう! Googleの公認テスト。なんど受講・受験しても無料! Google公認のGoogle アナリティクス個人認定資格(GAIQ)理解度テストというものがあります。Googleアナリティクスの理解度...
“いま”をリアルタイムで地図にプロットしてくれるサービス8選 電車も船も飛行機も、地震も衛星も風も雨もリアルタイム分かる時代です あの飛行機はどこにいくのか。あの船はなんと言う名前なのか。自分が乗っていた電車は、今どこにいるのか。今日はどこで地震があったのか、...
エックスサーバーのMySQLデータベース復元手数料が無料に 過去7日分のMySQLデータベースを無料で復元できる機能が提供された エックスサーバーではこれまでバックアップデータについてデータベース一個あたり5,400円の手数料が必要でした。 しかし20...
ブロガーもアフィリエイターにも役立つ無料WEB解析ツール10選 サイト運営で役に立つツールを集めました 実際に私たちが使っているツールです。本当は内緒にしておきたいものもありますけど、大公開。 Similarweb Similarweb ...
GAで「ページのどこがクリックされたのか」をイベントに全て記録する ページのどこがクリックされているか知りたくないですか? 例えば。あなたがPPCアフィリエイトをやるとします。そして有料広告で集客したとします。 しかし一向にCVが上がらない。こんなにトラフ...
Googleタグマネージャを利用して Googleアナリティクスを発火させる 管理は楽ですが少々コツがあります Googleアナリティクスを利用する場合、トラッキングコードをあなたのページにぺたりと貼れば、すぐに利用が可能です。一番簡単な方法です。ページビュー計測するだけ...
Googleアナリティクス動いてる?トラッキング出来ているかの確認方法 設定が間違っているのか?アクセスが無いのか!? どの記事が人気なのか、どこからアクセスがあるのかを簡単に知ることができるGoogleアナリティクス。 みなさん意気揚々と設定しますが、最初は...
余興でスライド投影必要なのにパワーポイントがない!そんな時には無料のLibreOfficeで プロジェクタ投影用のスライドを作らなければ。しかしパワーポイントがねぇ! とある私的な用事で、家でプロジェクタ投影用のスライドを作ることに。プレゼンは良く作成するので、ギリギリまで寝かしてしまっ...
ぱっと読むまとめ

コメントを残す

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

CAPTCHA