ABalytics.js + Google Analyticsを使ったABテスト

ABalytics.js + Google Analyticsを使ったABテスト

こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。
今回は、ABalytics.jsを使ったABテストについて書きたいと思います。

ABテストは、アプリケーションのUIを改善していく手がかりとしてとても有効です。
しかし、いざテスト実施しようとするとABテストツールは高額なものが多くコスト面で問題になることがあります。 今回は、ABalytics.js + Google Analyticsを使い無料でABテストが出来る方法をご紹介します。

ABalytics.jsとは

ABalytics.js？誤字じゃないの？と思われるかもしれませんが、誤字ではなくABalytics.jsというピュアなJavaScriptで書かれたオープンソースのABテストライブラリのことです。
htmlやJavaScriptの知識は必要になりますが、シンプルな使い方が可能でカスタマイズして使うこともできます。
ABalytics.jsは、Google Analyticsと連携しており、管理画面からテスト結果を確認するのでGoogle Analyticsの導入は必須です。

使い方

それでは、簡単な使い方からみていきましょう。 まずexpress.jsのインストールしましょう。Express.jsについてはこちらの記事をご覧ください。index.ejsを作成してabalytics.jsをロードします。あとで使うのでbootstrapをCDNからロードします。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/javascripts/ab_test.js"></script>

次にABalytics.jsの設定を記述するjsファイルを作成します。名前は任意で、ここではab_test.jsとします。 まずはじめにトラッキングコードを記述します。トラッキングコードは、Google Analyticsの管理画面からプロパティを作成すると自動的に生成されます。

また、ビューの設定から登録完了画面などのABテストの結果を判定するための「目標」の設定が必要になります。

次にab_test.jsに戻り、上で取得したトラッキングコードを最上部に記述します。

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-XXXXX-1', 'sample');
  ga('send', 'pageview');
  

ABalyticsを初期化して、ABテストの設定を記述していきます。 ABalytics.jsはブラウザのcookieで、A案とB案の出し分けを判断しています。 下記コードにある「variant」は、cookieの名前の末尾つき「ABalytics_variant」ということになります。こちらも任意の文字を設定してください。

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
ga('create', 'UA-XXXXX-1', 'sample');
ga('send', 'pageview');
  
ABalytics.init({
    variant: [
    {
        name: 'variant1_name',
        "lead": "variant1"
    },
    {
        name: 'variant2_name',
        "lead": "variant2"
    }
]},1);

ga('send', 'pageview');

variantのプロパティにあるname: 'variant1_name'は、 Google Analyticsの管理画面でテスト結果を検証する際に必要になります。こちらも任意の文字が設定できます。 "lead": "variant1"についてですが、"lead"はテスト対象となるhtmlのクラス名、右側の"variant1"はABalytics.jsで変更される要素です。 数字の1は、カスタムディメンションのindex番号になります。事前に以下の画面からカスタムディメンションを作成して設定します。ちなみに、カスタムディメンションの最大数は20個（プレミアム アカウントの場合は 200 個）です。

index.ejsに戻り、bodyタグの中に以下を記述します。

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">ABalytics.js example</a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="starter-template">
        <div class="lead">
            This content will be replaced by ABalytics
        </div>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
        ABalytics.applyHtml();
    };
</script>

ABalytics.jsによって、leadクラス以下のテキストが”variant1”と”variant2”かのどちらかに50%の確率でランダムに置き換わります。

<div class="lead">
    This content will be replaced by ABalytics
</div>

まず確認すべきことは、chromeのデベロッパーツールを開きcookieのABalytics_variantのvalueが0だった場合variant1と表示されているか、valueが1だった場合variant2と表示されているかを確認しましょう。 cookieのvalueを変更してみて確認してみると良いと思います。

Google Analyticsの管理画面で、ABテストの結果を確認します。設置してから１日ぐらい経ってから確認してみると良いでしょう。 場所は、少しわかりにくいですが、左のナビゲーションからカスタム→ユーザー定義と進みます。 右カラムに下記のように (not set)というリンクがあるのでクリックします。

「セカンダリディメンション」というプルダウンメニューから、設定したカスタムディメンション名をクリックすると、ABテストの結果が表示されます。

まとめ

ABalytics.jsは、テキストだけではなく画像やDOM要素などのテストもカスタマイズすれば可能です。
例えば、複雑なDOM要素のテストは、cookieの値によって表示と非表示を切りかえることで実現できます。スマホ画面とPC画面で別々のテストを実施することもできます。
導入をご検討してみてはいかがでしょう。 アスタミューゼでは、エンジニア・デザイナーを募集中です。ご興味のある方は遠慮なく採用サイトからご応募ください。お待ちしています。

マクロって言ったり、関数って言ったり、Functionだったりする何か。~Google Spread Sheet~

お久しぶりでございます。scalaでバックエンドを開発しているaxtstar(@axtstart)でございます。

今回は、弊社の勉強会で話したネタを少しアレンジして記載します。

Google Spread Sheet

