Xamarin.Forms と Mobile Engagement でユーザー分析しちゃえ！

Xamarin Advent Calendar 2016 - Qiita "その1" 9日目の投稿です。

はい、ということでこんな状況の中、なんとか書きました。。

おはようございます。家庭内パンデミックにより本日が今週初出社です。そして明日がAdventCalendarの担当日です。ヤバいです。そして今日は子供の1歳の誕生日です。#帰りたい #けど帰れない

— SHUNSUKE_KAWAI (@_shunsuke_kawai) 2016年12月8日

ホントは0時きっかりにアップしたかったけど、ご了承ください。

さて、Microsoft さんのイベントで使用したアプリケーションの開発をやった話の記事で簡単に説明しましたが、Azure の Mobile Engagement というサービスはとても楽しいサービスです。
shunsukekawai.hatenablog.com

本記事では Xamarin.Forms でどのように Mobile Engagement でどんなことができるのか、どう使用するかを解説をします。

Mobile Engagement でできること

リアルタイムのアクティブユーザー

こんな感じで今正にアクティブなユーザー数が表示されます。

どの画面がどれだけ使われているか

画面の起動時にコードを1行埋め込むことで、勝手にデータを蓄積してくれます。

どんな画面遷移を行っているか

どこからどこの画面に行ってるかよくわからん図で表示されます。

セッション時間はどのくらいか

どのくらいアクティブにアプリを使ってくれているのかが表示されます。

デバイスはなにか

iOS(iPhone9,1とかなんなのか…)

Android は製造元を選択するとモデルまで表示されます。

OSはなにか

サポート対象OSを決める時に役に立ちそう。

どのアプリバージョンを使っているか

ちゃんとユーザーがバージョンアップしてくれてるかわかりますね。

画面サイズはなにか

どのサイズで動かされているかわかると色々対策できそうです。

アプリがクラッシュしている原因とその詳細

StackTrace 的なのも出てます。

と、まぁここに挙げたのは一部ですが、見てるだけでも酒の肴になりそうですね。

Xamarin.Forms に組み込む方法

ここからは Mobile Engagement をどうやってXamarin.Forms に組み込むかです。

Azure ポータルから Mobile Engagement のサービスを追加

• 対象プラットフォームを UWP、Android、iOSを選択する

• その他設定はよしなに
• 作成完了（3つのアプリが作成されます）

Mobile Engagement アプリはプラットフォームごとに作成する必要があります。

Xamarin.Forms プロジェクトに Mobile Engagement 接続（Android 編）

基本的に以下のチュートリアルに沿って進めていけば大丈夫です。（人任せ）
もう Mobile Engagement 作成は済んでいるので、キーをコピーするところ以降ぐらいから。
Xamarin.Android 用 Azure Mobile Engagement の使用

• 【注意１】NuGet から Microsoft.Azure.Engagement.Xamarin をインストールしたら勝手に作られるフォルダの対処

NuGet からインストールすると勝手にフォルダが作られてそこに Mobile Engagement 用のリソースが置かれます。
（おそらく Xamarin.Android 用だからかな）
そのためその状態でビルドすると以下の様なエラーが発生します。

↓犯人

↓該当するフォルダに移動します。（+になってるヤツを移動した）

• 【注意２】using は Microsoft.Azure.Engagement.Xamarin だけでいい

MainActivity.cs の using は一つだけで大丈夫です。

• 【注意３】MainActivity.cs に EngagementActivity の継承をすることは Xamarin.Forms ではできない（FormsAppCompatActivity をすでに継承しているため）

こっち側の手順でやる必要がある
Azure Mobile Engagement Android SDK の詳細なレポート オプション

Xamarin.Forms プロジェクトに Mobile Engagement 接続（iOS 編）

基本的に以下のチュートリアルに沿って進めていけば大丈夫です。（人任せ２）
もう Mobile Engagement 作成は済んでいるので、キーをコピーするところ以降から。
Xamarin.iOS 用 Azure Mobile Engagement の使用

Xamarin.Forms プロジェクトに Mobile Engagement 接続（UWP 編）

基本的に以下のチュートリアルに沿って進めていけば大丈夫です。（人任せ３）
もう Mobile Engagement 作成は済んでいるので、キーをコピーするところ以降から。

Windows ユニバーサル アプリの Azure Mobile Engagement の概要

• 【注意１】UWP は他と NuGet のパッケージが違うから注意（～Xamarin ではない）
• 【注意２】リンク先にも書いてありますが、NuGet は、Windows 10 UWP アプリケーションで SDK のリソースを自動的にコピーしません。 NuGet パッケージのインストール時に表示される手順 (readme.txt) に従って、手動で行う必要があります。

とあります。readme.txtの内容は以下の通り。はい。自分で作れっつーことですね。

NuGet does not automatically copy the SDK resources in your Windows 10 UWP application. You have to do it manually until the scaffolding feature is reintroduced. 
Here are the steps for a new integration:

* Open your File Explorer.
* Navigate to the following location: %USERPROFILE%\.nuget\packages\MicrosoftAzure.MobileEngagement\3.4.1\content\win81
* Drag and drop the "Resources" folder from the file explorer to the root of your project in Visual Studio.
* In Visual Studio select your project and activate the "Show All files" icon on top of the "Solution Explorer".
* Some files may not be included in the project. To import them at once right click on the "Resources" folder, "Exclude from project" then another right click on the "Resources" folder, "Include in project" to re-include the whole folder. All files from the "Resources" folder are now included in your project.

まとめ

この辺までの基本的な設定 + PCL に interface 作って各プラットフォーム側で処理を追加して PCL の MainPage.xaml.cs にアクティブにする処理入れたヤツを以下のリポジトリにアップしてあります。
github.com

Mobile Engagement 側の接続文字列を設定すればとりあえず動くと思います。
Push 通知したい場合は各プラットフォームのリンク先を参考に設定してみてください。（最後も人任せ）

それではお疲れ様でした。