El Script Principal de AdSense
Todo comienza con el script principal de la librería de AdSense. Este script debe cargarse una
sola vez en toda la página, idealmente en el <head> del documento:
<!-- Script principal de AdSense — cargar UNA sola vez -->
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXX"
crossorigin="anonymous">
</script>
Aspectos técnicos importantes de este script:
- El atributo
async: Hace que el script se descargue en paralelo sin bloquear el parsing del HTML. Fundamental para el rendimiento. - El parámetro
client: Tu identificador único de publisher (ca-pub-XXXXXXXXXXXXX). Este ID vincula los ingresos a tu cuenta de AdSense. - El atributo
crossorigin="anonymous": Permite que el navegador cargue el script desde el dominio de Google sin enviar credenciales.
Inserción de Bloques de Anuncios
Cada bloque de anuncio se define con un elemento <ins> seguido de un push al
array de AdSense. La estructura básica es:
<!-- Bloque de anuncio adaptable -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"
data-full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Lazy Loading de Anuncios con IntersectionObserver
Cargar todos los anuncios de golpe impacta negativamente en LCP e INP. La técnica recomendada es
usar IntersectionObserver para cargar los anuncios solo cuando el usuario se acerca
a ellos:
// Lazy Loading de bloques de AdSense con IntersectionObserver
const adObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const adElement = entry.target;
// Activar el anuncio solo cuando es visible
(adsbygoogle = window.adsbygoogle || []).push({});
adObserver.unobserve(adElement);
}
});
}, {
rootMargin: '200px 0px', // Pre-cargar 200px antes de que sea visible
threshold: 0
});
// Observar todos los bloques de anuncio below the fold
document.querySelectorAll('.adsbygoogle').forEach((ad, index) => {
if (index > 0) { // Excluir el primer anuncio (above the fold)
adObserver.observe(ad);
}
});
Define un min-height en el contenedor del anuncio para reservar espacio y evitar
saltos de diseño (CLS) cuando el iframe se inyecte. Para un banner 728×90 en desktop:
min-height: 90px. Para un anuncio adaptable en móvil:
min-height: 250px.