개발
구글 애드센스 광고 로딩 안되면 영역 감추기
35 views as of November 14, 2024.
구글 애드센스를 쓴다면 가끔 투명광고가 나올때가 있다.
뭐 말이 투명광고지 그냥 광고 로딩이 안되서 해당영역이 비어있는 경우이다.
애드핏의경우에는 이럴경우에 대체광고를 지정할수있는데 구글은 그런기능은 없고 그냥 해당영역을 통으로 비워둔다.
이런 부분이 전체적인 웹사이트 구성에선 이빠진 느낌이 심하기들기 마련.
광고 영역 자바 스크립트로 감추기
그래서 자바스크립트로 아래처럼 현재 페이지 광고를 순회하며 광고를 체크하는 함수를 만들어 사용할 수 있다.
function initAdClean() {
const adElements = document.querySelectorAll('.ad');
adElements.forEach(ad => {
const adHeight = ad.offsetHeight;
const adIns = ad.querySelector('ins');
if (adHeight < 50 || adIns.getAttribute('data-ad-status') === 'unfilled') {
console.log("Ad not loaded. Hiding the container.");
ad.style.display = 'none';
} else {
console.log("Ad loaded successfully.");
}
});
}Copy위 스크립트를 이용하려면 광고 코드를 한번 div로 감싸는게 좋다.
예를들어 내 광고 코드는 아래와같은 구조로 여러개 운영중이다.
<div align="center" class="ad ad_pc ad_mobile_sm">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx"
crossorigin="anonymous"></script>
<!-- ad_side_300x600 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>Copy이러면
ad 클래스 셀렉터로 모든광고를 일괄로 짚어 순회 할 수 있다.그리고 이 스크립트를 페이지 로딩 시 바로 실행시켜버리면 광고가 로딩되기전에 사라질 수 있으니 아래처럼 타임아웃을 걸어 실행시키면 끝.
setTimeout(() => {
initAdClean(); // 로드 안된 광고 안보이게 처리
}, 1000);Copy손도 깔-끔
문제 발생?
실제로 쓰던중에 발견한 사실인데, 광고가 한 화면에 들어올정도면 위 스크립트로도 충분한데, 본문이 긴 스크롤이 발생할정도로 길어지면 하단의 광고는 로딩전에 숨겨진다는 사실을 발견했다.
고찰과 새로운 방법에 대한 해결을 보려면 아래 글로-
구글 애드센스 광고 로딩 안되면 영역 감추기 (2) ~ Intersection Observer - eruLabo
구글 애드센스 광고 로딩 안되면 영역 감추기 - eruLabo구글 애드센스를 쓴다면 가끔 투명광고가 나올때가 있다. 뭐 말이 투명광고지 그냥 광고 로딩이 안되서 해당영역이 비어있는 경우이다. 애드핏의경우에는 이럴...
https://erulabo.com/221
#개발 #구글 애드센스 #광고
0
개의 댓글