reactjs - React redux-beacon 跟踪链接点击分析

Question

如果使用 Redux-Beacon，在 React/Redux 应用程序中跟踪内部链接点击分析的最佳方法是什么？

通常，内部链接单击会触发路由器位置更改(它不会触发任何其他 redux 操作)。但“LOCATION_CHANGE”实际上是一个pageView。

可以在 history.push('...') 之前调度事件吗？喜欢:

dispatch({ type: VIEW_BLOG_POST, postId });
.....
history.push(`/${postId}`);
...

没有真正改变状态，只是为了用 redux-beacon 中间件捕获事件？

... 另外，外部链接点击量又如何呢？我需要管理这些不同的东西吗？ (我想避免混合跟踪实现)

Answer 1

Is it ok, to dispatch an event before the history.push('...')?

是的，完全没问题。您所要做的就是将 VIEW_BLOG_POST 映射到新的事件定义。该操作不必以任何方式改变状态。它将通过 reducer ，所有 reducer 都会返回对先前状态的引用。如果您使用react-redux，这对性能的影响几乎为零。假设您将此作为 GA 中的一个事件进行跟踪，它将如下所示:

import { trackEvent } from '@redux-beacon/google-analytics';

const trackBlogPostClick = trackEvent((action, prevState, nextState) => {
  return {
    category: /* fill me in */,
    action: /* fill me in */,
    label: /* (optional) */,
    value: /* (optional) */,
  };
}, /* (optional) tracker names array or tracker name string */ );

// And wherever your events map is:

const eventsMap = {
  VIEW_BLOG_POST: trackBlogPostClick,
}

Without really changing the state, but just to catch the event with redux-beacon middleware?

👍

Also what about external link clicks? Do I need to manage these different? (I want to avoid mixed tracking implementations)

这很大程度上取决于您希望如何在 Google Analytics(分析)中跟踪这些信息。但从 redux-beacon 的角度来看，以同样的方式对待它们并没有什么错。