前々回のエントリーでExcelマクロには○○とか話をしていてナンですが、 業務では結構G Suite上のGoogle Spread Sheetなどを通して、仕様やデータを検証することも多く、 ローカルでのExcelでの作業より、G Suite上での作業の方が徐々に多くなってきています。

GoogleSpreadSheetを使った業務改善の話はこちらのエントリーでも 取り上げていますが、ここではもっとプリミティブなtips的なSpreadSheetの関数を紹介してみたいと思います。

ImportRange

こちらは他のSpreadSheetのデータを参照することができる関数です。

元のSheetを汚したくない場合などによく利用しています。 データのレンジ範囲をセル上に書けば、その範囲を全部拾って来ます。 Excelにはこのような、記載したセル以外に値を展開する関数というのはみたことがありませんでした。

例えば、ターゲットのスプレッドシートが下記のようなURLの場合、

https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxx/

対象スプレッドシートのスプレッドキー（上記の場合：xxxxxxxxxxxxxxxxx）とシート・レンジを指定します。

=ImportRange("xxxxxxxxxxxxxxxxx","シート6!A1:F12")

１度だけ、アクセスの許可をする必要があります。

なお、範囲上に展開する関数は、他のデータが展開先に存在する場合、エラーになります。

すると、下記のように、C4:H15の範囲にシート6!A1:F12の内容が展開されます。

上記を日直の持ち回り表というようにみていただくと、 追加でExcelライクな関数を設定することで次の日直を自動で算出することが可能です。 （この場合はGさんが次の日直） まぁ少し例としては微妙ですが。。。

SpreadSheet API

またGoogleスプレッドシートはAPIからアクセスすることができますので、 メッセージに応じて、slack上に日直を表示するというような、botを作ることもできます。

こちらにslack botの scala で実装したサンプルを上げておきました。

スクリプトエディタ

また、ほんのちょっとした処理をスクリプトエディタで記載するのもいい手です。

例えば、文字列をURLエンコードする関数は、存在しないのですが、 スクリプトエディタだと↓簡単に記述できます。

下記のようにスクリプトエディタを開き、

こちらに

下記を張り付ければOK。

function encode(value) {
  return encodeURIComponent(value);
}

function decode(value) {
  return decodeURIComponent(value);
}

スクリプトエディタ*1は、JavaScript1.6をBaseにつくられており、 Array、Date、RegExp、MathといったObjectが利用可能です。 ただし、Googleのサーバで動作するため、Window APIは利用不可。

ImportXML

URLを指定することでXMLをパースして取得することができます。 実際にはHTMLでもかなり取得してくれます。 ただ、認証など入力することはできないため、ログインが必要なデータは取得できないようです。

例えば下記で、本ブログのキーワードタグを取得できます。

=ImportXML("http://lab.astamuse.co.jp/","//ul[@class='hatena-urllist']")

こちらを先ほど作成したencode関数と下記関数で、キーワードタグに対して

　

関数	用途 例
Transpose	転置 =Transpose(ImportXML("http://lab.astamuse.co.jp/","//ul[@class='hatena-urllist']"))
REGEXEXTRACT	正規表現によるデータの取得 =REGEXEXTRACT(A2,"( \([1-9]+\))")
Substitute	文字列置換 =Substitute(A2,B2,"")
encode	URLエンコード。スクリプトエディタで作成した関数 =encode(C3)

URLを↓下記のように生成できます。

さらに生成したURLにImportXmlを適用し、タイトルを取得してみました↓

ただあまり処理数が多いと以下のようにエラーになります。

今回はこの辺で。

最後に

いかがでしたか？ローカルで動作するExcelとは違った機能を紹介してみました。

またここでは紹介はしなかったですが、Gmail等のGoogleのサービスへの連携も比較的簡単にできるため重宝しています。

アスタミューゼでは現在、エンジニア・デザイナーを募集中です。 興味のある方はぜひ 採用サイト からご応募ください。

参考にしたサイトなど

Google スプレッドシートの関数リスト

Google Apps Script ドキュメント

Google API Client Libraries JAVA編

*1:正確にはGoogle Apps Script

リモートワーク始めました。

はじめまして、こんにちは、開発部のYanagita@宮崎です。

巡り巡って4回目の投稿となります。
前回まではPlay Frameworkについて書いていて今回もその続きをと考えてましたが、
ブログのタイトルの通り業務スタイルが変更になったので今回はそのことについて書きたいと思います。
とは言ったもののリモートワーク(在宅勤務)を始めたのは今月頭からので、 まだ営業日的には15日程しか経っていないのであまりためになる話はできませんが、 今回はリモートワークを始めるまでと実際に始めてみてについて書いてみます。

リモートワークを始める前に行ったこと

「明日からリモートワーク始めます！」
と突然宣言してもできるわけないのは皆さん御存知の通りで、会社という組織に所属している以上会社の承認を貰う必要があります。
弊社には既に在宅勤務規定(←これは会社によって有ったり無かったりするので確認が必要です)が存在していたので条件を確認し、 上長相談を行いました。まぁ当然ですが、そこですぐOKが出るわけがなく役員判断待ちとなりました。

