애드센스 코드 작성 가이드

애드센스는 선택 사항이며 사용 여부를 결정할 수 있습니다. 이 튜토리얼은 모든 콘텐츠가 완전히 로드된 후 adsbygoogle.js 스크립트의 로드를 지연하여 adsbygoogle.js 스크립트를 불필요하게 반복하지 않도록 하는데 유용합니다.

적용하거나 Google Adsense에서 설정한 표준 방법을 사용할 수 있습니다.

애드센스 스크립트 활성화

일반적으로 광고 단위를 추가하면 아래와 같은 코드가 표시됩니다.

<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000' 
     crossorigin='anonymous'></script>
<!--[ Adsense display ad unit ]--> 
<ins class='adsbygoogle' 
     style='display:block' 
     data-ad-client='ca-pub-0000000000000000' 
     data-ad-slot='0000000000' 
     data-ad-format='auto' 
     data-full-width-responsive='true'></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위의 코드는 Google Adsense에서 제공하는 디스플레이 광고 단위 코드이며 문제가 없습니다. 하지만 애드센스 광고 단위가 2개 이상이면 똑같은 adsbygoogle.js 스크립트 코드를 두 번 반복해야 합니다.

이를 방지하기 위해서 표준 스크립트를 사용하거나 lazyAdsense를 사용하여 Adsense 스크립트를 활성화하는 두 가지 방법을 준비했습니다.

표준 스크립트 코드

1. Blogger 대시보드에서 테마를 클릭합니다.
2. 맞춤설정 버튼 옆에 있는 아래쪽 화살표 아이콘을 클릭합니다.
3. HTML 편집을 클릭하면 테마 에디터 페이지로 이동합니다.
4. </head>를 찾은 뒤 아래에 있는 코드를 붙여넣습니다.

올바른 적용 예시는 다음과 같습니다.

<!--[ Defer Adsense script use shinsenter/defer.js ]-->
<!--<script type="deferjs" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000" crossorigin="anonymous"/>-->

모든 블로그 콘텐츠가 로드된 후 스크립트 로드를 지연하는 데 유용한 defer.js 기능을 추가했으며 위의 코드는 블로그에 자동 광고를 추가하는 역할도 합니다. 주석 태그 <!-- -->를 제거하여 코드를 활성화하고 Adsense ID를 변경하십시오.

LazyAdsense 스크립트 코드

Lazyload 애드센스는 일반 애드센스와 달리 사용자가 스크롤을 한 후에 광고가 표시됩니다. Lazyload 애드센스는 PageSpeed 점수에 영향을 미치지 않습니다.

<!--[ Lazy adsense Script with auto ads ]-->
<!--<script>/*<![CDATA[*/ var lazyadsense = false; window.addEventListener('scroll', function(){if (( ... )) { (function() { var ad = ... ad.setAttribute('crossorigin','anonymous'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000'; var sc = ... })(); lazyadsense = true; }}, true); /*]]>*/</script>-->

위의 코드를 </body> 태그 위에 붙여넣고 스크립트에서 Adsense ID를 활성화하고 교체합니다.

---

광고 단위 추가

다음과 같이 애드센스 디스플레이 광고 단위 코드가 있다면,

<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' crossorigin='anonymous'></script>
<ins class='adsbygoogle' style='display:block'
 data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

adsbygoogle.js 스크립트 코드 가 첫 번째 단계에서 활성화되었으므로 광고 단위에 다시 작성할 필요가 없으며 아래와 같이 광고 단위 코드만 작성하면 됩니다.

<ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

미리 보기