Power Pages サイトのアクセスログをとる

今日のトピックはPower Pages サイトのアクセスログをとる方法についてです。

Power Pagesで誰がアクセスしたのかアクセスログをとりたい場合、標準でPower Pages側でアクセスログを取る方法がないのでAzureやサービスとの連携が必要です。
今回はAzure Application Insightsと連携する方法をご紹介します。

::: note
作成ユーザーのサイト作成ログはプレビュー開始しました。
https://learn.microsoft.com/ja-jp/power-platform/admin/logging-power-pages

:::

Azure Application Insightsを使うとPower Pagesのサイトの以下のようなログを取ることができます。
- ログダッシュボードやクエリを使った詳細分析
- ユーザー・セッション・イベントごとの使用量、ファネル、ユーザーフローなど

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/6fea30d2-1983-3a5b-a2a8-8830666a897a.png)

他にアクセスログを取るサービスを利用している場合は[Power Pagesのサイトにログ取得の処理のJavaScriptを埋め込む](https://qiita.com/skuramoto/items/2459ef03fa41b3b65f10#power-pages%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%83%AD%E3%82%B0%E5%8F%96%E5%BE%97%E3%81%AE%E5%87%A6%E7%90%86%E3%81%AEjavascript%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80)から

# Azure Application Insightsでログを取得する
Azure側でAzure Application Insightsをたてていきます。
まず、新しいリソースグループを作成します。
[Azure Portal](https://portal.azure.com/)にログインしたら、[リソースグループ]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a25c35d2-bf3c-f8a6-e276-fe492976be24.png)

リソースグループの一覧画面で左上の[作成]をクリックし、以下の画面で必要事項を入力します。それができたら左下の[確認および作成]をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/1b481717-3790-ac52-c12c-db6f71925a02.png" width=90%>

検証に成功したら、[作成]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/1068e29b-7cfd-be9a-b0a9-602981dd3f81.png)


リソースグループが作成できたら、次はLog Analytics ワークスペースを新規で作成します。

::: note 
Log Analytics ワークスペースはApplication Insightsでとった**ログを保存する場所**です。
ワークスペースごとにデータを削除できるように個別に用意するとよりよいです。
:::

上の検索バーで「Log Analytics ワークスペース」を検索して、出てきたら選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/d70185d3-1713-4bd9-7fe0-b4baad1d1e26.png)

左上の[作成]をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/0c15a67a-ab14-3e9c-af92-a542d7b2ddea.png" width=70%>

先ほど作成したリソースグループを選択し、名前を付けて[確認および作成]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/bb6a1841-6dba-d755-b702-9854545e4860.png)


検証が成功したら[作成]します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/e60ccc10-f8d9-530a-545f-b9a41b633d43.png)




上の検索バーで「Application Insights」を検索して、出てきたら選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/4fc88649-063d-6b7c-26b1-debe76d798df.png)

Azure Application Insightsの画面で左上の[作成]をクリックします。
リソースグループは先に作ったLog Analytics ワークスペースと同じリソースグループを選択します。
[ワークスペースの詳細]>[サブスクリプション]は先に作ったLog Analytics ワークスペースを選択してください。
[確認および作成]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/826076c3-315e-edc3-2d56-c8b6bcc3d297.png)


検証が成功したら[作成]します。少し待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/032d43c2-0530-7b97-8d91-231c77505366.png)


デプロイが完了したら、このリソースに移動してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/91372b28-bdd9-322c-ef4c-fa63b38987fe.png)

[概要]タブで表示される接続文字列をコピーしておきます。（メモを残しておきましょう）
これをサイトのJavaScriptに埋め込むことでアクセスログを取ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/7a387b78-797a-ff11-0ce2-ebbff419e4d8.png)

# JavaScriptファイルの編集
今回は、ログインユーザーのIDがとれるように設定します。
以下のコードの`CONNECTION_STRING`にコピーしたApplication Insightsの接続文字列を挿入します。

