Googleアナリティクス応用:GTMで日ごとに変えるバナーA/Bテスト

GTMでバナーだ仕分け

A/Bテストをしたくともアクセス数があまりないからと諦めていませんか?

こんにちは、カグア!です。Googleタグマネージャ(以下GTM)をつかったバナーの出し分けを試しましたので共有します。

自動で出し分けられますので、便利かと思います。

関連記事
>>Googleアナリティクスでページ内のA/Bテストをする方法
>>A/Bテストの失敗事例、テストすること自体が有効という思い込み

バナーを日ごとに出しわける

Skyseeker original calendar.
Photo:license by skyseeker

A/Bテストをするとき、ある程度アクセス数があれば、数日のうちにCVがそれなりに溜まってきて判定もしやすい、というのはあるかもしれません。

いっぽうで、アクセス数が少ないと期間で出し分けるA/Bテストなどをやられることもあるのではないでしょうか。ただ、忘れちゃうこともありそうで怖いものです。

そこで、今回GTMを使って、偶数日と奇数日とでバナーを出し分けてみました。

予め 0.jpg という画像と 1.jpg という画像を作って適当なフォルダにアップしておきます。

GTMでカスタムHTMLを作成

トリガーでやる方法もあるかと思いますが、とりあえずカスタムHTMLで偶数日奇数日を判定して、id=”abtest” と指定したimgタグの画像srcを差し替える、という方法を試しました。

まず変数。

function(){
var d0 = new Date();
var d1 = d0.getDate();
if (d1%2 === 1) { var amari = "奇数日"; }
else{ var amari = "偶数日"; }
return amari;
}

タグは以下の通り。トリガーは、すべてのページなのですが「DOMレディ」を使うところがミソです。そうすれば、上記idのsrcを差し替えても大丈夫です。

<script type="text/javascript">
  var a = {{偶数奇数日}};
  if (a == '奇数日'){
    var b = document.getElementById('abtestua').src = "//www.kagua.biz/0.jpg"; //青
  }else{
    var b = document.getElementById('abtestua').src = "//www.kagua.biz/1.jpg"; //赤
  }
</script>

いちおう、想定通り差し替わっている感じです。見事に「交互」ですね。
表示

しかも何といっても無料なのが良いですね。

A/Bテストの精度は別問題

で、気になるテスト結果ですが、はいドン!

計算指標

今回悩んだのは、ページビューとクリック数をどう紐付けようかということ。理論上は難しいんですよね、バナークリックした瞬間にはもうジャンプしてるわけですから。

なので、とりあえず普段はLPになることが多いページをリンク先にして、非閲覧からのPVが増えていればいいかな、とお膳立てしました。

非閲覧数を知るには、Googleアナリティクスの計算指標を使えば簡単に作れます。アナリティクス設定>ビュー設定>計算指標 です。

{{ページビュー数}}-{{閲覧開始数}}

としますと、非閲覧開始数がわかりますので、まあバナー貢献度の目安としようかなと。ページビュー数は結構差が出てますね、

で、偶然にも、それぞれの総ページビュー数の差が、0.06%しかない!という見事に2分した形(これもバナー表示ページなのかという判定も必要なのですが)で、まあ確かに赤のほうが押されるのかなとも。

デバイスごとに見てみるとこんな感じ。後者のバナーでSPが貢献している感じですね。PCは閲覧数こそ違いますが、価値はそれほど変わらない感じ。
デバイス

まあ、テストの仕組み自体がトライアルなので、あくまで参考値ですが、ページ内のパーツをGoogleタグマネージャを使って出しわけられて、ここまで成果が異なることがわかる、というのはほんと面白いですね。

ちなみに、偶数日・奇数日の情報を、カスタムディメンションに入れることでセグメント分けて分析しています。

PV数とページの価値から計算していいのかわかりませんが、SPはだいたい3割くらいアップしたって考えていいのかな。だとすると凄いなー。

もっとカジュアルにA/Bテストしたい

cube fingers
Photo:license by orphanjones

なんかイベントトラッキングでラベルにURL入れて、なども思ったのですが、それでも非クリックも判別しないといけないので、やっぱりおとなしくウェブテストをから見るのが賢そうです。あ、でもウェブテストは同期処理だからダメなのか?

GoogleアナリティクスのウェブテストとGTMだけで簡単に、バナーA/Bテストが実装できればいいなあ。
>>Googleアナリティクス応用:ページ内A/Bテストをする方法

どうしてもJSのタイミングとかいろいろあるので、検証してみてですがぼちぼちチャレンジしてみます。

目標としては、A/Bテストしたい画像や文言にこのidふってくださいー、画像やテキストここにパターン分入れてくださいー・・・で、

GTM、トリガーオン!

くらいにしたいんですけどね。↑これがやりたいだけだw(o´・∀・`o)

ワールドトリガー 1 (ジャンプコミックスDIGITAL) 電子書籍: 葦原大介

ワールドトリガー 1 (ジャンプコミックスDIGITAL) 電子書籍: 葦原大介: Kindleストア
Amazonで詳しく見る

面白いですよ!

A/Bテストおすすめ本リンク

いまは、いろいろとA/Bテスト本が出てますね、知らなかった。野口さんすごいなー、こういうのも書いてるのか。

A/Bテストの教科書 | 野口 竜司

A/Bテストの教科書 | 野口 竜司 | 本 | Amazon.co.jp
Amazonで詳しく見る

部長、その勘はズレてます! 「A/Bテスト」最強のウェブマーケティングツールで会社の意思決定が変わる | ダン シロカー, ピート クーメン, 栗木 さつき

部長、その勘はズレてます! 「A/Bテスト」最強のウェブマーケティングツールで会社の意思決定が変わる | ダン シロカー, ピート クーメン, 栗木 さつき | 本 | Amazon.co.jp
Amazonで詳しく見る

数学女子 智香が教える 仕事で数字を使うって、こういうことです。 | 深沢 真太郎

数学女子 智香が教える 仕事で数字を使うって、こういうことです。 | 深沢 真太郎 | 本 | Amazon.co.jp
Amazonで詳しく見る

ランディングページ・デザインメソッド WEB制作のプロが教えるLPの考え方、設計、コーディング、コンテンツ制作ガイド | 株式会社ポストスケイプ

ランディングページ・デザインメソッド WEB制作のプロが教えるLPの考え方、設計、コーディング、コンテンツ制作ガイド | 株式会社ポストスケイプ | 本 | Amazon.co.jp
Amazonで詳しく見る

まとめ

・GTMとDOM制御で出し分けは簡単にできる。
・アクセス数の少ないサイトでも使えそう。
・CVとどう紐付けるかが課題。

まあ、課題は残りましたが、GTMで出し分けが簡単にできることがわかって良かったです。

ウェブテストを組み入れるのが楽しみになってきました。

・ ・ ・ ・ ・

>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

曜日とかのほうがいいのかもだけど。


プロが教えるいちばん詳しいGoogle アナリティクス 4 | NRIネットコム株式会社, 神崎健太