如何将振幅分析与 React 应用程序集成?
How do integrate amplitude analytics with a React app?
Amplitude Analytics 确实提供 Javascript SDK for Amplitude 但我如何在无法直接访问 DOM 的 React 应用程序中实施分析?
GitHub页面建议使用amplitude.getInstance().logEvent('EVENT_IDENTIFIER_HERE')
但在 React 中,我没有组件或事件的唯一标识符。
'EVENT_IDENTIFIER_HERE'
实际上只是您要记录的事件的任意但唯一的名称(标签)。因此,当您检查振幅仪表板时,您可以轻松找到事件。
即 amplitude.getInstance().logEvent('visitedHomePage')
或
amplitude.getInstance().logEvent('cartButtonClicked')
等
此外,您可以像这样随事件一起传递额外的事件数据:
amplitude.getInstance().logEvent('cartButtonClicked', itemsInCart)
这就是我所做的并且效果很好:
yarn add amplitude-js
utilities/amplitude.js
import amplitude from 'amplitude-js';
export const initAmplitude = () => {
amplitude.getInstance().init(process.env.REACT_APP_AMPLITUDE);
};
export const setAmplitudeUserDevice = installationToken => {
amplitude.getInstance().setDeviceId(installationToken);
};
export const setAmplitudeUserId = userId => {
amplitude.getInstance().setUserId(userId);
};
export const setAmplitudeUserProperties = properties => {
amplitude.getInstance().setUserProperties(properties);
};
export const sendAmplitudeData = (eventType, eventProperties) => {
amplitude.getInstance().logEvent(eventType, eventProperties);
};
index.js
...
import { initAmplitude } from './utilities/amplitude';
initAmplitude();
ReactDOM.render(
<ThemeProvider theme={theme}>
<Provider store={store}>
<Routes store={store} />
</Provider>
</ThemeProvider>,
document.getElementById('root')
);
然后就可以开始了。在需要时调用其他方法,例如 setAmplitudeUserDevice
:
import { setAmplitudeUserDevice } from 'utilities/amplitude';
export function installationInitializationSuccess(id, token) {
setAmplitudeUserDevice(token);
return {
type: INSTALLATION_INITIALIZATION_SUCCESS,
id,
token
};
}
希望对您有所帮助!
Amplitude 最近发布了一个名为 "react-amplitude" 的实验性库,专门用于将 Amplitude 集成到 React 网络应用程序中。它提供了一些 React 组件,用于以声明方式记录事件以及设置事件和用户属性。有关详细信息,请参阅 announcement blog post and the GitHub repo。
我建议使用细分分析库并在 React 组件中跟踪我们的 React quickstart guide. You can track page visits with react-router 和用户行为。您将能够通过我们的仪表板打开 Amplitude,并可以访问 250 多个其他目的地。这是使用 React 事件处理程序的示例:
export default class SignupButton extends Component {
trackEvent() {
window.analytics.track('User Signup');
}
render() {
return (
<button onClick={this.trackEvent}>
Signup with Segment today!
</button>
);
}
}
我是 https://github.com/segmentio/analytics-react 的维护者。使用 Segment,如果您有兴趣尝试多种分析工具而无需编写任何额外代码,您将能够通过轻按开关来打开和关闭不同的目的地。
Amplitude Analytics 确实提供 Javascript SDK for Amplitude 但我如何在无法直接访问 DOM 的 React 应用程序中实施分析?
GitHub页面建议使用amplitude.getInstance().logEvent('EVENT_IDENTIFIER_HERE')
但在 React 中,我没有组件或事件的唯一标识符。
'EVENT_IDENTIFIER_HERE'
实际上只是您要记录的事件的任意但唯一的名称(标签)。因此,当您检查振幅仪表板时,您可以轻松找到事件。
即 amplitude.getInstance().logEvent('visitedHomePage')
或
amplitude.getInstance().logEvent('cartButtonClicked')
等
此外,您可以像这样随事件一起传递额外的事件数据:
amplitude.getInstance().logEvent('cartButtonClicked', itemsInCart)
这就是我所做的并且效果很好:
yarn add amplitude-js
utilities/amplitude.js
import amplitude from 'amplitude-js';
export const initAmplitude = () => {
amplitude.getInstance().init(process.env.REACT_APP_AMPLITUDE);
};
export const setAmplitudeUserDevice = installationToken => {
amplitude.getInstance().setDeviceId(installationToken);
};
export const setAmplitudeUserId = userId => {
amplitude.getInstance().setUserId(userId);
};
export const setAmplitudeUserProperties = properties => {
amplitude.getInstance().setUserProperties(properties);
};
export const sendAmplitudeData = (eventType, eventProperties) => {
amplitude.getInstance().logEvent(eventType, eventProperties);
};
index.js
...
import { initAmplitude } from './utilities/amplitude';
initAmplitude();
ReactDOM.render(
<ThemeProvider theme={theme}>
<Provider store={store}>
<Routes store={store} />
</Provider>
</ThemeProvider>,
document.getElementById('root')
);
然后就可以开始了。在需要时调用其他方法,例如 setAmplitudeUserDevice
:
import { setAmplitudeUserDevice } from 'utilities/amplitude';
export function installationInitializationSuccess(id, token) {
setAmplitudeUserDevice(token);
return {
type: INSTALLATION_INITIALIZATION_SUCCESS,
id,
token
};
}
希望对您有所帮助!
Amplitude 最近发布了一个名为 "react-amplitude" 的实验性库,专门用于将 Amplitude 集成到 React 网络应用程序中。它提供了一些 React 组件,用于以声明方式记录事件以及设置事件和用户属性。有关详细信息,请参阅 announcement blog post and the GitHub repo。
我建议使用细分分析库并在 React 组件中跟踪我们的 React quickstart guide. You can track page visits with react-router 和用户行为。您将能够通过我们的仪表板打开 Amplitude,并可以访问 250 多个其他目的地。这是使用 React 事件处理程序的示例:
export default class SignupButton extends Component {
trackEvent() {
window.analytics.track('User Signup');
}
render() {
return (
<button onClick={this.trackEvent}>
Signup with Segment today!
</button>
);
}
}
我是 https://github.com/segmentio/analytics-react 的维护者。使用 Segment,如果您有兴趣尝试多种分析工具而无需编写任何额外代码,您将能够通过轻按开关来打开和关闭不同的目的地。