【GTM】ウェブサイト内画像のABテストをAnalyticsのイベントを使って実施する

2014年5月25日現在、Google Tag ManagerのWEBサイト側計測の場合、ABテスト(Google AnalyticsのExperiments)を利用することは出来ませんが、海外では複雑なスクリプトを組むことで実現している方もいます。

ただ、そのソースを見ていただければわかりますが、単純に実行されるタイミングをずらしているだけだったりします。古いAnalytics(ga.js)とカスタム変数あたりを利用したソースになっているので、新しいAnalytics(analytics.js)でまずは単純な画像のABテストを実施してみました。

ただし、以下のソースの場合は単純なイベントは取得出来たのですが、「Experiments」画面にデータが反映されませんでしたので、まだ改良が必要です。

まず、ABテストを実施するために乱数を発生させます。

それから、タグでこんなソースを書きます。

var chosenVariation = {{randomNumber}} % 2;

// this does an image replace
var image_variations = [
'images/original.png', 
'images/variation.png' 
]

var pageVariations = [
function() {
dataLayer.push({'event': 'setExpCustVar'});
exp_image = document.getElementById('abtest');
exp_image.src = image_variations[chosenVariation];
if(chosenVariation==0){
exp_image.parentNode.href='images/original_large.png'; 
}
}, // Original: Do nothing. This will render the default HTML.
function() { 
dataLayer.push({'event': 'setExpCustVar'});
exp_image = document.getElementById('abtest');
exp_image.src = image_variations[chosenVariation];
if(chosenVariation==1){
exp_image.parentNode.href='images/variation_large.png'; 
}
}
];

$(document).ready(
pageVariations[chosenVariation]
);

やっていることは単純なのですが、簡単に説明すると
「chosenVariation」には乱数を2で割った時の余り、つまり「0」か「1」が入ります。
で、ABテストを実施したい画像を「image_variations」に入れておき、ページにどちらの画像が表示されたかを計測するために「pageVariations」にもオリジナルが表示されるパターンと実験パターンが表示された場合の2種類を入れておきます。

最後に「pageVariations[chosenVariation]」で画像が表示されるというものです。
今回はHTMLページ自体はこのような形で空にしておきました。

オリジナル画像が最初一瞬写ってから実験画像に置き換わるような動きがあまり好ましくないと思ったからです。
ここまで出来てしまえば、あとはイベントを拾うだけです。
「pageVariations」に、どちらもdataLayer.pushの「イベント」として「setExpCustVar」を入れました。

で、先ほどのタグのソースの「chosenVarition」をグローバル変数として定義しましたので、Google Tag Managerのマクロで値が取得できます。

「chosenVariation」の値をGTMの変数「jsGlobalVariable」に入れておきます。
次にGTMのルックアップテーブルを使って、その変数の値が「0」だったら「original」、「1」だったら「experiment1」が返るように設定をします

あとはイベントを拾うだけです。

イベントのアクションにルックアップテーブルで変換した文字列を集計できるようにします。

このあたりも、もっと応用すれば十分に利用できますね。
ちなみに今回はタグの発火条件は単純にURLのみにしています。それは「event = gtm.js」のタイミングで発火するため、その他のgtm.domやgtm.loadのタイミングで発火させる必要がないからです。

まだ、コンテンツ量が多くなると「(document).ready」回りがちゃんと動くか心配ですが、少し様子見です。

GTMでABテストが普通に実装されるのは、近い未来だと思っていますが、どうせ統計的な処理はローカルでやるのであれば、単純なイベントで取得しても良いような気がします。

あとはcreateElementとsetAttributeを使って、画像のクリック数なんかを取得してもいいかもしれません。

【関連】
Google Tag Managerに関する利用方法まとめ