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を入れた -> ai.0.js のトコ
setAuthenticatedUserContextを使ってユーザIDを指定した
trackPageViewの引数を指定した

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 を付けてあげると、そういった問題が解決できるそうです。