反应 redux-beacon track link 点击分析

Question

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

通常内部 link 单击会触发路由器位置更改（它不会触发任何其他 redux 操作）。但是 'LOCATION_CHANGE' 它实际上是一个 pageView.

可以在 history.push('...') 之前发送事件吗？喜欢：

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

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

... 另外，外部 link 点击又如何呢？我需要管理这些不同吗？（我想避免混合跟踪实施）

Answer 1

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

是的，完全没问题。您所要做的就是将 VIEW_BLOG_POST 映射到新的事件定义。该动作不必以任何方式改变状态。它将通过所有 return 对先前状态的引用的缩减器。如果您使用的是 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 的角度来看，同样对待它们并没有错。

反应 redux-beacon track link 点击分析

react redux-beacon track link clicks analytics

google-analytics

reactjs

react-router

react-redux

redux-beacon