웹사이트 광고차단 통계 분석 - Javascript와 GA4(구글 애널리틱스)를 이용한 데이터 수집

Google Analytics  |  Google for Developers

Google 애널리틱스를 사용하면 디지털 전략을 세부적으로 조정하고, 캠페인을 최적화하며, 온라인 인지도를 한 단계 업그레이드할 수 있습니다.

developers.google.com

채찍피티야, 애드블럭당하는 스핔이그려줘... 아... 아앗

1. 구글 애널리틱스에서 관련지표가 있지않을까?

광고 노출여부에 대한 지표

2. 광고차단 프로그램의 원리

애드블록의 광고 차단 원리는 무엇일까? - 요즘IT 발췌

3. 광고 차단 감지 스크립트

const adblockCheckState = {
    domBaitBlocked: null,
    scriptBlocked: null,
    hasSent: false
};

function getAdblockResult(domBaitBlocked, scriptBlocked) {
    if (domBaitBlocked && scriptBlocked) return 'both';
    if (domBaitBlocked) return 'dom_only';
    if (scriptBlocked) return 'script_only';
    return 'none';
}

function trySendAdblockCheckEvent() {
    if (adblockCheckState.hasSent) return;
    if (adblockCheckState.domBaitBlocked === null || adblockCheckState.scriptBlocked === null) return;

    adblockCheckState.hasSent = true;

    if (typeof window.gtag !== 'function') {
        return;
    }

    window.gtag('event', 'adblock_check', {
        adblock_dom_bait: adblockCheckState.domBaitBlocked ? 'yes' : 'no',
        adblock_script_blocked: adblockCheckState.scriptBlocked ? 'yes' : 'no',
        adblock_result: getAdblockResult(
            adblockCheckState.domBaitBlocked,
            adblockCheckState.scriptBlocked
        )
    });
}

function setAdblockDomBaitStatus(isBlocked) {
    if (adblockCheckState.domBaitBlocked !== null) return;
    adblockCheckState.domBaitBlocked = isBlocked;
    trySendAdblockCheckEvent();
}

function setAdblockScriptBlockedStatus(isBlocked) {
    if (adblockCheckState.scriptBlocked !== null) return;
    adblockCheckState.scriptBlocked = isBlocked;
    trySendAdblockCheckEvent();
}

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

    if (!document.body) {
        return;
    }

    const bait = document.createElement('div');
    bait.className = 'adsbox ad-banner google-ad adsbygoogle';
    bait.setAttribute('aria-hidden', 'true');
    bait.style.width = '1px';
    bait.style.height = '1px';
    bait.style.position = 'absolute';
    bait.style.left = '-9999px';
    bait.style.top = '-9999px';
    bait.style.pointerEvents = 'none';
    bait.style.opacity = '0';

    document.body.appendChild(bait);

    window.setTimeout(() => {
        const computedStyle = window.getComputedStyle(bait);
        const isBlocked = !bait.isConnected
            || bait.offsetHeight === 0
            || bait.offsetWidth === 0
            || computedStyle.display === 'none'
            || computedStyle.visibility === 'hidden';

        setAdblockDomBaitStatus(isBlocked);
        bait.remove();
    }, 300);
}

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

    const ads = document.querySelectorAll('ins.adsbygoogle');
    if (!ads.length) {
        setAdblockScriptBlockedStatus(false);
        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-7022872918531044';
    s.crossOrigin = 'anonymous';

    s.onload = () => {
        setAdblockScriptBlockedStatus(false);

        ads.forEach((el) => {
            const hasStatus = el.hasAttribute('data-adsbygoogle-status');
            const hasAdStatus = el.hasAttribute('data-ad-status');
            const hasIframe = !!el.querySelector('iframe');
            const isFilled = el.getAttribute('data-ad-status') === 'filled';
            const isUnfilled = el.getAttribute('data-ad-status') === 'unfilled';

            if (!hasStatus && !hasAdStatus && !hasIframe && !isFilled && !isUnfilled) {
                window.adsbygoogle = window.adsbygoogle || [];
                window.adsbygoogle.push({});
            }
        });
    };

    s.onerror = () => {
        setAdblockScriptBlockedStatus(true);
    };

    document.head.appendChild(s);
}

document.addEventListener('DOMContentLoaded', function () {
    initAdblockCheck();
    initAd();
});
Copy

4. GA4 광고차단 지표 등록

애널리틱스 맞춤 정의 지표 추가

adblock_check 지표가 보여야한다

5. GA4 보고서 작성

수치를 보기위한 이벤트 수 추가

와우~ 스크립트 작동결과가 한눈에...

광고 허용 세그먼트 추가

광고 차단 세그먼트 추가

세로열에 깔끔하게 허용과 차단으로 구분된다.

확실히 모바일 애드블럭류가 스크립트 차단은 엄청 잘한다.

광고 허용과 차단을 도넛차트로 볼 수 있다.

사실 그냥 광고 봐주시는 분들이 더 많아서 스피키는 쪼아요!