在 Azure Web App 中使用的 React 应用的用户信息

• 若要跟踪 Web 应用程序的用户详细信息，需要在 Web 应用中添加 Application Insights。

• 在应用服务器代码和网页中安装 Application Insights。npm install @microsoft/applicationinsights-web

• 使用用户、会话和事件细分工具筛选和拆分数据，以发现有关不同页面和功能的相对使用情况的见解。

• 下面的代码使用 和 包将 Azure Application Insights 集成到 React 应用程序中，以跟踪事件和用户行为。@microsoft/applicationinsights-web@microsoft/applicationinsights-react-js

• 创建 Azure Application Insights 和 Azure Application Insights 检测密钥

法典：

// src/AppInsights.js

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory({ basename: '' });
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey:  'Azure Application Insights Instrumentation Key',
    extensions: [reactPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: { history: browserHistory },
    },
  },
});

appInsights.loadAppInsights();

export { reactPlugin, appInsights };

// src/App.js

import React, { useEffect } from 'react';
import { reactPlugin } from './AppInsights';
import { withAITracking } from '@microsoft/applicationinsights-react-js';

class MyComponent extends React.Component {
  componentDidMount() {
    // Example of tracking a custom event
    reactPlugin.trackEvent({ name: 'MyComponent Mounted' });
  }

  componentWillUnmount() {
    // Example of tracking a custom event when component unmounts
    reactPlugin.trackEvent({ name: 'MyComponent Unmounted' });
  }

  render() {
    return <div>Hello from MyComponent!</div>;
  }
}

// Wrap your component with withAITracking to enable tracking
const MyTrackedComponent = withAITracking(reactPlugin, MyComponent);

// Use a functional component to demonstrate useEffect
const App = () => {
  useEffect(() => {
    // Example of tracking a page view
    reactPlugin.trackPageView({ name: 'App Component Page View' });
  }, []);

  return (
    <div>
      <h1>Your React Application</h1>
      <MyTrackedComponent />
    </div>
  );
};

export default App;

输出：

在用户中：

在日志中：

会议和活动：