Home
Adsense

애드센스 코드 작성 가이드

Blogger 애드센스 코드에서 불필요한 스크립트 제거하고 광고 단위를 수동으로 활성화 시키기. 페이지 로드 속도 향상 시키는 애드센스 코드 작성 방법 소개.

애드센스는 선택 사항이며 사용 여부를 결정할 수 있습니다. 이 튜토리얼은 모든 콘텐츠가 완전히 로드된 후 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>
미리 보기

Post a Comment