思うところがあってGoogle Analyticsを使ったABテスト方法をおさらいしてみた。

TL;DR

やること

1つのviewでABテストをする。

設定

なんにせよ、まずはGAを。

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-613309-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-613309-1');
</script>

GAでABテストを作り、テストID(experiment_id)を取得する

GAでconvertionとするページを登録しておく

variation(パターン or オリジナル)を取得する

<script src="//www.google-analytics.com/cx/api.js?experiment=[テストID]"></script>


let variation = cxApi.chooseVariation();
console.log("variation", variation); // オリジナル:0 or パターン:1

TODO

今回はJSで取得したが、サーバサイドで取得したい場合は予めcookieに入れておいてそれをみる？

表示を分ける

Vueを使ってみた。

var app = new Vue({
  el: '#app',
  data: {
    isPattern: variation == 1
  }
});

<div id="app" class="main container">
    <h1>欲しいですか？</h1>
    <a v-if="!isPattern" href="conversion.html" class="btn btn-danger btn-lg" role="button">5000兆円(Original)</a>
    <a v-if="isPattern" href="conversion.html" class="btn btn-primary btn-lg" role="button">お年玉(A)</a>
    <a href="drop.html" class="btn btn-secondary btn-lg" role="button">いらない</a>
</div>