Next.js 13.4.4页面切换时如何刷新Google Ads？解决重复广告报错

问题原因 #

在App Router的客户端组件中，路由切换时组件不会被完全卸载，ins元素会被复用，重复调用adsbygoogle.push()会触发报错——因为现有ins元素已经加载过广告内容。而旧版Pages Router中页面切换会重新渲染整个页面，不会出现这个复用问题。

解决方案 #

方案1：通过key属性强制组件重新渲染 #

给ins元素添加与路由强关联的key，当路径或搜索参数变化时，React会卸载旧组件并挂载新组件，生成全新的ins元素，此时调用push()就不会触发重复加载的报错。

修改后的代码：

'use client'
import { usePathname, useSearchParams } from 'next/navigation'
import { useEffect } from 'react'

const AdBanner = (props: any) => {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({})
    } catch (err) {
      console.log(err)
    }
  }, [pathname, searchParams])

  return (
    <ins
      // 添加唯一key，确保路由变化时重新渲染组件
      key={`${pathname}-${searchParams.toString()}`}
      className="adsbygoogle adbanner-customize"
      style={{
        display: 'block',
        overflow: 'hidden',
      }}
      data-ad-client={process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}
      data-adtest="on"
      {...props}
    />
  )
}
export default AdBanner

方案2：手动清理旧广告元素 #

如果不想通过key强制重渲染，可以在路由变化时先清理现有ins元素的广告状态和内容，再重新初始化：

'use client'
import { usePathname, useSearchParams } from 'next/navigation'
import { useEffect } from 'react'

const AdBanner = (props: any) => {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // 清理已加载的广告元素状态
    const adElements = document.querySelectorAll('.adsbygoogle')
    adElements.forEach(el => {
      if (el instanceof HTMLElement) {
        el.innerHTML = ''
        el.removeAttribute('data-ad-status')
      }
    })

    // 重新初始化广告
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({})
    } catch (err) {
      console.log(err)
    }
  }, [pathname, searchParams])

  return (
    <ins
      className="adsbygoogle adbanner-customize"
      style={{
        display: 'block',
        overflow: 'hidden',
      }}
      data-ad-client={process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}
      data-adtest="on"
      {...props}
    />
  )
}
export default AdBanner

额外注意事项 #

• 确保Google Ads的初始化脚本已正确加载，建议在根layout.tsx中使用next/script组件加载，设置strategy="lazyOnload"或"afterInteractive"。
• 如果使用多个广告位，每个广告位的data-ad-slot需保持唯一，避免冲突。

内容的提问来源于stack exchange，提问作者Reinildo Reis