Material Design Look-and-feel 을 제공하는 Material Design Lite Toolkit 으로 티스토리 스킨을 구성하던 중, 애드센스 광고가 두차례 반복되어 표시되는 문제가 발생했다. Adsense 비동기/동기 코드로 테스트를 해봐도 동일한 문제가 발생하여 검색해 보니 MDL Github에 유사한 관련 이슈가 제기되어 있다.
Scroll Down 시킨 웹 페이지가 MDL Layout rendering 이 완료될 때 강제로 Scroll Top이 되니 Rendering 완료 시점에 대한 Event가 필요하다는 내용이었다. Adsense 광고도 Layout rendering 중간에 표시되다가 완료 시점에 다시 다른 애드센스 광고가 로드되는 문제이니 Layout rendering 완료 이벤트를 이용하여 Adsense가 한번만 로드되게 해야 한다.
Solution
mdl-componentupgraded event를 이용하여 Adsense script 실행.
document.addEventListener('mdl-componentupgraded', function () {
var element = document.createElement("script");
element.type = "text/javascript";
element.src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
element.async="async";
var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(element);
});Reference
반응형
댓글