无法让反应跟踪与打字稿、函数组件和反应钩子一起工作

Question

我正在使用带有typescript、react钩子和函数组件的react.js。在prem上工作，我不能使用像谷歌分析或新遗迹这样的云跟踪解决方案。此外，由于许可问题，我无法购买预先跟踪服务器解决方案，所以我必须实现自己的解决方案。我偶然发现了react tracking，它默认写入window.dataLayer[](用于谷歌分析(，但应该允许更改它——所以我尝试了下面的代码。但是-它对我不起作用-没有调用handleTracking-我如何才能让它起作用并通过给它一些有意义的数据(目前我只是通过点击测试…(Tnx提前

import React, { useEffect, useContext, useState }  from 'react';
import { Button } from 'semantic-ui-react';
import { observer } from 'mobx-react-lite';
import track, { useTracking } from 'react-tracking';
const JobDashboard: React.FC = () => {
const { trackEvent } = useTracking();
const rootStore = useContext(RootStoreContext); 
const { trackData} = rootStore.jobStore;
const handleTracking = (trackingData) => {
//trackData(trackingData);
console.log(trackingData)
}
return (
<Grid >
<Grid.Column width={10}>
<Button
onClick={() => {
trackEvent({ event: 'click-test', dispatch: data=> {handleTracking(data)} });
}}
floated="right"
content="Track"
color="blue"
/>
</Grid.Column>
</Grid>
);
}
export default track({ page: 'JobDashboard' })(observer(JobDashboard));

Answer 1

import React, { useEffect, useContext, useState }  from 'react';
import { Button } from 'semantic-ui-react';
import { observer } from 'mobx-react-lite';
import track, { useTracking } from 'react-tracking';
JobDashboard: React.FC = (track(
// app-level tracking data
{ app: "JobDashboard" },
{
dispatch: data => {
console.log(data);
(window.dataLayer = window.dataLayer || []).push(data);
}
}
return (
<Grid >
<Grid.Column width={10}>
<Button
onClick={() => {
trackEvent({ event: 'click-test'} 
});
}}
floated="right"
content="Track"
color="blue"
/>
</Grid.Column>
</Grid>
);
)(export default observer(JobDashboard));