読者です 読者をやめる 読者になる 読者になる

Windows系のあれこれ

港区の SIer で Windows 系の開発に従事している SE みたいな人です。Xamarin 中心です。

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

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

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


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

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

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

Mobile Engagement でできること

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

こんな感じで今正にアクティブなユーザー数が表示されます。
f:id:ShunsukeKawai:20161102190000p:plain

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

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

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

どこからどこの画面に行ってるかよくわからん図で表示されます。
f:id:ShunsukeKawai:20161208225124p:plain

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

どのくらいアクティブにアプリを使ってくれているのかが表示されます。
f:id:ShunsukeKawai:20161208225753p:plain

バイスはなにか

iOS(iPhone9,1とかなんなのか…)
f:id:ShunsukeKawai:20161208225228p:plain
Android は製造元を選択するとモデルまで表示されます。
f:id:ShunsukeKawai:20161208230027p:plain

OSはなにか

サポート対象OSを決める時に役に立ちそう。
f:id:ShunsukeKawai:20161208225325p:plain

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

ちゃんとユーザーがバージョンアップしてくれてるかわかりますね。
f:id:ShunsukeKawai:20161208225357p:plain

画面サイズはなにか

どのサイズで動かされているかわかると色々対策できそうです。
f:id:ShunsukeKawai:20161208225512p:plain

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

StackTrace 的なのも出てます。
f:id:ShunsukeKawai:20161208225632p:plain

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

Xamarin.Forms に組み込む方法

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

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

f:id:ShunsukeKawai:20161201212016p:plain:w500

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

f:id:ShunsukeKawai:20161201215231p:plain:w500

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

Mobile Engagement アプリはプラットフォームごとに作成する必要があります。
f:id:ShunsukeKawai:20161201215715p:plain:w500

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

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

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

NuGet からインストールすると勝手にフォルダが作られてそこに Mobile Engagement 用のリソースが置かれます。
(おそらく Xamarin.Android 用だからかな)
そのためその状態でビルドすると以下の様なエラーが発生します。
f:id:ShunsukeKawai:20161208150417p:plain
↓犯人
f:id:ShunsukeKawai:20161208150802p:plain
↓該当するフォルダに移動します。(+になってるヤツを移動した)
f:id:ShunsukeKawai:20161208150959p:plain

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

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

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

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

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

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

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

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

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

  • 【注意1】UWP は他と NuGet のパッケージが違うから注意(~Xamarin ではない)
  • 【注意2】リンク先にも書いてありますが、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 通知したい場合は各プラットフォームのリンク先を参考に設定してみてください。(最後も人任せ)

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