Yahoo! MOBILE INSIGHTをご存知でしょうか？
ヤフー株式会社が提供するスマートフォンアプリ用マーケティングツールです。
アプリ広告の効果測定やアクセス解析に広く用いられています。

この度Monacaと連携したことで、Monacaアプリへの導入が簡単になりました。そこで今回はサインアップ画面を持つアプリを想定して、ユーザーがサインアップするとその情報がYahoo! MOBILE INSIGHTに飛ばされる、といった仕組みを作ってみたいと思います。

ではさっそくはじめていきます！

前準備　

Yahoo! MOBILE INSIGHTの設定

アカウント登録

画像1

まず、こちらのサイトからYahoo! MOBILE INSIGHTの無料トライアルの登録を行います。登録にはYahoo!JAPAN IDが必要です。

画像2
　
登録が済むと以下のダッシュボードが見れるようになります。

画像3

Yahoo! MOBILE INSIGHTへの新規アプリ追加

Yahoo! MOBILE INSIGHTのツールで「アプリ一覧」タブをクリックします。そして新規アプリ追加ボタンから必要な情報を記入します。

画像4

今回はiOSで試しているためバンドルIDはAppleに登録しているものを使用します。Androidの場合も適宜設定が必要です。
ストアのURLは適当でも大丈夫です。URLスキームの部分には任意の文字列を記入しますが、のちほどMonaca側での設定でも使用するので控えておきましょう。

入力が終わったら「新規作成する」をクリックしてください。

これで無事準備が整いました。実装に入りましょう。

今回つくるもの

画像５

簡単なサインアップ画面を想定しています。このページからサインアップすると性別や年齢などの情報がYahoo! MOBILE INSIGHTへ送信されます。

先に完成品のソースコードを確認したい方はこちらからどうぞ。

実装

新規プロジェクトを「Onsen UI V2 JS Minimum」テンプレートを使って作成していきます。

プラグインのインストール

まずはjQueryとYahoo! MOBILE INSIGHTのプラグインのインストールを行います。

「設定」 > 「JS/CSSコンポーネントの追加と削除」に進み、jQueryのインストールをします。
さらに「設定」->「Cordovaプラグイン管理」に遷移してください。
「利用可能なプラグイン」に「Yahoo! MOBILE INSIGHT」があるので有効にしてください。

有効化後、Yahoo! MOBILE INSIGHTプラグインの「設定」からインストールパラメータを設定してください。
このパラメータはYahoo! MOBILE INSIGHTへの新規アプリ追加を行った際にURLスキームの欄に入力した文字列になります。

画像7

画面作成

それでは画面を作成していきましょう。
まずは index.htmlのbodyタグ内に以下のコードを記述します。
今回作っている画面はOnsenUI サンプルパターンのSignUp画面を元にアレンジしています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<ons-page>
  <ons-toolbar>
    <div class="center">Sign up</div>
  </ons-toolbar>
 
  <div class="formarea">
    <div class="form-row">
 
    </div>
 
    <div class="form-row">
 
    </div>
 
    <div class="form-row">
 
    </div>
 
    <div class="form-row">
 
    </div>
 
    <div class="form-row form-row--radio">
      <label class="radio-button radio-button--list-item">
 
        <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
        Male
      </label>
    </div>
 
    <div class="form-row form-row--radio">
      <label class="radio-button radio-button--list-item">
 
        <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
         Female
      </label>
    </div>
 
    <div class="vspc form-row">
      Sign up
    </div>
  </div>
 
</ons-page>
 

するとこのような画面になります。
画像8

CSSの作成

画面の構成ができたのでCSSを適用してデザインを整えましょう！

css/style.cssに以下のコードを記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.form-row {
  margin: 4px;
}
 
.width-full {
  width: 100%;
}
 
.width-half {
  width: 48%;
}
 
.lucent {
  opacity: 0.4;
}
 
.note {
  margin: 12px 8px;
  font-size: 13px;
}
 
.vspc {
  margin-top: 20px;
}
 
.formarea {
  width: 90%;
  margin: 50px auto 0px auto;
}
 
