구글 애드센스 광고 로딩 안되면 영역 감추기 (3) ~ 사용자 인터렉션 핸들러

애드센스 스크립트 지연 로드

수동 단위 광고 코드 생성기 화면

왜 갑자기 웹 지표이야기?

크롬 브라우저를 이용해 Lighthouse 기능으로 코어 웹 바이탈 검사하기

요즘 SEO를 위해 웹사이트를 최적화 하다보면 여러 보조지표가 눈에 보인다.예전엔 단순히 페이지 로딩속도, 메타데이터 정도만 확인하는게 검색엔진 최적화였지만, 그런 조건을 만족하는 피싱사이트가 많아지자 검색엔진도 여러가지 보조지표를 통해 웹사이트가 유용한 정보를 가지고있고, 사용자 친화적인 사이트인지 판...

https://erulabo.com/269

광고 로딩 최적화

function initAdScript() {
    const doInit = () => {
        initAd();

        // 이벤트 제거
        window.removeEventListener('scroll', handleUserInteraction);
        window.removeEventListener('mousemove', handleUserInteraction);
        window.removeEventListener('touchstart', handleUserInteraction);
        window.removeEventListener('keydown', handleUserInteraction);
    };

    const handleUserInteraction = () => doInit();

    // 사용자 입력 감지
    window.addEventListener('scroll', handleUserInteraction, { passive: true });
    window.addEventListener('mousemove', handleUserInteraction, { passive: true });
    window.addEventListener('touchstart', handleUserInteraction, { passive: true });
    window.addEventListener('keydown', handleUserInteraction);

    // 시간 초과 시 강제 초기화 (예: 5초 후)
    setTimeout(doInit, 5000);
}Copy

function initAd() {
    if (initAd.hasInitialized) return;
    initAd.hasInitialized = true;

    // 애드센스 스크립트 삽입
    const s = document.createElement('script');
    s.async = true;
    s.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-000000000000';
    s.crossOrigin = 'anonymous';
    s.onload = () => {
        document.querySelectorAll('.adsbygoogle').forEach((el) => {
            if (!el.getAttribute('data-adsbygoogle-status')) {
                (adsbygoogle = window.adsbygoogle || []).push({});
            }
        });

        setTimeout(() => {
            initAdClean();
        }, 1000); // 광고 렌더링 시간 확보
    };

    document.head.appendChild(s);
}Copy

<ins class="adsbygoogle" style="display:block;width:300px;height:600px" data-ad-client="ca-pub-0000000000000" data-ad-slot="0000000000000"></ins>Copy

function initAdClean() {
    if (initAdClean.hasInitialized) return;
    initAdClean.hasInitialized = true;

    setTimeout(() => {
        const ads = document.querySelectorAll('.adsbygoogle');
        ads.forEach(ad => {
            const wrapper = ad.closest('.ad, .google-auto-placed');
            if (!wrapper) return;

            const status = ad.getAttribute('data-ad-status');
            if (status !== 'filled') {
                wrapper.remove();

                fetchAsidePost();
            }
        });
    }, 500);
}Copy

본문 내용이 길때 Intersection Observer 방식으로

function initAdClean() {
    if (initAdClean.hasInitialized) return;
    initAdClean.hasInitialized = true;

    const ads = document.querySelectorAll('.adsbygoogle');

    const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
            const ad = entry.target;
            if (!entry.isIntersecting) return;

            const wrapper = ad.closest('.ad, .google-auto-placed');
            if (!wrapper) return;

            let elapsed = 0;
            const maxWait = 1000;
            const interval = 200;

            const checkAdInterval = setInterval(() => {
                const status = ad.getAttribute('data-ad-status');
                if (status === 'filled') {
                    clearInterval(checkAdInterval);
                } else if (elapsed >= maxWait) {
                    clearInterval(checkAdInterval);
                    wrapper.remove();

                    if (!fetchAsidePost.hasFetched) {
                        fetchAsidePost();
                    }
                }
                elapsed += interval;
            }, interval);

            obs.unobserve(ad); // 1번만 처리
        });
    }, {
        root: null,
        rootMargin: '1000px 0px',
        threshold: 0.1 // 요소가 10% 이상 보이면 감지
    });

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

결론