```js
<script type="text/javascript">
//最新のSDKに設定する
!function(T,l,y){var S=T.location,k="script",D="instrumentationKey",C="ingestionendpoint",I="disableExceptionTracking",E="ai.device.",b="toLowerCase",w="crossOrigin",N="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"5",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[b](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(m.sv||m.version),{time:function(){var e=new Date;function t(e){var t=""+e;return 1===t.length&&(t="0"+t),t}return e.getUTCFullYear()+"-"+t(1+e.getUTCMonth())+"-"+t(e.getUTCDate())+"T"+t(e.getUTCHours())+":"+t(e.getUTCMinutes())+":"+t(e.getUTCSeconds())+"."+((e.getUTCMilliseconds()/1e3).toFixed(3)+"").slice(2,5)+"Z"}(),iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}}}}var h=d.url||y.src;if(h){function a(e){var t,n,a,i,r,o,s,c,u,p,l;g=!0,m.queue=[],f||(f=!0,t=h,s=function(){var e={},t=d.connectionString;if(t)for(var n=t.split(";"),a=0;a<n.length;a++){var i=n[a].split("=");2===i.length&&(e[i[0][b]()]=i[1])}if(!e[C]){var r=e.endpointsuffix,o=r?e.location:null;e[C]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")}return e}(),c=s[D]||d[D]||"",u=s[C],p=u?u+"/v2/track":d.endpointUrl,(l=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=p,(o=(r=v(c,"Exception")).data).baseType="ExceptionData",o.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(S&&S.pathname||"_unknown_")+"\nEndpoint: "+i,parsedStack:[]}],r)),l.push(function(e,t,n,a){var i=v(c,"Message"),r=i.data;r.baseType="MessageData";var o=r.baseData;return o.message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+n+")").replace(/\"/g,"")+'"',o.properties={endpoint:a},i}(0,0,t,p)),function(e,t){if(JSON){var n=T.fetch;if(n&&!y.useXhr)n(t,{method:N,body:JSON.stringify(e),mode:"cors"});else if(XMLHttpRequest){var a=new XMLHttpRequest;a.open(N,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))}}}(l,p))}function i(e,t){f||setTimeout(function(){!t&&m.core||a()},500)}var e=function(){var n=l.createElement(k);n.src=h;var e=y[w];return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=i,n.onerror=a,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||i(0,t)},n}();y.ld<0?l.getElementsByTagName("head")[0].appendChild(e):setTimeout(function(){l.getElementsByTagName(k)[0].parentNode.appendChild(e)},y.ld||0)}try{m.cookie=l.cookie}catch(p){}function t(e){for(;e.length;)!function(t){m[t]=function(){var e=arguments;g||m.queue.push(function(){m[t].apply(m,e)})}}(e.pop())}var n="track",r="TrackPage",o="TrackEvent";t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+r,"stop"+r,"start"+o,"stop"+o,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),m.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4};var s=(d.extensionConfig||{}).ApplicationInsightsAnalytics||{};if(!0!==d[I]&&!0!==s[I]){var c="onerror";t(["_"+c]);var u=T[c];T[c]=function(e,t,n,a,i){var r=u&&u(e,t,n,a,i);return!0!==r&&m["_"+c]({message:e,url:t,lineNumber:n,columnNumber:a,error:i}),r},d.autoExceptionInstrumented=!0}return m}(y.cfg);function a(){y.onInit&&y.onInit(n)}(T[t]=n).queue&&0===n.queue.length?(n.queue.push(a),n.trackPageView({})):a()}(window,document,{
src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", // The SDK URL Source
// name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied
// ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout,
// useXhr: 1, // Use XHR instead of fetch to report failures (if available),
crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag
// onInit: null, // Once the application insights instance has loaded and initialized this callback function will be called with 1 argument -- the sdk instance (DO NOT ADD anything to the sdk.queue -- As they won't get called)
cfg: { // Application Insights Configuration
    connectionString: "CONNECTION_STRING"
}});

//ポータルのタイプとバージョンを取得（今回はコメントアウト）
/*var telemetryInitializer = (envelope) => {
  envelope.tags["ai.cloud.role"] = window.Microsoft.Dynamic365.Portal.type;
  envelope.tags["ai.cloud.roleInstance"] = window.Microsoft.Dynamic365.Portal.version;
}
appInsights.addTelemetryInitializer(telemetryInitializer);
*/

//ユーザーIDの取得
{% if user %}
var cdsContactId = "{{ user.id }}";
appInsights.setAuthenticatedUserContext(cdsContactId);
{% endif %}

//アプリ分析
 //ポータルページのログ
 appInsights.trackPageView();//ページビューの追跡
 //細かいイベントのログ取得(独自のイベントの出力をしたいとき使う。今回はコメントアウト)
 //appInsights.trackEvent({name: window.Microsoft.Dynamic365.Portal.type});
</script>
```

