在Next.js项目上使用Link Click触发标记时获取当前页面路径

umuewwlo 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(123)

我有一个Next.js项目，当我点击（触发）到我的GA4标签的一些链接时，我需要当前的页面路径。问题是Page Path变量的值不正确，因为在没有完全重新加载应用程序和快速更改路由的情况下，返回的Page Path是链接的目标页面，而不是当前页面。这实际上是由于延迟而发生的，如果我在加载时间较长的较慢环境（例如localhost）中进行测试，则返回的值是正确的，即更改路由之前的Page Path。
我已经尝试过在代码中创建一个带有页面路径的数据层变量，但还是发生了同样的事情。

useEffect(() => {
  //Update GTM data layer pagePath variable
  pushEvent({
    pagePath: asPath
  })
}, [pathname])

有人知道如何以通用的方式获得这个值吗？我有几个标签，我们并不总是有一个开发人员可以做这件事，所以这必须由GTM或在代码中明确的方式解决。

next.js

来源：https://stackoverflow.com/questions/77225645/get-current-page-path-when-triggering-tags-with-link-click-on-next-js-project

1条答案

按热度按时间

f4t66c6m1#

您可以侦听routeChangeStart事件，该事件在更改路由之前触发。
示例实现：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {

    const handleRouteChange = (url) => {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'pageview',
        pagePath: router.asPath,
      });
    };

    router.events.on('routeChangeStart', handleRouteChange);

    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

赞(0）回复(0）举报 2023-10-18

我来回答

在Next.js项目上使用Link Click触发标记时获取当前页面路径

1条答案

相关问题

热门标签

最新问答