如何在 React-Router 中使用谷歌标签管理器和谷歌广告

Question

我正在使用 react-gtm
我想在整个页面上跟踪用户并避免恶意推荐问题。
当用户在 google 中点击广告时，她应该登陆这里：
https://mypage.com/?gclsrc=aw.ds&&gclid=GclidValue
所以我所做的是从 params 中获取 gclid，将其保存到 cookie 并在每次页面更改时将其发送到 datalayer。
问题是当你将该链接复制到一个网址时它可以工作，但当你在 Google 中点击一个广告时它却没有。

const Router = ({ children }) => {
  const location = useLocation();
  const query = useQuery();
  const gclidCookie = getCookie('gclid');
  let gclidParam;

  if (gclidCookie) {
    gclidParam = gclidCookie;
  } else {
    setCookie('gclid', query.get('gclid'));
  }

  useEffect(() => {
    console.log(
      'route has been changed',
      window.location.pathname + window.location.search + (gclidParam || ''),
    );
    TagManager.dataLayer({
      page: window.location.pathname + window.location.search,
      gclid: gclidParam || '',
    });
  }, [location.pathname]);
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={pl}>
      <GlobalComponents>{children}</GlobalComponents>
    </MuiPickersUtilsProvider>
  );
};

Answer 1

嗯，gclid 不是调整源的唯一参数。源的即时更改将导致会话中断。遍历所有可能的归因/会话更改参数并手动跟踪它们不是解决方案。

对于 SPA，我建议声明跟踪器名称。这正是我为基于 React 和其他 SPA 解决它的方法。它给标记过程增加了一点点技巧，但在我看来，它只是给过程增加了一点纪律，所以我接受它，因为 GTM 实施中的纪律很少见。

简而言之，tracker 是 GA 的对象，用于保留此跟踪上下文。这包括原始引荐来源、跟踪设置、自定义维度、用户 ID 以及许多类似内容。您可以使用 ga.getAll() 将其放入数组中。你可以在这里尝试，堆栈溢出：

那么 GTM 是如何处理它的，它是否默认为每个标签定义了一个新的跟踪器。创建一个新的跟踪器，以便后续标签不会从先前触发的字段继承字段。无论如何，您可以在 Simo 和 David 的文章中阅读更多相关内容：https://www.simoahava.com/gtm-tips/fix-rogue-referral-problem-single-page-sites/ 和 https://www.thyngster.com/tips-to-track-an-ajax-based-website-using-gtm-and-universal-analytics/

通过创建显式跟踪器（为每个标签设置相同的名称），我只是覆盖了该行为。我的做法是通过 GTM 设置变量，然后在我创建的每个 GA 标签中引用该变量，使其应用​​ cfg 变量中的所有设置。

我知道，Simo 不喜欢跟踪器声明解决方案，并提供了更复杂的修复程序作为替代。我只是使用跟踪器并保持我的 GTM 逻辑非常结构化和明确。