イメージ
```js
connectionString: "InstrumentationKey=～～～～.livediagnostics.monitor.azure.com/"
```

最新のSDKコードは以下をご参照ください。

https://learn.microsoft.com/ja-jp/azure/azure-monitor/app/javascript-sdk

ここまででログを取るコードの作成は終了です。

# Power Pagesのサイトにログ取得の処理のJavaScriptを埋め込む

では実際にサイトでログが取れるように設定します。
Power Appsのアプリ一覧からポータル管理アプリ（英語環境だと「Potal Management」）を開きます。
ポータル管理アプリはPowerPagesのサイトを管理するときに使うアプリです。[詳細はこちら](https://qiita.com/skuramoto/items/bd35d5362cf669fca78a#%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%AB%E7%AE%A1%E7%90%86%E3%82%A2%E3%83%97%E3%83%AA)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/5c0909b5-362f-f126-c771-456ad9d58ee0.png)

ポータル管理アプリの左のサイトマップで[トラフィック分析の有効化]を選択します。アクセスログを設定したいWebサイトを選択し、先ほど作成した分析プロバイダーのスニペットを入力します。
[保存]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/54a96f79-f37a-804b-bba2-c230003e5a9a.png)

保存できてるかの確認は、[コンテンツ]>[コンテンツスニペット]でできます。
コンテンツスニペットの一覧を開いたら右の検索バーで「Tracking Code」で検索します。
これができていたら完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/d41fa75c-3285-6fa4-0796-e3bd23ab0bcf.png)

::: note
該当のレコードが見つからない場合は、列の編集で「作成日」列を追加し、作成日順で並び替えをすると早く見つけられます。
:::

# Azure Application Insightsでのログの見方
今回はユーザーＩＤをとりたいので、実際にサイトにログインして、ページを遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/691778cb-a5eb-c501-8671-a3dbd312b98c.png)
Azure Application Insightsを開き、概要タブではいくつかのグラフを確認することができます。

::: note warn
アクセス情報をとるのに2～３分くらいタイムラグがあります。
:::

## トランザクションの検索
[トランザクションの検索]タブでは時系列でアクセスを確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/ef1fd557-c1e3-0d97-d7a1-b546481bbc02.png)
特定のレコードを選択すると、詳細を確認することができます。さらに、右のPage Viewプロパティの[すべてを表示]をクリックすると、より詳しい情報を確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/69afc2e1-7b83-c14d-ea5f-b49de4feaf63.png)

AuthIDがユーザーのアカウントIDです。Dataverse（Power Pages側）で管理しているデータです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/56bd49ce-460d-cd8f-c1ba-1ed1464632bb.png)

## 使用量
ユーザーやセッションイベント単位での使用量を確認することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a09556fd-f270-cf71-339b-8326b658c4eb.png)

ユーザーフローではページ遷移を確認することができます。（右から左の順）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/f01b48f2-8f03-6128-8f39-dfad8b824ee8.png)

## ログ
より細かいログ検索をしたい場合は[ログ]を使います。
気になる分析を選ぶと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/bd2403e4-0bf5-4943-bbfb-162f45c327da.png)

クエリサンプルが出てきます。
こちらを編集することで、クエリで細かくログ検索することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/9580c985-f580-7fb8-c2cd-ca9c96ca6683.png)

::: note 
左側の[その他]に並んでいるのがApplication Insights側のテーブルです。
JSでデータを取ってきています。

:::

他にも、**タスク**などでは自動化（Power Automate的なこと)もできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/8512ae0d-53e1-47f5-d513-7369de92eb89.png)

# まとめ
今回はAzure Application Insightsを使った、Power Pagesサイトのアクセスログの取り方についてご紹介しました。
ぜひお試しください！