1

Может найдется, кто размещал яндекс рекламу в 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})
3
  • Вы бы код показали, куда и как вставили рекламу, как ваш роутер организован
    – SwaD
    Commented 7 июн. в 14:48
  • @SwaD Добавил код. В качестве роутера используется Pages Router.
    – George
    Commented 7 июн. в 16:17
  • Все равно не понятно, как компонент Ads рендерится на других страницах и рендерится ли? Можно попробовать Ads добавить только при рендере самого первого элемента. Если яндекс как то завязан по url, то рендерить его при каждой смене роута
    – SwaD
    Commented 7 июн. в 18:51

1 ответ 1

0

Указанный 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>
    )
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.