Azure Application Insightsを入れてページビューを計測してみた

Application Insightsって何?

Azure Application Insights とは何か | Microsoft Docsを引用してみる。

Application Insights は、複数のプラットフォームで使用できるWeb 開発者向けの拡張可能なアプリケーション パフォーマンス管理 (APM) サービスです。 このサービスを使用して、実行中の Web アプリケーションを監視することができます。 パフォーマンスに異常があると、自動的に検出されます。 組み込まれている強力な分析ツールを使えば、問題を診断し、ユーザーがアプリを使用して実行している操作を把握できます。

AWSで言うと"CloudWatch"に当たるらしく、主にメトリクスの採取に使うらしい。
ページビューを計測するために適当なのかはよくわかんないけど、まぁいいんですよ!

AWSとAzureのサービス名対比表 | Ryuzee.com

導入方法

何が取れるか、どう取ればいいのかわからなかったので(マニュアルを読もう)、まずは計測したいページだけに入れてみて、取れたデータを眺めることにした。

Application InsightsをBasicプランで作成し、あとはGitHub - Microsoft/ApplicationInsights-JS: Microsoft Application Insights SDK for JavaScriptを見ながらページにJavaScriptを仕込めば良い。

ちょっと試行錯誤して、最終的に入れ込んだスクリプトは以下。

<script src="ai.0.js"></script>
<script type="text/javascript">
    var snippet = {
        config: {
            instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"
        }
    };
    var init = new Microsoft.ApplicationInsights.Initialization(snippet);
    var appInsights = init.loadAppInsights();
    appInsights.setAuthenticatedUserContext("ユーザID");
    appInsights.trackPageView("ページ名");
</script>

以下、試行錯誤したところ。

Include AI JS SDK script and initialize statically を使ってApplication Insightsを入れた

Use JS snippet and initialize dynamically (download full Application Insights script from CDN) の方がお手軽なんだけど、 以下のAuthenticatedUserIdを指定する方法がわからなかったので、こちらに。

ファイルは npm install applicationinsights-js を実行、node_modules/applicationinsights-js/dist にできる ai.0.js を使った。
ai.0.js はminifyしたヤツ。minifyしてないのは ai.js になる。

setAuthenticatedUserContextを使ってユーザIDを指定した

Facebookで以下のことを教えてもらったので、ユーザIDを指定することにした。
ありがとう! ボッチエンジニアの人!!!

ai.js とかが発行するuserIdはCookieに保存されてるので、その生存期間が過ぎたり、異なるブラウザからアクセスすると、同一ユーザーであってもApplication Insights 上では別ユーザー扱いになっちゃうんです。 なので、認証を終えたら、authenticated user id を付けてあげると、そういった問題が解決できるそうです。

trackPageViewの引数を指定した

引数を指定しない場合、Application Insightsはページ名にWindowのタイトルを利用する。
サイトのタイトルが長くて、結果画面が見づらかったので、カスタマイズすることにした。
最初から作るサイトであれば、こういうところも考慮に入れてタイトルどうするか考えた方がいいのかな?

見えるようになったもの

こんなのが見えるようになった。

f:id:couger:20171125105757p:plain

f:id:couger:20171125105944p:plain

個人的にはほったらかしてたエラーが分析されるようになって、「直さなきゃ」ってモチベーションが生まれた。

f:id:couger:20171125112345p:plain

気になる料金

価格—Application Insights | Microsoft Azure によると、今回適用したBasicプランでは、

  • 1GB/月までは無料
  • それ以降は234.6円/GB
  • データは90日間保持される。蓄積したデータをエクスポートしたい場合は51円/GB。

ということなので、まぁほぼお金かからない。助かる。

参考にしたページ

github.com

まずはここ。
APIリファレンスは同じサイトのApplicationInsights-JS/API-reference.md at master · Microsoft/ApplicationInsights-JS · GitHubにある。