如何在Azure Dashboard中按页面拆分Azure App Insights自定义事件？

没问题！作为App Insights新手，这种按页面拆分同一事件的需求其实很常见，而且实现起来也不复杂，我给你一步步拆解：

第一步：确保自定义事件携带页面属性（关键前提） #

如果你的自定义事件还没包含页面信息，首先需要在触发事件时，把当前页面的名称/标识作为自定义属性一起发送到App Insights。举个常见的JavaScript SDK例子：

• 搜索页的下载按钮点击事件：

  appInsights.trackEvent(
    { name: "DownloadButtonClicked" }, 
    { PageName: "SearchPage" } // 自定义页面属性
  );
  

• 收藏页的下载按钮点击事件：

  appInsights.trackEvent(
    { name: "DownloadButtonClicked" }, 
    { PageName: "CollectionPage" }
  );
  

如果用的是其他语言SDK（比如.NET、Java），逻辑完全一致——给事件添加一个名为PageName（或你喜欢的统一名称）的自定义属性即可。

第二步：在Azure仪表板创建按页面拆分的可视化组件 #

当事件已经携带页面属性后，就可以在仪表板里展示拆分后的统计数据了：

1. 打开Azure门户，找到你的App Insights资源，进入「仪表板」（也可以新建一个专属的自定义仪表板）。
2. 点击「添加组件」，选择适合的图表类型（比如条形图、折线图，看你偏好），数据源选择你的App Insights资源。
3. 在查询编辑器中编写Kusto查询，按页面分组统计事件。比如统计下载按钮在不同页面的触发次数：

   customEvents
   | where name == "DownloadButtonClicked" // 指定要统计的事件名称
   | summarize EventCount = count() by tostring(customDimensions.PageName) // 按页面属性分组计数
   | render barchart // 渲染为条形图，可替换为piechart/linechart等
   

4. 保存查询和组件，就能在仪表板上看到按页面拆分的事件数据了。

进阶：同时展示多个事件的页面拆分 #

如果想在同一个图表里看多个事件的页面分布，可以调整查询为：

customEvents
| where name in ("DownloadButtonClicked", "FavoriteButtonClicked") // 指定多个事件
| summarize EventCount = count() by EventName = name, PageName = tostring(customDimensions.PageName)
| render stackedbarchart // 堆叠条形图清晰展示每个事件在不同页面的占比

补救方案：如果已收集的事件没带页面属性 #

如果之前的事件没加页面属性，也可以通过关联pageView事件（App Insights自动收集的页面浏览事件）来匹配页面：

customEvents
| where name == "DownloadButtonClicked"
// 通过会话ID和时间范围关联同一会话内的页面浏览事件
| join kind=inner (pageViews) on session_Id, timestamp between pageView.timestamp - 10m and pageView.timestamp + 10m
| summarize EventCount = count() by PageName = pageView.name
| render barchart

不过这种关联方式不如直接给事件加属性准确，建议后续的事件都补上页面属性哦。

新手小提示 #

• 先在App Insights的「日志」功能里测试Kusto查询，确保能拿到正确数据后，再添加到仪表板。
• 自定义属性的名称要统一（比如都叫PageName），别混用不同名称，否则统计会出错。

内容的提问来源于stack exchange，提问作者curious_debugger