Fatal编程技术网
  • next.js/
  • Next.js-如何确保<；标题>；是否在触发历史记录更改事件时设置？

Next.js-如何确保<；标题>；是否在触发历史记录更改事件时设置？

next.js

Next.js-如何确保<；标题>；是否在触发历史记录更改事件时设置？,next.js,Next.js,在我的Next.js应用程序中，我将使用推荐的方法为各个页面设置标记： import Head from 'next/head' export default () => <> <Head><title>My page title</title></Head> </> 在页面之间导航时，您应该注意URL和标题经常不匹配。URL的价值总是正确的，但标题的价值无处不在。它可以有： 正确的值 它在上一页上的值

在我的Next.js应用程序中，我将使用推荐的方法为各个页面设置
标记：

import Head from 'next/head'

export default () => <>
    <Head><title>My page title</title></Head>
</>
在页面之间导航时，您应该注意URL和标题经常不匹配。URL的价值总是正确的，但标题的价值无处不在。它可以有：

  • 正确的值
  • 它在上一页上的值
  • 毫无价值
这是使用分析时的一个问题，特别是GTM-Google Tag Manager，它使用当前URL和页面标题来唯一标识访问过的页面

我在Next.js 7中遇到了这个问题，升级到8还没有解决

你知道有什么办法解决这个问题吗？可能会将历史记录更改事件延迟到
/pages/
下组件的第一次呈现

谢谢

这是一个小技巧
setTimeout（（）=>{console.log（document.title）}，0）

我找到了一个解决办法，截取发送到
window.dataLayer.push的事件，并在事件为
gtm.historyChange
的情况下添加一秒延迟

这是我的
GtagScript
组件，我正在
\u document.js
下添加到
：


export const GtagScript = () => {

    function intercept() {
        const scriptTag = document.querySelector('#gtm-js');
        if (scriptTag !== null)
            scriptTag.addEventListener('load', () => {
                window.dataLayer.pushOrig = window.dataLayer.push;

                window.dataLayer.push = (e) => {
                    if (e.event === 'gtm.historyChange') {
                        setTimeout(function () {
                            window.dataLayer.pushOrig(e);
                            console.log(`URL: ${window.location.href} Title: ${document.title}`);
                        }, 1000);
                    } else {
                        window.dataLayer.pushOrig(e);
                    }
                };
            });
    }


    return <>
        <script
            id="gtm-js"
            async
            src={`https://www.googletagmanager.com/gtm.js?id=${GA_TRACKING_ID}`}
        />
        <script
            dangerouslySetInnerHTML={{
                __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}');
            ${intercept.toString()}
            intercept();`
            }}
        />
    </>
};



export const GtagScript=（）=>{
函数截距（）{
const scriptTag=document.querySelector（'#gtm js'）；
if（scriptTag！==null）
scriptTag.addEventListener（'load'，（）=>{
window.dataLayer.pushOrig=window.dataLayer.push；
window.dataLayer.push=（e）=>{
如果（e.event==='gtm.historyChange'）{
setTimeout（函数（）{
window.dataLayer.pushOrig（e）；
log（`URL:${window.location.href}Title:${document.Title}`）；
}, 1000);
}否则{
window.dataLayer.pushOrig（e）；
}
};
});
}
返回
};



我将等待一段时间，看看是否有一个正式的修复来自ZEIT团队。我的解决方案实际上没有回答这个问题。它不设置
，它只是延迟事件，这不是最优的。
您可以使用setInterval


const firstPageViewEvent = setInterval(() => {
  if (document.title) {
    // send pageview event
    clearInterval(firstPageViewEvent);
  }
}, 200);



“黑客”可以工作（延迟更大），但问题是我们无法控制GTM如何检测历史更改事件。因此，即使我们的代码得到了正确的标题，GTM也得到了错误的值。@Andrei检查一下，他们报告它在
5.1.0
中工作。但最新版本（
7
，
8
）似乎有倒退。无论如何，我通过截获发送到
window.dataLayer.push
的事件并在事件为
gtm.historyChange
@Andrei发布您的解决方案作为答案解决了这个问题。有时，时间加载页面将超过1000毫秒。它不起作用了。

const firstPageViewEvent = setInterval(() => {
  if (document.title) {
    // send pageview event
    clearInterval(firstPageViewEvent);
  }
}, 200);