Yahoo! MOBILE INSIGHTでMonacaアプリのユーザー分析をしよう！

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

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

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

前準備　

Yahoo! MOBILE INSIGHTの設定

アカウント登録

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

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

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

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

今回は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スキームの欄に入力した文字列になります。

画面作成

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

<ons-page>

<ons-toolbar>

</ons-toolbar>

</div>

</div>

</div>

</div>

Male

</label>

</div>

Female

</label>

</div>

</div>

</ons-page>

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

CSSの作成

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

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

.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;

}

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

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

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

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

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

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 の中にコードを追加します。

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の無料ユーザでも利用できます。