Lazy Loading de AdSense: Guía Completa de Implementación 2025

<!-- HTML: Contenedor de anuncio -->
<div class="lazy-ad" data-ad-slot="1234567890" style="min-height: 250px;">
  <!-- Placeholder opcional -->
  <div class="ad-placeholder">Cargando anuncio...</div>
</div>

<!-- JavaScript: Implementación básica -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Configuración del observer
  const adObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadAd(entry.target);
        adObserver.unobserve(entry.target);
      }
    });
  }, {
    rootMargin: '300px', // Cargar 300px antes de ser visible
    threshold: 0.01
  });

  // Función para cargar el anuncio
  function loadAd(container) {
    const adSlot = container.dataset.adSlot;
    
    // Crear elemento ins de AdSense
    const adIns = document.createElement('ins');
    adIns.className = 'adsbygoogle';
    adIns.style.display = 'block';
    adIns.setAttribute('data-ad-client', 'ca-pub-XXXXXXXX');
    adIns.setAttribute('data-ad-slot', adSlot);
    adIns.setAttribute('data-ad-format', 'auto');
    adIns.setAttribute('data-full-width-responsive', 'true');
    
    // Limpiar placeholder y añadir anuncio
    container.innerHTML = '';
    container.appendChild(adIns);
    
    // Inicializar AdSense
    (adsbygoogle = window.adsbygoogle || []).push({});
  }

  // Observar todos los anuncios lazy
  document.querySelectorAll('.lazy-ad').forEach(ad => {
    adObserver.observe(ad);
  });
});
</script>

<script>
class LazyAdLoader {
  constructor(options = {}) {
    this.rootMargin = options.rootMargin || '300px';
    this.timeout = options.timeout || 5000;
    this.retryAttempts = options.retryAttempts || 2;
    this.observer = null;
    this.init();
  }

  init() {
    if (!('IntersectionObserver' in window)) {
      // Fallback para navegadores antiguos
      this.loadAllAds();
      return;
    }

    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      { rootMargin: this.rootMargin, threshold: 0.01 }
    );

    document.querySelectorAll('.lazy-ad').forEach(ad => {
      this.observer.observe(ad);
    });
  }

  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.loadAd(entry.target);
        this.observer.unobserve(entry.target);
      }
    });
  }

  async loadAd(container, attempt = 1) {
    try {
      const adSlot = container.dataset.adSlot;
      
      // Crear elemento de anuncio
      const adIns = document.createElement('ins');
      adIns.className = 'adsbygoogle';
      adIns.style.display = 'block';
      adIns.setAttribute('data-ad-client', 'ca-pub-XXXXXXXX');
      adIns.setAttribute('data-ad-slot', adSlot);
      adIns.setAttribute('data-ad-format', 'auto');
      adIns.setAttribute('data-full-width-responsive', 'true');
      
      container.innerHTML = '';
      container.appendChild(adIns);
      
      // Timeout para detectar fallos
      const timeoutPromise = new Promise((_, reject) =>
        setTimeout(() => reject(new Error('Ad load timeout')), this.timeout)
      );
      
      const loadPromise = new Promise((resolve) => {
        (adsbygoogle = window.adsbygoogle || []).push({});
        resolve();
      });
      
      await Promise.race([loadPromise, timeoutPromise]);
      
      // Marcar como cargado
      container.classList.add('ad-loaded');
      
    } catch (error) {
      console.error('Error loading ad:', error);
      
      // Reintentar si es posible
      if (attempt < this.retryAttempts) {
        setTimeout(() => this.loadAd(container, attempt + 1), 1000);
      } else {
        container.classList.add('ad-failed');
        container.innerHTML = '<!-- Ad failed to load -->';
      }
    }
  }

  loadAllAds() {
    // Fallback: cargar todos los anuncios inmediatamente
    document.querySelectorAll('.lazy-ad').forEach(ad => {
      this.loadAd(ad);
    });
  }
}

