글 목록 사이에 인피드 애드센스 넣기 - PC/Mobile에 따라 자동으로 적용되는 티스토리 인피드 광고

티스토리 블로그를 하면서 글목록들 사이에 어울리면서 이쁘게 넣은 블로그들을 볼 수 있었다. 어떻게 저렇게 이쁘고 어울리게 잘 넣었는지를 고민하던 중 자동으로 개수를 조절하여 인피드 광고를 넣는 글을 볼 수 있었다. 그러나 티스토리 반응형 #1과는 약간 모양이나 방법이 달랐다. 특히 PC와 모바일에서 글 목록이 글자와 썸네일의 크기가 달라지는 문제가 발생했다.

 

그래서 따로 티스토리 반응형 #1에 알맞도록 자동으로 인피드를 넣는 방법을 고민했고, 성공했다. 이 글에서는 성공한 방법을 공유하고자 한다. 순서는 [인피드 광고 생성 - 스크립트 넣기 - 참고 블로그] 순으로 구성했다. 

1. 인피드 광고 생성하기 ( PC / 모바일 )

처음 인피드 광고를 넣기를 원하는 사람이라면 우선, 광고 단위를 생성해야 한다.

애드센스에서 인피드 광고 단위 생성하기

애드센스 사이트에 가서 위와 같이 눌러주자. 빨간색 상자로 칠한 부분들을 차례대로 클릭해 주면 된다. 그러면 다음과 같이 사이트의 주소를 넣는 창이 뜰 것이다. 우선은 데스크탑(PC) 버전의 인피드를 만드는 것을 다루도록 하겠다.

데스크탑 버전의 인피드 광고 만들기

위와 같이 URL에 자신의 블로그 주소를 적어 넣고, 오른쪽을 Desktop으로 바꿔준 다음 페이지 스캔하기를 눌러주자. 그러면 스캔을 진행 한 뒤, 다음과 같은 화면이 뜨게 된다.

 

좌측에서 원하는 디자인 부분을 선택하자

좌측 부분에서 자신의 블로그의 글목록의 디자인에 맞는 부분을 선택한 뒤, 다음 버튼을 눌러주자. 그러면 다음과 같이 상세하게 설정을 할 수 있는 부분이 뜨게 된다. 그러면 우선 이름을 지어주자. 이름은 원하는데로 만들고 뒤에 PC만 적어주면 된다.

반응형 #1 기준으로, 각각 전체 옵션부터 URL 까지를 다음과 같이 설정해 준다. 만약 다른 스킨을 쓴다면 각 스킨에 맞는 디자인으로 설정해 주어야 한다.

반응형 #1 PC버전 :: 전체옵션, 이미지 설정

반응형 #1 PC버전 :: 광고제목, 내역, URL 설정

이후 저장 및 스크립트 생성을 하면 된다.

 

---

다음은 Mobile 버전을 만들자. 초기 순서는 Desktop 버전과 동일하다.

모바일  버전의 인피드 광고 만들기

좌측에서 원하는 디자인 부분을 선택하자

이후에 설정은 다음과 같다. 광고 이름은 원하는데로 만들되, 마지막에 Mobile을 붙여주자.

각각의 상세 설정은 다음과 같다.

반응형 #1 Mobile버전 :: 전체옵션, 이미지 설정

반응형 #1 Mobile버전 :: 광고제목, 내역, URL 설정

이후에 역시 저장 및 스크립트 생성을 하면 된다.

 

이제 스크립트를 통해서 원하는데로 넣는 것만 남았다. 해당 부분은 2번에서 살펴보자.

2. 스크립트 넣기

스크립트는 크게 2가지 부분으로 구성되어 있다. 기본 설정을 하는 스크립트와 실제로 삽입하는 스크립트이다. 우선 기본 설정을 하는 스크립트 부터 보도록 하자.

<script>
  var chInfeed = 2;               // 몇 번째부터 시작할 것인가? 글목록 시작부터 광고를 넣겠다는 의미
  var chInfeedAdSenseShow = 0;    // 0 = 인피드광고 적용, 1 = 인피드광고 비적용
  var chInfeedAdSenseInsert = 2;  // N개의 글목록당 인피드광고 적용 ( N개 나오고 광고 1개 삽입 )
  
  //이곳 아래 2개는 광고를 삽입하기 위한 광고 스크립트를 넣어주면 된다.
  //Desktop 버전
  var chInfeedAdSense = '<div class="list_content" ><ins class="adsbygoogle" style="display:block;height:156px" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="&&&&&&&&&" data-ad-client="**********" data-ad-slot="#########"></ins></div>';
  //Mobile 버전
  var chInfeedAdSense_2 = '<div class="list_content"><ins class="adsbygoogle" style="display:block;height:90px" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="&&&&&&&&&" data-ad-client="**********" data-ad-slot="#########"></ins></div>';
</script>

위의 Code를 head가 끝나는 </head>태그의 바로 윗 부분에 삽입해 주면 된다. 

 

각각의 변수에 대한 설명은 주석으로 달아 놓았으며, 원하는데로 설정을 수정하면 된다. 아래에 있는 chInfeedAdSense는 PC 버전, chInfeedAdSense_2는 Mobile 버전을 위한 광고 스크립트를 담고 있다. 아래 부분에서 빨간 상자를 친 부분을 누르면 코드가 나온다.

해당 코드 중에서 <ins ~~~~ </ins> 사이에 있는 부분을 복사해서 위에 적어 놓은 <ins ~~~~~ </ins> 부분을 대체하면된다.

<ins~~~~~ </ins> 부분에 대한 설명

반응형 #1의 경우 모든 글목록은 <div class="list_content"> 안에 담겨져 있다. 때문에 스크립트 코드를 보면 <ins ~~~~~ </ins>가 div로 둘러쌓여 있는 것을 볼 수 있다.

---

다음으로는 실제로 삽입하는 코드를 넣을 것이다. 아래 부분에서 window.innerWidth > 820 이 나오는 것을 볼 수 있는데, 이는 PC와 Mobile을 구분짓는 너비가 반응형 #1에서는 820이기 때문에 넣어 놓았다. 만약 다른 스킨을 쓴다면 잘 조사해서 적용을 해야한다.

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

넣어주어야 하는 위치는 반응형 #1 기준으로 </s_index_article_rep>과 <s_permalink_article_rep> 가 연속으로 나오는 부분에 넣어주면 된다. 다른 사람들은 ##_article_rep_date_##이 나오는 여러개 위치 중 마지막 부분을 찾아 끝 부부분에 넣어줄 수 있도록 하자.

위에 적어 놓은 스크립트와 약간 다른 모습을 볼 수 있는데, 몇가지 최적화가 더 적용되어서 그렇다. 만약 최적화를 한 적이 없고 처음이라면 사진이 아닌 복사할 수 있도록 공유한 스크립트를 복사 붙여넣기 하면 된다.

 

이후에 잘 적용되는지 확인해 보자. 기본으로 준 설정에서 2개 단위로 인피드가 나오고 있다면 정상적으로 적용된 것이다.

3. 참고 블로그

애드센스 인피드광고를 티스토리 메인 인덱스 페이지에 넣는 방법

처음에 코드를 보고서 적용한 블로그이다. 해당 코드에서 실제 적용하는 스크립트를 조금 더 최적화하고, 단일 적용이던 해당 스크립트를 Mobile과 PC를 동시에 적용할 수 있도록 변경한 뒤에 블로그 글을 썼다.