Tengo un javascript personalizado para publicar anuncios en mi sitio NextJS. Esto es proporcionado por el proveedor de anuncios / intercambio de anuncios.
Se ve algo como esto:
<script type="text/javascript" src="//cdn.adsite.com/static/js/ad.js" ></script>Junto con esto tengo etiquetas div que coloco en la página web, por ejemplo:
<div id="ad-tag-6098" ></div> <div id="ad-tag-6099" ></div> <div id="ad-tag-6076" ></div>Estas tres etiquetas div son tres espacios publicitarios en una página y se completan con el anuncio mediante el javascript ad.js.
Esto funciona bien en una carga/recarga normal de una página.
Sin embargo, cuando navego a una página usando el enrutador de navegación interno, este javascript no se activa y el anuncio no se muestra.
¿Cuál es la forma correcta de recargar ad.js para que las etiquetas div (espacios publicitarios) muestren el anuncio correctamente y también se actualicen correctamente incluso cuando naveguemos a través del enrutador nextjs? ¿Puedes ayudarme?
ACTUALIZACIÓN: Este problema es aún más profundo de lo que pensaba. Solo recargar javascript no es suficiente. Dado que se trata de espacios publicitarios, cuando la página cambia de transición/ruta, los espacios publicitarios utilizados permanecen en la memoria, por lo que el script del anuncio los trata como si ya se hubieran mostrado. Esto provoca un error.
El comportamiento deseado es el siguiente:
Puede que lo sepas, pero quería recordarte que hay oyentes para los cambios de ruta en NextJS.
router.events.on('routeChangeComplete', handleRouteChange) router.events.off('routeChangeComplete', handleRouteChange)puede volver a cargar el script cuando la ruta cambia con la ayuda de estos eventos. puede buscar el script y agregarlo al final del cuerpo del script para cada cambio de ruta. asi se reiniciara la memoria de los adjs
Espero que este router.events ayude, esperando sus comentarios.
ACTUALIZACIÓN: Según tu comentario, quería actualizar aquí. Con la ayuda de estos router.events, usted tiene el control. Puedes manipular el DOM. No debe ser una solución específica de React o una solución específica de NextJS. Tienes el poder de Javascript.
Si es usted quien agrega todas las divisiones de anuncios, puede agregar un atributo de datos para seleccionar esas divisiones más adelante.
Por ejemplo, supongamos que agregó esta división de anuncios
<div id="ad-tag-6098" ></div> // instead of this! <div id="ad-tag-6098" data-ad="true" ></div> // add this one!al usar el evento routeChangeStart de router.events , puede seleccionar los divs con el atributo de anuncio de datos y eliminar el contenido completo de ellos del DOM antes del evento routeChangeComplete y cuando se vuelve a cargar el script, no debería arrojar un error.
const adDivs = document.querySelectorAll('[data-ad="true"]'); // you can get these divs and remove the child of them before routeChangeComplete cycle¿Qué piensas sobre esta parte actualizada de mi respuesta? Déjame saber tu opinión.
Otro truco simple sería agregar una cadena de consulta única que haría que el script se cargara y ejecutara una y otra vez.
Para eliminar ads antiguos, se puede usar el controlador de eventos onLoad del componente Script .
import Script from 'next/script' export default function Home() { const unique_id = new Date().getTime(); return ( <> <Script id={unique_id} src={`//cdn.adsite.com/static/js/ad.js?v=${unique_id}`} onLoad={() => { // execute code after script load }} /> </> ) }Un mejor enfoque sería cargar el script solo una vez y actualizar los espacios que se han creado con la función de actualización provista, o puede borrar y cargar nuevos anuncios con la misma funcionalidad.
function refreshAllSlots() { googletag.cmd.push(function() { googletag.pubads().refresh(); }); } function clearAllSlots() { googletag.cmd.push(function() { googletag.pubads().clear(); }); }Nota: