使用链接触发标签时获取当前页面路径点击Next.js项目

Question

我有一个 Next.js 项目，当我单击（触发）指向我的 GA4 代码的某些链接时，我需要当前页面路径。问题在于 Page Path 变量的值不正确，因为在没有完全重新加载应用程序并快速更改路由的情况下，返回的 Page Path 是链接的目标页面，而不是当前页面。这实际上是由于延迟而发生的，如果我在加载时间较长的较慢环境（例如本地主机）中测试，返回的值是正确的，即路由更改之前的页面路径。

我已经尝试使用代码中的页面路径创建数据层变量，但发生了同样的事情。

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

有谁知道如何以通用方式获取这个值？我有几个标签，但我们并不总是有开发人员可以执行此操作，因此必须通过 GTM 或在代码中以明确的方式解决此问题。

Answer 1

您可以收听

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;