// Inicializar
document.addEventListener('DOMContentLoaded', () => {
  new LazyAdLoader({
    rootMargin: '300px',
    timeout: 5000,
    retryAttempts: 2
  });
});
</script>

<!-- CSS: Reservar espacio para diferentes tamaños -->
<style>
.lazy-ad {
  min-height: 250px; /* Altura mínima para anuncios display */
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.lazy-ad.ad-rectangle {
  min-height: 250px; /* 300x250 */
}

.lazy-ad.ad-leaderboard {
  min-height: 90px; /* 728x90 */
}

.lazy-ad.ad-large-rectangle {
  min-height: 280px; /* 336x280 */
}

.lazy-ad.ad-loaded {
  background: transparent;
}

.ad-placeholder {
  color: #999;
  font-size: 14px;
}
</style>

<!-- HTML: Usar clases específicas -->
<div class="lazy-ad ad-rectangle" data-ad-slot="1234567890">
  <div class="ad-placeholder">Anuncio</div>
</div>

<!-- En el <head> de tu página -->
<link rel="preconnect" href="https://pagead2.googlesyndication.com">
<link rel="preconnect" href="https://googleads.g.doubleclick.net">
<link rel="preconnect" href="https://adservice.google.com">
<link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">

// functions.php
function enqueue_lazy_adsense_script() {
  wp_enqueue_script(
    'lazy-adsense',
    get_template_directory_uri() . '/js/lazy-adsense.js',
    array(),
    '1.0.0',
    true
  );
}
add_action('wp_enqueue_scripts', 'enqueue_lazy_adsense_script');

// Shortcode para anuncios lazy
function lazy_adsense_shortcode($atts) {
  $atts = shortcode_atts(array(
    'slot' => '',
    'class' => 'ad-rectangle'
  ), $atts);
  
  return sprintf(
    '<div class="lazy-ad %s" data-ad-slot="%s"><div class="ad-placeholder">Anuncio</div></div>',
    esc_attr($atts['class']),
    esc_attr($atts['slot'])
  );
}
add_shortcode('lazy_ad', 'lazy_adsense_shortcode');

// components/LazyAd.jsx
import { useEffect, useRef, useState } from 'react';

export default function LazyAd({ adSlot, className = 'ad-rectangle' }) {
  const adRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !isLoaded) {
          setIsLoaded(true);
          
          // Cargar AdSense
          try {
            (window.adsbygoogle = window.adsbygoogle || []).push({});
          } catch (e) {
            console.error('AdSense error:', e);
          }
          
          observer.disconnect();
        }
      },
      { rootMargin: '300px' }
    );

    if (adRef.current) {
      observer.observe(adRef.current);
    }

    return () => observer.disconnect();
  }, [isLoaded]);

  return (
    <div ref={adRef} className={`lazy-ad ${className}`}>
      {isLoaded ? (
        <ins
          className="adsbygoogle"
          style={{ display: 'block' }}
          data-ad-client="ca-pub-XXXXXXXX"
          data-ad-slot={adSlot}
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
      ) : (
        <div className="ad-placeholder">Cargando anuncio...</div>
      )}
    </div>
  );
}

<!-- components/LazyAd.vue -->
<template>
  <div ref="adContainer" :class="['lazy-ad', adClass]">
    <ins
      v-if="isVisible"
      class="adsbygoogle"
      style="display:block"
      :data-ad-client="adClient"
      :data-ad-slot="adSlot"
      data-ad-format="auto"
      data-full-width-responsive="true"
    ></ins>
    <div v-else class="ad-placeholder">Cargando anuncio...</div>
  </div>
</template>

<script>
export default {
  props: {
    adSlot: { type: String, required: true },
    adClient: { type: String, default: 'ca-pub-XXXXXXXX' },
    adClass: { type: String, default: 'ad-rectangle' }
  },
  data() {
    return {
      isVisible: false,
      observer: null
    }
  },
  mounted() {
    this.observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          this.isVisible = true;
          this.$nextTick(() => {
            (window.adsbygoogle = window.adsbygoogle || []).push({});
          });
          this.observer.disconnect();
        }
      },
      { rootMargin: '300px' }
    );
    
    this.observer.observe(this.$refs.adContainer);
  },
  beforeUnmount() {
    if (this.observer) this.observer.disconnect();
  }
}
</script>