そこから私のウズウズした日々が始まるわけですが、
それと同時に実際にリモートワークを開始した想定で仕事スタイルの変更と周辺の整備に取り掛かりました。
まずは可能な限り自席を離れて作業を行なうようにし、チャットベースでやり取りが行えるよう訓練的なものを始めました。
(当時はよく休憩行くやつだなと思われたはず・・・)
また、開発メンバは運用も兼務しているため、マーケティングや企画のチームからよく運用に関する依頼が来るわけですが、 その依頼フローが口頭ベースで来ることが多かったので、そこを全てチケット化するよう対応をお願いしました。
その後、役員承認が出て全体周知が済んだ後は、メンバに協力頂いて社内に居ながらビデオチャットやヴォイスチャットなどの検証を行いました。

やったことはほんの些細なことなんですが、リモートワークに支障なく移れたのは間違いなかったので効果はあったと思っています。

リモートワークの一日

じゃ、実際にリモートワークを始めてみてですが、一日を見るとざっとこんな感じです。 ※ 私の場合です

時刻	業務内容
09:45 〜 10:00	上司に業務開始メール Webで出勤時刻を打刻 Slackで業務開始を部署メンバに連絡
10:00 〜 10:30	ビデオチャットで全体週次定例、チームミーティングに参加
11:00 〜 11:30	ビデオチャットで開発部ミーティングに参加
11:30 〜 13:00	作業(運用や開発)
13:00 〜 14:00	お昼休憩
14:00 〜 19:00	作業、打ち合わせはビデオチャットで参加
19:00 〜	現場に居ないので退社前に退社準備中であることをチームメンバーに通知 上司にメールで作業報告書を提出 Webで退社時刻を打刻 Slackで業務終了を部署メンバに連絡

だいぶざっくりなんですが・・・
見て頂いた感じいかがでしょう？私自身リモートワーク前とあまり変わっていないですし、皆さんともあまり変わらない業務内容となっていると思います。
（実際、リリース作業や運用作業も自宅から行っています。） オフィスにいないことで報告周りがリモートワーク前よりすこし増えましたが、打ち合わせなどはビデオチャットを活用することで個人的に影響は少ないかなと思っています。

リモートワークの環境

リモートワークだと顔を直接合わせて話すことがなくなるので、コミュニケーションのとり方がとても重要となってきます。
ここ数日でよく使っているコミュニケーションツールを下に挙げてます。

■ チャットツール

• Slack(https://slack.com/)
  → 開発部に限らず他の部署とのやり取りも全てSlackで行っています。
  ChatOpsも対応をすすめているので、わざわざVPNを繋がなくてもCIを回すこともできます。

■ ビデオチャット

• Slack
  → チャット機能だけじゃなく、ヴォイスチャット機能もあります。
  1対1で話したいときなどはSlackでよくやり取りを行います。

• Google Hangout(https://hangouts.google.com/?hl=ja)
  → 複数名でミーティングする場合に使用しています。
  画面共有機能もあるのでドキュメントの読み合わせなど便利です。

• Skype(https://www.skype.com/ja/)
  → 週次定例や月次定例など社内全体のミーティングではSkypeが良く使います。
  これは以前Skypeを使用していた経緯からですが、いずれGoogle Hangoutに移行すると思います。

このあたりはサービスが充実しているのでどれを採用しても問題ないと思います。
ただ私が使用した感じではツールによって若干の得意不得意があるようなので(作業場所のネットワーク環境にもよるのかも)、 これからリモートワークを検討される方はいろいろ試されることをお薦めします。
また、PC付属のマイクは1対1のやり取りでは特に問題にならないのですが、打ち合わせなどで複数人対1となった場合、PCから離れている方の声が小さかったり途切れてしまうケースが良くあるので、 会議などではWeb会議用のマイクを使用されたほうが遠くの方の声もはっきり聞こえるので準備してもらった方が良いです。

それから、これは私が見落としていたところですが、 リモートワーク開始と合わせて作業場所を移される方(私は地元に移った訳ですが)は、回線の引き込み工事が遅れたり、速度が思ったほど出なかったりするケースがあるので、事前にネットへの接続方法を検討されておくことをお薦めします。

リモートワークを始めてわかったこと

やはり一番重要だったのは、リモートワークを理解して協力してもらえる上司や同僚の存在が必要だったことです。
オフィスにいるメンバはこれまで対面で行っていたやり取りができなくなり、ちょっとしたことでもチャットやビデオチャットでのやり取りが必要になり手間が発生することになります。
ミーティングなども繋いで貰わないと当然参加もできません。この辺りを対応して頂いているメンバには非常に感謝しています。

最後に

今回は私は家族の都合によりリモートワークとなりました。
所属部署では過去に前例がないもののリモートワークを了承してくれた会社と協力して頂けている上司、同僚のメンバには本当感謝しており、すごく恵まれているなと最近良く感じています。
上司からはリモートワーク継続のキーは、リモートワーク以前と変わらないパフォーマンスと存在感を発揮することと言われているので、 しばらくはこの二つをどう実現するか課題となります。次回はこの辺りをどう実現したか書ければと思います。

弊社では引き続きエンジニア・デザイナーの募集を続けています。
気になる方は下からご応募をお願いします！