구글 애드센스 광고 로딩 안되면 영역 감추기 (2) ~ Intersection Observer

구글 애드센스 광고 로딩 안되면 영역 감추기 - eruLabo

구글 애드센스를 쓴다면 가끔 투명광고가 나올때가 있다. 뭐 말이 투명광고지 그냥 광고 로딩이 안되서 해당영역이 비어있는 경우이다. 애드핏의경우에는 이럴경우에 대체광고를 지정할수있는데 구글은 그런기능은...

https://erulabo.com/213

광고 영역 감추기, 그러나 문제 발생

해결 방안, 그러나 또 문제

신기능 Intersection Observer

코드 적용

function initAdClean() {
    const adElements = document.querySelectorAll('.ad');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            const ad = entry.target;

            if (entry.isIntersecting) {
                // 광고 로딩 상태를 확인하며 최대 대기 시간 적용
                checkAdLoadStatusWithTimeout(ad, 2000, 200);

                // 한 번 처리한 요소는 더 이상 관찰하지 않음
                observer.unobserve(ad);
            }
        })
    }, {
        root: null, // 뷰포트 기준
        rootMargin: '100px', // 요소가 화면에 들어오기 100px 전
        threshold: 0.1 // 요소가 10% 이상 보일 때 실행
    });

    adElements.forEach(ad => {
        observer.observe(ad);
    });
}Copy

function checkAdLoadStatusWithTimeout(ad, maxWaitTime, checkInterval) {
    let elapsed = 0;

    const intervalId = setInterval(() => {
        const adHeight = ad.offsetHeight;
        const adIns = ad.querySelector('ins');
        const googleAdStatus = adIns &&
            adIns.classList.contains('adsbygoogle') &&
            adIns.getAttribute('data-ad-status') !== 'filled';

        if (adHeight >= 50 && !googleAdStatus) {
            console.log("Ad loaded successfully.");
            clearInterval(intervalId);
        } else if (elapsed >= maxWaitTime) {
            console.log("Ad not loaded or timed out. Hiding the container.");
            ad.style.display = 'none';
            clearInterval(intervalId);
        }

        elapsed += checkInterval;
    }, checkInterval);
}Copy

결론