如何在react路由器中使用谷歌标签管理器和谷歌广告

3duebb1j  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(350)

我用的是react gtm
我想跟踪整个页面的用户,避免流氓转介问题。
当用户在谷歌上点击广告时,她应该在这里登陆:
https://mypage.com/?gclsrc=aw.ds&&gclid=gclidvalue
所以我要做的是从params中获取gclid,将其保存到cookies中,并在每次页面更改时将其发送到数据层。
问题是,当你们把那个链接复制到一个url上时,它就工作了,但当你们在谷歌上点击一个广告时,它就不工作了。

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>
  );
};
9cbw7uwe

9cbw7uwe1#

gclid并不是唯一调整震源的参数。即时更改源将导致会话中断。迭代所有可能的属性/会话更改参数并手动跟踪它们不是一个解决方案。
对于SPA,我建议声明跟踪者的名称。这正是我为react和其他水疗中心解决问题的方法。它给标记过程增加了一点小技巧,但在我看来,它只是给过程增加了一点规则,所以我接受它,因为gtm实现中的规则是罕见的。
简言之,跟踪器是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不喜欢tracker声明解决方案,并提供更复杂的修复作为替代。我只是使用跟踪器,并保持我的gtm逻辑非常结构化和明确。

相关问题