.form-row--radio {
  padding: 8px 8px 8px 0;
  color: #666;
}
 
input[type=text],
input[type=password],
input[type=radio] {
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}
 

画像9

これで画面が完成しました。
プレビューボタンから確認してみましょう。

データ送信スクリプト作成

いよいよYahoo! MOBILE INSIGHTにデータを飛ばす部分を作成していきます。

scriptタグの中に以下のコードを記述することでMonacaで作成したアプリからYahoo! MOBILE INSIGHTへセッションデータが送信されます。

AppIDとAppSecretはYahoo! MOBILE INSIGHT ダッシュボードのアプリ一覧画面で確認できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ons.ready(function() {
 
  //デバッグモード (リリース時はfalseにしてください。)
  MobileInsight.setDebug(true);
 
　// Yahoo! MOBILE INSIGHT ダッシュボードのアプリ一覧画面で確認し、書き換えてください。
  var yourAppID = 'YOUR_APP_ID';
  var yourAppSecre = 'YOUR_APP_SECRET';
 
  //セッションのトラック
  MobileInsight.startTrack(
    yourAppID,    
    yourAppSecre,
    function(success){
        console.log(success)
    },
    function(error) {
      console.log(error);
    }
  );
 
});
 
 

引き続きSign upボタン押下時に入力データを送信できるよう ons.ready の中にコードを追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
ons.ready(function() {
 
  //セッションのトラック
  //.........
  //.........
 
  //入力データ送信
  $('#signUpBtn').on('click', function(e){
    e.preventDefault();
 
    var gender = $('input[name="gender"]:checked').val()=='Male'?
        MobileInsightUserGenderType.Male:
        MobileInsightUserGenderType.Female;
    var birthYear = $('input[name="birthYear"]').val();
    // 今回はメールアドレスをカスタマーIDとしています。
    var customerID =  $('input[name="email"]').val();
    // 任意の追加要素。今回は名前を設定します。
    var attribute = $('input[name="name"]').val();
 
    console.log(gender, customerID, birthYear, attribute);
 
    //ユーザー情報の送信
    MobileInsight.setUser(
      gender, customerID, birthYear, attribute,
      function(success){console.log(success)},
      function(error) {
          console.log(error);
      }
    );
 
    // サインアップイベントの登録
    var method = 'method';
    var success = true;
    var status = 'status';
 
    MobileInsight.sendSignUpEvent(
        method, success, status,
        null,
        function(error) {
          console.log(error);
        }
    );
  });
 
});
 

これでSign Upボタンを押すと入力データがYahoo! MOBILE INSIGHTへ送信されます。
簡単ですね。

データを送ってみよう

アプリをビルドして、実際にデータを送ってみましょう。
プラグインを使っていますので、ストア版のMonacaデバッガーでは確認できません。カスタムビルドデバッガーを利用してください。
ちなみにYahoo! MOBILE INSIGHTはMonacaで標準提供されているので、Monacaの無料ユーザでも利用できます。

Yahoo! MOBILE INSIGHTで確認

ダッシュボードのアプリ一覧から今回登録したアプリを選択しましょう。
データが反映されていればセッション数の値などをダッシュボードで確認することができます。
※データ送信から反映まで４時間〜１日程度必要です。

画像09

また、左メニューの「アナリティクス」→「基本KPI」から日付のレンジを指定してデータを確認することもできます。

画像10

「ユーザー分布」のメニューから年齢や性別についても確認することができます。

画像11 画像12

今回はユーザー情報の送信と共にYahoo! MOBILE INSIGHTに用意されているサインアップイベントに登録をしたので、「アナリティクス」→「イベント一覧」→「サインアップ」に進むとサインアップのイベント数も取ることができます。

画像13

いかがでしたでしょうか？
簡単なコードを追加するだけでアクセス解析を行えるようになりました。他にも様々なデータを解析できるのでぜひお試しください。

今回のサンプルコードはこちらからご覧になれます。
公式のドキュメントはこちらの Yahoo! MOBILE INSIGHT「Cordova向け　SDK導入手順書」を参考にしてください。