개발
Frontend
구글 애드센스 광고 로딩 안되면 영역 감추기 (2) ~ Intersection Observer
44 views as of November 21, 2024.
구글 애드센스 광고 로딩 안되면 영역 감추기 - eruLabo
구글 애드센스를 쓴다면 가끔 투명광고가 나올때가 있다. 뭐 말이 투명광고지 그냥 광고 로딩이 안되서 해당영역이 비어있는 경우이다. 애드핏의경우에는 이럴경우에 대체광고를 지정할수있는데 구글은 그런기능은...
https://erulabo.com/213
광고 영역 감추기, 그러나 문제 발생
기존 글에서 투명 광고 처리에 대해서 스크립트로 처리하는 방법에 대해서 적용하는 과정을 거쳤다.
근데 실제로 본문량이 너무 길면 모든 광고가 페이지 로딩시 한번에 로딩되는게아니라 어느정도 사용자 디바이스의 뷰에 들어와야 로딩이 시작되는걸 발견했다.
즉 본문이 엄청 길어서 위아래 스크롤이 3-4천 픽셀이 넘어가게되면 최하단에 등록한 광고는 로딩자체가 시작되지 않은 상태에서 상태값 제어를 해버리면 로딩도 되기전에 광고영역이 감춰진다는 것이다.
해결 방안, 그러나 또 문제
해결책은 간단히 광고가 화면에 들어오면 로딩 여부에 대한 검증처리를 하면되는것이다.
고전적인 방법으로는 화면 스크롤 이벤트에 해당 광고 영역의 offsetHeight가 인접했을때 검증 함수를 실행시키면 된다.
하지만 스크롤이벤트를 한번이라도 써봤으면 실제로 스크롤 이벤트가 얼마나 많은 리소스 자원이나 성능 저하를 일으키는지 느낄 수 있다.
요즘 클라이언트 성능도 워낙좋아지고 디바이스도 좋다보니 예전만큼은 아니지만 픽셀단위로 스크롤 이벤트 체크를한다는거 자체가 부담이 크게 올 수 밖에 없는건 사실이다.
신기능 Intersection Observer
이런 부분에 대해서 요즘 브라우저는 대부분 Intersection Observer 라는 새로운 기능으로써 이 기능을 대체 지원한다.
기존 스크롤 이벤트 방식과 인터섹션 옵저버 방식을 비교해보자.
기능 | 스크롤 이벤트 방식 | Intersection Observer |
성능 | 이벤트 호출이 빈번하고 비효율적 | 필요한 경우에만 최적화된 호출 |
코드 복잡성 | 조건 계산 및 상태 관리 필요 | 간결하고 브라우저가 상태 자동 관리 |
디바운싱/스로틀링 여부 | 개발자가 직접 구현 | 기본 제공 |
정밀한 조건 설정 | 복잡한 수동 계산 필요 | threshold, rootMargin 기능 제공 |
브라우저 지원 | 오래된 브라우저 포함 | 최신 브라우저, 구형 + 폴리필 |
대충 비교만해도 예전 스크롤 이벤트 방식을 대체하라고 나온 아주 좋은 기능임을 알 수 있다.
코드 적용
그럼 실제로 광고 영역에 대해서 인터섹션 옵저버를 적용해보자.
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
코드는 위와같이
IntersectionObserver(entries, options)
으로 선언할 수 있다.if (entry.isIntersecting) 조건문을 통해 해당 객체가 뷰포트(화면)에 들어왔을때 기능 처리를 할 수 있다.
위 코드에서는 해당 뷰포트의 상하 100px를 추가 마진 영역을 두고 이 영역이 화면에 10%이상 들어온 순간 함수가 작동 되는 구조이다.
그리고 마지막으로 객체를 가져와서 해당 옵저버 이벤트를 활성화 시켜두면된다.
광고 로딩 상태를 확인하는 함수는 아래 처럼 별도로 구현해두었다.
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
검증코드는 0.2초마다 최대 2초까지 광고 로딩을 검증한다.
나같은 경우는 광고가 너무 작거나(높이가 50px 미만) 구글광고의 경우
data-ad-status
값이 filled
가 아닌 경우 광고를 감추게 처리했다.결론
일단 이렇게 처리하느 의도대로 페이지 최하단에 있는 광고가 내 스크립트에 의해 먼저 짤리지는 않았다.
처리방법에 대해알아보다가 스크롤 이벤트를 대응하는 이런 기능이 나왔을줄은 꿈에도 몰랐다는건 비밀...
역시 배움에 끝은 없는거 같다.
#개발 #구글 애드센스 #광고 #Intersection Observer API #인터섹션 옵저버
0
개의 댓글
Collection. Frontend
01.
랜덤으로 한글이름 생성하기
2018
02.
Ajax를 이용해 Post 요청하는 방법들
2018
03.
jquery filter, 실시간 검색
2021
04.
브라우저별로 스크립트 따로 쓰는 법, ie 조건문
2021
05.
es5만 지원되는 ie같은 브라우저에 es6 쓰는 방법, 바벨(babeljs)
2021
06.
Javascript 함수 중복 호출 막기(제어)
2024
07.
Javascript 객체 병합
2024
08.
코드 하이라이터(highlight.js) 적용 및 플로라 에디터 연동
2024
09.
구글 애드센스 광고 로딩 안되면 영역 감추기 (2) ~ Intersection Observer
2024
10.
구글 폰트 다운받아 로컬 호스팅 하기
2024