[블로그 운영팁]구글 애드센스 '인피드' 광고 원하는 형태로 출력

구글 애드센스 광고 단위에서 '인피드' 광고를 이용해서 블로그 게시글 리스트 사이에 광고를 노출시키는 방법입니다. (티스토리 기준)

카테고리를 클릭하면 보실 수 있습니다. 

웹미니 : The Story Of webmini

예시 화면

순서는 다음과 같습니다.

1. 구글 애드센스에서 '인피드' 광고를 설정
2. 블로그 'html' 편집에 소스 삽입

구글 애드센스 인피드 광고 생성

먼저 구글 애드센스 광고 단위를 인피드 광고를 선택합니다.

그리고 인피드 광고를 추천하는 스타일로 본인의 사이트 노출되는 주소를 입력합니다. (데스크탑, 모바일은 선택)

주소를 입력하면 자동으로 사이트 디자인에 맞게 스캔을 하고, 세부적인 사항은 수정을 통해 설정합니다.

광고 소스를 생성했으면 일단 두시고, 잠시 블로그 소스 수정으로 넘어갑니다.

블로그에 적용하기

티스토리 관리자 스킨편집에서 html에 광고소스만 아래와 같이 추가해주면 됩니다.

1. </head> 바로 위에 아래 소스를 삽입합니다.

<script>
    var chInfeed = 0;
    var chInfeedAdSenseShow = 0; // 0 = 인피드광고 적용, 1 = 인피드광고 비적용
    var chInfeedAdSenseInsert = 4; // 인피드광고 적용 개수
    var chInfeedAdSense = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="입력" data-ad-client="입력" data-ad-slot="입력"></ins>';
</script>

여기서 아까 광고소스를 생성했을때 발급받은 값들을 '입력'이란곳에 형식에 맞게 넣어줍니다.

data-ad-layout-key="xxxxxxxx"
data-ad-client="ca-pub-xxxx"
data-ad-slot="xxxxxxx"

참고로  chInfeedAdSenseInsert = 4  부분은 몇번째 리스트에서 출력이 되느냐의 설정입니다.
만약 게시글 두번째 이후 즉 세번째에서 광고가 노출될려면 3으로 변경해주시면 됩니다.

2. 광고 노출하는 곳에 소스삽입

블로그에 광고가 노출될, 즉 리스트에 노출하기 때문에 해당 위치에 아래 소스를 삽입합니다.

 찾기 힘드시면 </s_index_article_rep> 로 검색하셔서 그위에 넣으시면 됩니다.

<script>
if (chInfeedAdSenseShow == 0) {
    chInfeed++;
    if (chInfeed % chInfeedAdSenseInsert == 0) {
    document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
    document.write(chInfeedAdSense);
    (adsbygoogle = window.adsbygoogle || []).push({});
  }
}
</script>

메인도 마찬가지로 하시면 됩니다만, 광고 별로 코드 값이 다르므로 원하는 여러 형태의 광고로 출력하시고자 할때는 함수와 코드를 별도로 만들어주셔도 됩니다.

응용해보세요.