4 애드센스 광고 코드 설치

블로그 시작부터 애드센스 수익 극대화까지 경험기

내용의 대부분이 경험기, 일기와 가까운 형식의 글이어서 ‘~습니다’ 체 대신 독백체( ‘~다' ) 문장을 사용했습니다. 중간에 분석 내용이 들어갈 경우 ‘~습니다' 체를 사용한 부분도 있습니다. 참고 부탁 드립니다.

4. 애드센스 광고 코드 설치

이제 웹사이트 페이지( 블로그 글 등 )에 바로 광고를 설치할 수 있다. 웹페이지( HTML 문서 )에 구글에서 제공하는 광고 코드를 추가해야 한다. 광고 코드는 HTML 과 Javascript로 되어 있다. Javascript를 직접 수정할 일은 거의 없으므로 HTML만 조금 공부하면 된다. 설치 과정을 정리해보면 아래와 같다. ( 첨부된 이미지들은 애드센스 고객센터에서 부분 캡처한 이미지 들이다. )

1. 광고 단위 생성( 광고 유형, 크기, 스타일 등을 설정 )

• 광고 단위는 아래의 3가지 유형에서 선택하여 만들 수 있다.

• 텍스트 및 디스플레이 광고
  

  

  
  

• 인피드 광고
  

  

  
  

• 콘텐츠 내 자동 삽입 광고
  

  

  
  

2. 광고 코드 추가 ( 대략 두 가지 방법 중 하나 선택 )

• 광고 코드( HTML/JavaScript 코드 )를 콘텐츠( 블로그 템플릿 또는 본문 )에 추가

• 광고 코드( HTML/JavaScript 코드 )를 티스토리에서 제공하는 애드센스 플러그인에 추가
  내 경우에는 반응형 템플릿을 사용하고 있어서 애드센스 반응형 플러그인에 코드를 추가하여 적용했다.

광고 코드는 대략 아래와 같다. 광고 유형에 및 옵션에 따라 코드가 조금씩 다르다. 필요할 때는 광고 단위 별로 “코드 가져오기” 메뉴를 통해 언제든지 가져올 수 있다.

텍스트 이미지, 반응형

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

    style="display:block"

    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

    data-ad-slot="xxxxxxxxxx"

    data-ad-format="auto"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

네이티브 인피드, 반응형

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

    style="display:block"

    data-ad-format="fluid"

    data-ad-layout-key="-xx+xx+xx-xx+xx"

    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

    data-ad-slot="xxxxxxxxxx"></ins>

<script>

    (adsbygoogle = window.adsbygoogle || []).push({});

</script>

콘텐츠 내 자동 삽입 네이티브, 반응형

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

    style="display:block; text-align:center;"

    data-ad-layout="in-article"

    data-ad-format="fluid"

    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

    data-ad-slot="xxxxxxxxxx"></ins>

<script>

    (adsbygoogle = window.adsbygoogle || []).push({});

</script>

대부분의 경우 구글에서 제공해 주는 코드를 수정할 일은 거의 없으므로 웹페이지의 원하는 부분에 복사 / 붙여넣기만 하면 된다.( HTML 문서 편집 모드에서 작업 해야 한다. )

3. 광고 출력 결과 확인

출력될 수 있는 광고의 형태, 크기, 레이아웃은 다음과 같은 상황으로 결정될 수 있다.

• 광고는 광고 유형( 텍스트 이미지, 인피드, 콘텐츠 내 자동 삽입 등 )에 따라 모양이 다르다.

• 광고 영역의 크기는 상위 컨테이너( TD, DIV 엘리먼트 등 )의 width, height 속성 등으로 결정할 수 있다.

• 광고 영역보다 작거나 같은 크기로 만들어진 광고만 출력될 수 있다. ( 광고 영역 보다 작거나 같은 크기로 만들어진 광고가 없는 경우 광고가 출력되지 않는다. 따라서 수익이 발생하지 않는다. )

• 광고 유형마다 최소 광고 크기에 대한 유형이 다르다.
  콘텐츠 내 자동 삽입 광고 최소폭: 250픽셀
  인피드 광고 최소폭: 250픽셀
  일반 광고의 경우 다양한 크기의 광고 규격이 있음. 자세한 내용은 애드센스 고객센터 광고 크기 안내 참고 : https://support.google.com/adsense/answer/6002621?hl=ko

• 광고 영역의 크기가 지정되지 않았거나 가변 크기인 경우 가능한 모든 크기의 광고가 출력될 수 있다.

• 텍스트와 이미지가 같이 출력 되는 광고 등은 광고 영역의 크기에 따라 광고 영역 내의 레이아웃이 변경될 수 있다.

아래는 구글 애드워즈 고객센터에 나와 있는 광고 출력 예시이다.

텍스트 이미지, 반응형 출력 결과

네이티브 인피드, 반응형 ( 광고 영역 폭이 좁은 경우의 레이아웃 )

네이티브 인피드, 반응형 ( 광고 영역 폭이 넓은 경우의 레이아웃 )

콘텐츠 내 자동 삽입 네이티브, 반응형 ( 광고 영역 폭이 좁은 경우의 레이아웃 )

콘텐츠 내 자동 삽입 네이티브, 반응형 ( 광고 영역 폭이 넓은 경우의 레이아웃 )

광고를 추가하고 바로 확인해 보니 잘 출력된다.

상위 목록 문서( 블로그 시작부터 애드센스 수익 극대화까지 경험기 개요 )로 이동