<!-- components/LazyAdSense.astro -->
---
interface Props {
  slot: string;
  className?: string;
}

const { slot, className = 'ad-rectangle' } = Astro.props;
---

<div class={`lazy-ad ${className}`} data-ad-slot={slot}>
  <div class="ad-placeholder">Anuncio</div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const container = entry.target as HTMLElement;
            const adSlot = container.dataset.adSlot;
            
            const adIns = document.createElement('ins');
            adIns.className = 'adsbygoogle';
            adIns.style.display = 'block';
            adIns.setAttribute('data-ad-client', 'ca-pub-XXXXXXXX');
            adIns.setAttribute('data-ad-slot', adSlot!);
            adIns.setAttribute('data-ad-format', 'auto');
            adIns.setAttribute('data-full-width-responsive', 'true');
            
            container.innerHTML = '';
            container.appendChild(adIns);
            
            (window.adsbygoogle = window.adsbygoogle || []).push({});
            observer.unobserve(container);
          }
        });
      },
      { rootMargin: '300px' }
    );
    
    document.querySelectorAll('.lazy-ad').forEach(ad => observer.observe(ad));
  });
</script>

<style>
  .lazy-ad {
    min-height: 250px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
  }
  
  .ad-placeholder {
    color: #999;
    font-size: 14px;
  }
</style>

class ProgressiveLazyLoader {
  constructor() {
    this.adsQueue = [];
    this.isLoading = false;
    this.maxConcurrent = 2; // Máximo 2 anuncios cargando simultáneamente
    this.init();
  }

  init() {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            this.queueAd(entry.target);
            observer.unobserve(entry.target);
          }
        });
      },
      { rootMargin: '300px' }
    );

    document.querySelectorAll('.lazy-ad').forEach(ad => observer.observe(ad));
  }

  queueAd(container) {
    this.adsQueue.push(container);
    this.processQueue();
  }

  async processQueue() {
    if (this.isLoading || this.adsQueue.length === 0) return;
    
    this.isLoading = true;
    const batch = this.adsQueue.splice(0, this.maxConcurrent);
    
    await Promise.all(batch.map(ad => this.loadAd(ad)));
    
    this.isLoading = false;
    
    // Procesar siguiente batch si hay más
    if (this.adsQueue.length > 0) {
      setTimeout(() => this.processQueue(), 500);
    }
  }

  async loadAd(container) {
    return new Promise((resolve) => {
      const adSlot = container.dataset.adSlot;
      
      const adIns = document.createElement('ins');
      adIns.className = 'adsbygoogle';
      adIns.style.display = 'block';
      adIns.setAttribute('data-ad-client', 'ca-pub-XXXXXXXX');
      adIns.setAttribute('data-ad-slot', adSlot);
      
      container.innerHTML = '';
      container.appendChild(adIns);
      
      (adsbygoogle = window.adsbygoogle || []).push({});
      
      setTimeout(resolve, 1000); // Dar tiempo para que cargue
    });
  }
}

new ProgressiveLazyLoader();

class AdaptiveLazyLoader {
  constructor() {
    this.connectionSpeed = this.getConnectionSpeed();
    this.rootMargin = this.calculateRootMargin();
    this.init();
  }

  getConnectionSpeed() {
    // Network Information API
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    
    if (!connection) return 'unknown';
    
    const effectiveType = connection.effectiveType;
    
    if (effectiveType === '4g') return 'fast';
    if (effectiveType === '3g') return 'medium';
    return 'slow';
  }

  calculateRootMargin() {
    // Ajustar según velocidad de conexión
    switch(this.connectionSpeed) {
      case 'fast': return '500px';
      case 'medium': return '300px';
      case 'slow': return '150px';
      default: return '300px';
    }
  }

