roi-theme/wp-content/themes/apus-theme/assets/js/adsense-loader.js

/**
 * AdSense Delayed Loader
 *
 * This script delays the loading of Google AdSense until user interaction
 * or a timeout occurs, improving initial page load performance.
 *
 * @package Apus_Theme
 * @since 1.0.0
 */

(function() {
    'use strict';

    // Configuration
    const CONFIG = {
        timeout: 5000,              // Fallback timeout in milliseconds
        loadedClass: 'adsense-loaded',
        debug: false                // Set to true for console logging
    };

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

    /**
     * Log debug messages if debug mode is enabled
     * @param {string} message - The message to log
     */
    function debugLog(message) {
        if (CONFIG.debug && typeof console !== 'undefined') {
            console.log('[AdSense Loader] ' + message);
        }
    }

    /**
     * Load AdSense scripts and initialize ads
     */
    function loadAdSense() {
        // Prevent multiple loads
        if (adsenseLoaded) {
            debugLog('AdSense already loaded, skipping...');
            return;
        }

        adsenseLoaded = true;
        debugLog('Loading AdSense scripts...');

        // Clear the timeout if it exists
        if (loadTimeout) {
            clearTimeout(loadTimeout);
            loadTimeout = null;
        }

        // Remove event listeners to prevent multiple triggers
        removeEventListeners();

        // Load AdSense script tags
        loadAdSenseScripts();

        // Execute AdSense push scripts
        executeAdSensePushScripts();

        // Add loaded class to body
        document.body.classList.add(CONFIG.loadedClass);

        debugLog('AdSense loading complete');
    }

    /**
     * Find and load all delayed AdSense script tags
     */
    function loadAdSenseScripts() {
        const delayedScripts = document.querySelectorAll('script[data-adsense-script]');

        if (delayedScripts.length === 0) {
            debugLog('No delayed AdSense scripts found');
            return;
        }

        debugLog('Found ' + delayedScripts.length + ' delayed AdSense script(s)');

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

            // Copy attributes
            if (oldScript.src) {
                newScript.src = oldScript.src;
            }

            // Set async attribute
            newScript.async = true;

            // Copy crossorigin if present
            if (oldScript.getAttribute('crossorigin')) {
                newScript.crossorigin = oldScript.getAttribute('crossorigin');
            }

            // Replace old script with new one
            oldScript.parentNode.replaceChild(newScript, oldScript);
        });
    }

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

        if (delayedPushScripts.length === 0) {
            debugLog('No delayed AdSense push scripts found');
            return;
        }

        debugLog('Found ' + delayedPushScripts.length + ' delayed push script(s)');

        // Initialize adsbygoogle array if it doesn't exist
        window.adsbygoogle = window.adsbygoogle || [];

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

            // Create and execute new script
            const newScript = document.createElement('script');
            newScript.innerHTML = scriptContent;
            newScript.type = 'text/javascript';

            // Replace old script with new one
            oldScript.parentNode.replaceChild(newScript, oldScript);
        });
    }

    /**
     * Event handler for user interactions
     */
    function handleUserInteraction() {
        debugLog('User interaction detected');
        loadAdSense();
    }

    /**
     * Remove all 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 });
    }

    /**
     * Add event listeners for user interactions
     */
    function addEventListeners() {
        debugLog('Adding event listeners for user interaction');

        // Scroll event - load on first scroll
        window.addEventListener('scroll', handleUserInteraction, { passive: true, once: true });

        // Mouse movement - load when user moves mouse
        window.addEventListener('mousemove', handleUserInteraction, { passive: true, once: true });

        // Touch events - load on first touch (mobile)
        window.addEventListener('touchstart', handleUserInteraction, { passive: true, once: true });

        // Click events - load on first click
        window.addEventListener('click', handleUserInteraction, { passive: true, once: true });

        // Keyboard events - load on first key press
        window.addEventListener('keydown', handleUserInteraction, { passive: true, once: true });
    }

    /**
     * Set timeout fallback to load AdSense after specified time
     */
    function setTimeoutFallback() {
        debugLog('Setting timeout fallback (' + CONFIG.timeout + 'ms)');

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

    /**
     * Initialize the AdSense delayed loader
     */
    function init() {
        // Check if AdSense delay is enabled
        if (!window.apusAdsenseDelayed) {
            debugLog('AdSense delay not enabled');
            return;
        }

        debugLog('Initializing AdSense delayed loader');

        // Check if page is already interactive or complete
        if (document.readyState === 'interactive' || document.readyState === 'complete') {
            debugLog('Page already loaded, starting listeners');
            addEventListeners();
            setTimeoutFallback();
        } else {
            // Wait for DOM to be ready
            debugLog('Waiting for DOMContentLoaded');
            document.addEventListener('DOMContentLoaded', function() {
                debugLog('DOMContentLoaded fired');
                addEventListeners();
                setTimeoutFallback();
            });
        }
    }

    // Start initialization
    init();

})();