Яндекс реклама в React (Next JS)

Question

Может найдется, кто размещал яндекс рекламу в Next JS, и сможет мне помочь. Суть проблемы такова - при размещении скрипта РСЯ, реклама появляется только на первой обновленной странице. После перехода с этой страницы на другие через встроенный в Next JS компонент Link реклама больше не появляется. При этом, если эти "другие" страницы обновить, реклама на них появится, но все повториться вновь. Если с них перейти, реклама больше не появляется.

В качестве роутера используется Pages Router.

Код компонента рекламы:

'use client'

import { useEffect } from "react"

export default function Ads({ className, blockID }) {
    useEffect(() => {
        window.yaContextCb.push(() => {
            Ya.Context.AdvManager.render({
                "blockId": `R-A-#######-${blockID}`,
                "renderTo": `yandex_rtb_R-A-#######-${blockID}`,
                "async": true
            })
        })
    }, []) 

    return (
        <div>
            <div id={`yandex_rtb_R-A-#######-${blockID}`}></div>
        </div>
    )
}

Подгрузка скрипта происходит в _document:

<Script src="https://yandex.ru/ads/system/context.js" strategy="beforeInteractive"></Script>

Импортируется динамически:

const Ads = dynamic(() => import("@/components/GeneralComps/Ads"), {ssr: false})

Answer 1

Указанный useEffect так и будет срабатывать! Один раз, при первом рендере, а при переходе на другие страницы больше не будет.

Нужно указать зависимость usePathname или useRouter, в зависимости от использования pages или app-маршрутизации.

Что-то вроде этого:

'use client'

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

export default function Ads({ className, blockID }) {
    useEffect(() => {
        window.yaContextCb.push(() => {
            Ya.Context.AdvManager.render({
                "blockId": `R-A-#######-${blockID}`,
                "renderTo": `yandex_rtb_R-A-#######-${blockID}`,
                "async": true
            })
        })
    }, [usePathname, useSearchParams]) 

    return (
        <div>
            <div id={`yandex_rtb_R-A-#######-${blockID}`}></div>
        </div>
    )
}

БЛОГ НА HUSL

Яндекс реклама в React (Next JS)

Ответы (1 шт):