  init() {
    console.log(`Connection: ${this.connectionSpeed}, rootMargin: ${this.rootMargin}`);
    
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            this.loadAd(entry.target);
            observer.unobserve(entry.target);
          }
        });
      },
      { rootMargin: this.rootMargin }
    );

    document.querySelectorAll('.lazy-ad').forEach(ad => observer.observe(ad));
  }

  loadAd(container) {
    // Implementación de carga...
  }
}

new AdaptiveLazyLoader();

<!-- HTML: Marcar anuncios con prioridad -->
<div class="lazy-ad" data-ad-slot="1234567890" data-priority="high"></div>
<div class="lazy-ad" data-ad-slot="0987654321" data-priority="medium"></div>
<div class="lazy-ad" data-ad-slot="1122334455" data-priority="low"></div>

<script>
class PriorityLazyLoader {
  constructor() {
    this.priorityMap = { high: 1, medium: 2, low: 3 };
    this.init();
  }

  init() {
    const ads = Array.from(document.querySelectorAll('.lazy-ad'));
    
    // Ordenar por prioridad
    ads.sort((a, b) => {
      const priorityA = this.priorityMap[a.dataset.priority] || 2;
      const priorityB = this.priorityMap[b.dataset.priority] || 2;
      return priorityA - priorityB;
    });

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const priority = entry.target.dataset.priority || 'medium';
            const delay = this.getDelay(priority);
            
            setTimeout(() => {
              this.loadAd(entry.target);
            }, delay);
            
            observer.unobserve(entry.target);
          }
        });
      },
      { rootMargin: '300px' }
    );

    ads.forEach(ad => observer.observe(ad));
  }

  getDelay(priority) {
    return { high: 0, medium: 200, low: 500 }[priority] || 200;
  }

  loadAd(container) {
    // Implementación de carga...
  }
}

new PriorityLazyLoader();
</script>

// Console: Verificar cuántos anuncios se cargaron
document.querySelectorAll('.adsbygoogle').length

// Console: Ver qué anuncios están en viewport
const ads = document.querySelectorAll('.lazy-ad');
ads.forEach((ad, i) => {
  const rect = ad.getBoundingClientRect();
  const inView = rect.top < window.innerHeight && rect.bottom > 0;
  console.log(`Ad ${i}: ${inView ? 'visible' : 'hidden'}`);
});

// Console: Simular scroll lento para testing
let scrollPos = 0;
const interval = setInterval(() => {
  scrollPos += 100;
  window.scrollTo(0, scrollPos);
  if (scrollPos >= document.body.scrollHeight) clearInterval(interval);
}, 500);

// Lazy loading con consentimiento GDPR
class GDPRLazyLoader {
  constructor() {
    this.hasConsent = false;
    this.pendingAds = [];
    this.checkConsent();
  }

  checkConsent() {
    // Verificar si el usuario dio consentimiento
    // Esto depende de tu CMP (Consent Management Platform)
    this.hasConsent = localStorage.getItem('gdpr_consent') === 'true';
    
    if (this.hasConsent) {
      this.init();
    } else {
      // Esperar evento de consentimiento
      window.addEventListener('gdpr_consent_given', () => {
        this.hasConsent = true;
        this.init();
        this.loadPendingAds();
      });
    }
  }

  init() {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            if (this.hasConsent) {
              this.loadAd(entry.target);
            } else {
              this.pendingAds.push(entry.target);
            }
            observer.unobserve(entry.target);
          }
        });
      },
      { rootMargin: '300px' }
    );

    document.querySelectorAll('.lazy-ad').forEach(ad => observer.observe(ad));
  }

  loadPendingAds() {
    this.pendingAds.forEach(ad => this.loadAd(ad));
    this.pendingAds = [];
  }

  loadAd(container) {
    // Implementación de carga...
  }
}

new GDPRLazyLoader();