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画面を元にアレンジしています。
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> |
するとこのような画面になります。
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; } |

これで画面が完成しました。
プレビューボタンから確認してみましょう。
データ送信スクリプト作成
いよいよ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で確認
ダッシュボードのアプリ一覧から今回登録したアプリを選択しましょう。
データが反映されていればセッション数の値などをダッシュボードで確認することができます。
※データ送信から反映まで4時間〜1日程度必要です。

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

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


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

いかがでしたでしょうか?
簡単なコードを追加するだけでアクセス解析を行えるようになりました。他にも様々なデータを解析できるのでぜひお試しください。
今回のサンプルコードはこちらからご覧になれます。
公式のドキュメントはこちらの Yahoo! MOBILE INSIGHT「Cordova向け SDK導入手順書」を参考にしてください。