구글 adsense를 반응형으로 관리하기

불당   
   조회 3940  

 https://support.google.com/adsense/answer/6307124?hl=ko&ref_topic=1307438


이 예에서는 3가지 범위의 화면 폭(예: 모바일, 태블릿, 데스크톱)에 맞춰 개별적으로 광고 단위 크기를 설정하기 위해 반응형 코드를 수정하는 방법을 보여 줍니다. CSS 미디어 쿼리를 사용해 보지 않았거나 애드센스 광고 코드를 수정해 본 경험이 전혀 없어도 이 예에서 설명하는 내용을 끝까지 완료하는 데는 문제가 없습니다.

다음은 화면 폭당 정확한 광고 단위를 설정하는 수정된 반응형 광고 코드의 예입니다.

  • 화면 폭 500픽셀 이하: 320x100 광고 단위
  • 화면 폭 500~799픽셀: 468x60 광고 단위
  • 화면 폭 800픽셀 이상: 728x90 광고 단위

<style>
  .example_responsive_1 { width: 320px; height: 100px; }
  @media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
  @media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
  </style>
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- example_responsive_1 -->
  <ins class="adsbygoogle example_responsive_1"
       style="display:inline-block"
       data-ad-client="ca-pub-XXXXXXX11XXX9"
       data-ad-slot="8XXXXX1"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>

이 샘플 코드를 내 사이트에 맞춰 수정하는 방법은 다음과 같습니다.

  1. 애드센스 계정에서 반응형 광고 단위를 만들고 반응형 광고 코드에서 다음 정보를 메모해 둡니다.
    • 광고 단위의 이름(예: 홈 페이지)
    • 내 게시자 ID(예: ca-pub-1234567891234567)
    • 내 광고 단위의 ID(data-ad-slot, 예: 1234567890)
  2. 샘플 코드에서 다음과 같이 수정합니다.
    • 모든 example_responsive_1을 내 광고 단위의 이름으로 바꿉니다. 광고 단위의 이름에 공백이 있는 경우 모두 밑줄('_')로 바꿉니다(예: 홈_페이지).
    • 모든 ca-pub-XXXXXXX11XXX9를 내 게시자 ID로 바꿉니다.
    • 8XXXXX1을 내 광고 단위의 ID로 바꿉니다.
  3. 화면 폭당 표시하고 싶은 광고 단위의 크기를 정합니다.
    • 샘플 코드의 기존 광고 단위 크기가 마음에 든다면 추가로 변경해야 하는 사항은 없습니다.
    • 화면 폭당 다른 광고 단위 크기를 설정하고 싶다면 샘플 코드에서 다음과 같이 수정합니다.
      • 320px100px를 500픽셀 이하의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
      • 468px60px를 500~799픽셀의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
      • 728px90px를 800픽셀 이상의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
  4. 수정된 광고 코드를 복사하여 광고를 게재할 페이지의 HTML 소스 코드에 붙여넣습니다. 광고 코드를 삽입하고 나면 다양한 기기와 화면에서 광고를 테스트하여 반응형 동작이 제대로 작동하는지 확인하시기 바랍니다.
- opencode.co.kr -
6분만에 만드는쇼핑몰 식스샵
반응형 쇼핑몰, 홈페이지! 내 마음대로 손쉽게 제작 무료 템플릿!
반응형 홈페이지제작 자두나무
자영업홈페이지, 기업홈페이지, 웹표준+모바일연동 워드프레스 반응형 홈페이지제작전문
고객을 별처럼 고스타소프트
홈페이지 제작, 유지보수 전문, APP, 모바일, 고객 맞춤서비스, 방문상담
파워링크 AD   클릭초이스등록
http://gnustrap.net/bbs/board.php?bo_table=TIP&wr_id=49

정리해서 적용해봤습니다 ^^ 좋은팁입니다 ㅎ


제목Page 2/10
     
2016-05   20215   불당
2016-06   18342   불당
2015-09   50317   불당
2014-06   98688   불당
2015-09   48692   불당
2016-01   3941   불당
2015-12   2630   불당
2015-12   2411   불당
2015-12   2281   불당
2015-12   2376   불당
2015-12   2336   불당
2015-12   2241   불당
2015-12   2183   불당
2015-12   3170   불당
2015-11   2308   불당
2015-11   2284   불당
2015-11   2253   불당
2015-10   2699   불당
2015-10   2426   불당
2015-10   2618   불당
2015-10   3394   불당
2015-10   3200   불당
2015-09   3793   불당
2015-09   2933   불당
2015-06   3728   불당