roi-theme/assets/js/adsense-loader.js

/**
 * Cargador Retrasado de AdSense
 *
 * Este script retrasa la carga de Google AdSense hasta que haya interacción
 * del usuario o se cumpla un timeout, mejorando el rendimiento de carga inicial.
 *
 * @package ROI_Theme
 * @since 1.0.0
 */

(function() {
    'use strict';

    // Configuración
    const CONFIG = {
        timeout: 5000,              // Timeout de fallback en milisegundos
        loadedClass: 'adsense-loaded',
        debug: false                // Cambiar a true para logs en consola
    };

    // Estado
    let adsenseLoaded = false;
    let loadTimeout = null;

    /**
     * Registra mensajes de debug si el modo debug está habilitado
     * @param {string} message - El mensaje a registrar
     */
    function debugLog(message) {
        if (CONFIG.debug && typeof console !== 'undefined') {
            console.log('[AdSense Loader] ' + message);
        }
    }

    /**
     * Carga los scripts de AdSense e inicializa los ads
     */
    function loadAdSense() {
        // Prevenir múltiples cargas
        if (adsenseLoaded) {
            debugLog('AdSense ya fue cargado, omitiendo...');
            return;
        }

        adsenseLoaded = true;
        debugLog('Cargando scripts de AdSense...');

        // Limpiar el timeout si existe
        if (loadTimeout) {
            clearTimeout(loadTimeout);
            loadTimeout = null;
        }

        // Remover event listeners para prevenir múltiples triggers
        removeEventListeners();

        // Cargar etiquetas de script de AdSense
        loadAdSenseScripts();

        // Ejecutar scripts de push de AdSense
        executeAdSensePushScripts();

        // Agregar clase loaded al body
        document.body.classList.add(CONFIG.loadedClass);

        debugLog('Carga de AdSense completada');
    }

    /**
     * Encuentra y carga todas las etiquetas de script de AdSense retrasadas
     */
    function loadAdSenseScripts() {
        const delayedScripts = document.querySelectorAll('script[data-adsense-script]');

        if (delayedScripts.length === 0) {
            debugLog('No se encontraron scripts retrasados de AdSense');
            return;
        }

        debugLog('Se encontraron ' + delayedScripts.length + ' script(s) retrasado(s) de AdSense');

        delayedScripts.forEach(function(oldScript) {
            const newScript = document.createElement('script');

            // Copiar atributos
            if (oldScript.src) {
                newScript.src = oldScript.src;
            }

            // Establecer atributo async
            newScript.async = true;

            // Copiar crossorigin si está presente
            if (oldScript.getAttribute('crossorigin')) {
                newScript.crossorigin = oldScript.getAttribute('crossorigin');
            }

            // Reemplazar script viejo con el nuevo
            oldScript.parentNode.replaceChild(newScript, oldScript);
        });
    }

    /**
     * Ejecuta scripts de push de AdSense retrasados
     */
    function executeAdSensePushScripts() {
        const delayedPushScripts = document.querySelectorAll('script[data-adsense-push]');

        if (delayedPushScripts.length === 0) {
            debugLog('No se encontraron scripts de push retrasados de AdSense');
            return;
        }

        debugLog('Se encontraron ' + delayedPushScripts.length + ' script(s) de push retrasado(s)');

        // Inicializar array adsbygoogle si no existe
        window.adsbygoogle = window.adsbygoogle || [];

        delayedPushScripts.forEach(function(oldScript) {
            const scriptContent = oldScript.innerHTML;

            // Crear y ejecutar nuevo script
            const newScript = document.createElement('script');
            newScript.innerHTML = scriptContent;
            newScript.type = 'text/javascript';

            // Reemplazar script viejo con el nuevo
            oldScript.parentNode.replaceChild(newScript, oldScript);
        });
    }

    /**
     * Manejador de eventos para interacciones del usuario
     */
    function handleUserInteraction() {
        debugLog('Interacción del usuario detectada');
        loadAdSense();
    }

    /**
     * Remueve todos los event listeners
     */
    function removeEventListeners() {
        window.removeEventListener('scroll', handleUserInteraction, { passive: true });
        window.removeEventListener('mousemove', handleUserInteraction, { passive: true });
        window.removeEventListener('touchstart', handleUserInteraction, { passive: true });
        window.removeEventListener('click', handleUserInteraction, { passive: true });
        window.removeEventListener('keydown', handleUserInteraction, { passive: true });
    }

    /**
     * Agrega event listeners para interacciones del usuario
     */
    function addEventListeners() {
        debugLog('Agregando event listeners para interacción del usuario');

        // Evento de scroll - cargar en primer scroll
        window.addEventListener('scroll', handleUserInteraction, { passive: true, once: true });

        // Movimiento de mouse - cargar cuando el usuario mueve el mouse
        window.addEventListener('mousemove', handleUserInteraction, { passive: true, once: true });

        // Eventos táctiles - cargar en primer toque (móviles)
        window.addEventListener('touchstart', handleUserInteraction, { passive: true, once: true });

        // Eventos de click - cargar en primer click
        window.addEventListener('click', handleUserInteraction, { passive: true, once: true });

        // Eventos de teclado - cargar en primera pulsación de tecla
        window.addEventListener('keydown', handleUserInteraction, { passive: true, once: true });
    }

    /**
     * Establece timeout de fallback para cargar AdSense después del tiempo especificado
     */
    function setTimeoutFallback() {
        debugLog('Estableciendo timeout de fallback (' + CONFIG.timeout + 'ms)');

        loadTimeout = setTimeout(function() {
            debugLog('Timeout alcanzado, cargando AdSense');
            loadAdSense();
        }, CONFIG.timeout);
    }

    /**
     * Inicializa el cargador retrasado de AdSense
     */
    function init() {
        // Verificar si el retardo de AdSense está habilitado
        if (!window.roidsenseDelayed) {
            debugLog('Retardo de AdSense no habilitado');
            return;
        }

        debugLog('Inicializando cargador retrasado de AdSense');

        // Verificar si la página ya está interactiva o completa
        if (document.readyState === 'interactive' || document.readyState === 'complete') {
            debugLog('Página ya cargada, iniciando listeners');
            addEventListeners();
            setTimeoutFallback();
        } else {
            // Esperar a que el DOM esté listo
            debugLog('Esperando a DOMContentLoaded');
            document.addEventListener('DOMContentLoaded', function() {
                debugLog('DOMContentLoaded disparado');
                addEventListeners();
                setTimeoutFallback();
            });
        }
    }

    // Iniciar inicialización
    init();

})();