[티스토리 블로그 광고] 성능 최적화된 홈(커버) 인피드 광고 넣는 방법

안녕하세요! 블로그 홈(커버) 글 사이사이에 인피드 광고를 넣어 광고 수익을 극대화하고 싶으신가요!? 잘 찾아오셨습니다. 이번 글에서는 홈(커버)에 인피드 광고를 넣는 방법을 쉽게 알려드리겠습니다. 이 글에서는 홈(커버)에 광고를 넣는 코드와 페이지 성능을 최적화하는 코드를 합친 종합 코드에 대해 설명하겠습니다.

 

애드센스 승인을 받은 분들만 이 작업을 진행할 수 있습니다. 아직 승인을 받지 못하셨더라도 이 글을 저장해 두셨다가 승인 후 바로 사용하시기를 권장합니다. 이 글은 이전 글인 카테고리 인피드 광고 넣는 방법과 매우 비슷합니다. 이전 글을 적용하지 않으셨더라도, 이 글에서 쉽게 설명해 드리니 천천히 따라오시면 됩니다!

 

이 작업은 티스토리 '북클럽' 스킨의 커버에 있는 '뉴스레터'를 기준으로 진행합니다. 다른 스킨도 비슷한 방식으로 진행하시면 됩니다.

 

광고 만들기

애드센스 사이트에 접속해서 로그인 후 왼쪽 메뉴에서 '광고'를 클릭합니다.

구글 애드센스 홈페이지에 광고 버튼을 클릭합니다.

광고 메뉴에서 '사이트 기준', '광고 단위 기준', '전체 설정' 중 '광고 단위 기준'을 클릭합니다.

3가지 메뉴 중 광고 단위 기준을 클릭합니다.

광고 단위 기준으로 들어가면 다양한 광고를 확인할 수 있습니다. 여기에서 인피드 광고를 클릭합니다.

여러 광고 중 인피드 광고 만들기를 클릭합니다.

인피드 광고에서 아래 이미지 안에 있는 순서대로 진행합니다. 홈(커버)에 있는 레이아웃과 비슷하게 진행해야 합니다.

인피드 광고 측면이미지로 만들기로 선택 후 다음 버튼을 클릭합니다.

인피드 광고에 이름은 알아보기 쉽게, 편하게 적으셔도 됩니다. 예를 들어, [블로그 이름] 삽입 위치, 광고 크기, 광고 위치로 진행합니다.

인피드 광고 이름을 정합니다.

 

인피드광고 상세 조정

 

전체 옵션

1. 전체 글꼴을 선택해 주세요. 기본으로 두셔도 되지만, 블로그 글꼴과 유사하면 더 좋습니다.

2. 배경 색상을 선택해 주세요. 블로그 배경색과 유사하면 더 좋습니다.

3. 인피드 광고의 여백을 조정합니다. 홈(커버)과 동일하면 더 좋습니다.

인피드 광고 전체 옵션 중 글꼴, 배경 색상, 패딩을 조정합니다.

 

이미지 옵션

4. 이미지 위치를 왼쪽, 오른쪽 두 개 중 하나 선택합니다. 저희는 오른쪽에 썸네일이 있으니 오른쪽으로 선택합니다.

5. 광고 이미지 크기는 썸네일 크기와 똑같이 합니다.

6. 썸네일의 패딩과 동일하게 광고 이미지의 패딩을 수정합니다.

인피드 광고 이미지 옵션 중 이미지 정렬, 이미지 크기, 패딩을 조정합니다.

 

광고 제목

7. 광고 제목의 길이를 선택합니다. 짧음은 광고 제목이 짧고, 오래 걸림은 광고 제목이 길게 나옵니다.

8. 광고 제목의 글자 크기, 글자 정렬, 글자 굵기, 글자색을 조정합니다. 홈(커버)과 동일하면 더 좋습니다.

9. 홈(커버) 제목의 패딩과 동일하게 광고 제목의 패딩을 수정합니다.

인피드 광고 광고 제목 옵션 중 글자 크기, 글자 정렬, 글자 굵기, 글자색, 패딩을 조정합니다.

 

설명 옵션

10. 광고의 설명을 표시할 것인지, 말 것인지를 선택합니다. 홈(커버)과 동일하게 하려면 설명 표시를 오른쪽으로 진행합니다.

11. 광고의 설명에 글자 크기, 글자 정렬, 글자 굵기, 글자색을 조정합니다. 홈(커버)과 동일하면 더 좋습니다.

12. 홈(커버) 내용의 패딩과 동일하게 광고 제목의 패딩을 수정합니다.

인피드 광고 내용 옵션 중 내용 표시, 글자 크기, 글자 정렬, 글자 굵기, 글자색, 패딩을 조정합니다.

 

URL 옵션

13. 광고의 주소에 글자 크기, 글자 정렬, 글자 굵기, 글자색을 조정합니다. 홈(커버)에 날짜와 동일하면 더 좋습니다.

14. 홈(커버) 날짜의 패딩과 동일하게 광고 제목의 패딩을 수정합니다.

인피드 광고 URL 옵션 중 글자 크기, 글자 정렬, 글자 굵기, 글자색, 패딩을 조정합니다.

 

버튼 옵션

15. 광고 버튼의 글자색을 변경합니다. 홈(커버)의 글자색과 동일하면 더 좋습니다.

16. 광고 버튼의 테두리 색상을 변경합니다. 블로그의 테두리 색상과 동일하면 더 좋습니다.

인피드 광고 버튼 옵션 중 글자색, 테두리 색상을 조정합니다.

 

광고 확인

17. 적용된 광고를 확인합니다. 마음에 들지 않는다면, 옵션에서 수정 과정을 진행합니다.

18. 마음에 들었다면, 저장 및 코드 생성 버튼을 클릭하여 저장합니다.

설정한 광고를 확인하고 저장 및 코드 생성 버튼을 클릭합니다.

 

인피드 광고 코드 확인

완성이 되었다면, 코드를 확인하고 티스토리 블로그로 들어가서 다음 단계를 진행합니다.

완성된 인피드 광고의 코드를 확인합니다.

 

스킨 편집 들어가기

관리자 페이지 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집' 버튼을 클릭하면 새로운 창이 열립니다.

새로운 창이 열리면 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

'꾸미기' 탭에서 '스킨 편집'을 클릭하면 새로운 창이 열립니다. 이 창의 오른쪽 상단에 'html 편집'을 클릭합니다.

html 편집창에 들어가서 코드 하단에 '</head>'를 찾습니다. (html 창에서 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 검색해도 됩니다.)

</head>

html에서 </head>를 찾거나 검색합니다.

 

HTML에 광고 코드 넣기

 

애드센스 광고 메뉴에서 '사이트 기준'을 클릭한 후 '코드 가져오기'를 클릭합니다.

코드 가져오기를 클릭합니다.

나온 코드를 '복사하기'를 눌러 복사합니다.

광고 코드를 복사하기를 눌러 복사합니다.

html 편집 창에서 방금 전 찾은 </head> 위에 엔터를 눌러 빈칸을 만듭니다. (3칸 띄워주세요.) 그리고 방금 복사한 코드를 빈칸에 붙여 넣습니다.

광고 코드를 빈칸에 붙여 넣습니다.

 

최적화된 카테고리 인피드 광고 코드 넣기

html 창에서 아무 곳이나 클릭 후 Ctrl+F를 눌러 '<s_cover name='cover-thumbnail-2'>'를 검색합니다. '</s_cover>'와 '</div>' 사이에 엔터를 눌러 빈칸을 만듭니다.

<s_cover name='cover-thumbnail-2'>

HTML 파일에서 '<s_cover name='cover-thumbnail-2'>'를 검색합니다.

아래의 코드를 복사하여 빈칸에 붙여 넣습니다.

<!-- 홈(커버) 인피드 광고 삽입 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  if (document.querySelectorAll('.cover-thumbnail-2').length > 0) { /* 커버가 다른 커버일 때에는 맞는 class를 넣으면 됩니다. */
    var chInfeedAdSenseInsert = 3; // 인피드 광고를 몇 번째 항목마다 표시할지 설정합니다.
    var chInfeedAdSense = `<ins class="adsbygoogle"
                                  style="display:block; border-bottom: 1px dotted #333; margin-top: 28px;"
                                  data-ad-format="fluid"
                                  data-ad-layout-key="YOUR_AD_LAYOUT_KEY" /*data-ad-layout-key 코드를 널으세요. */
                                  data-ad-client="YOUR_AD_CLIENT" /* data-ad-client 코드를 넣으세요. */
                                  data-ad-slot="YOUR_AD_SLOT"></ins>`; /* data-ad-slot 코드를 넣으세요 */

    // 더보기 안에 있는 광고를 숨김
    var postItems = document.querySelectorAll('.cover-thumbnail-2 ul li');
    var count = 0; // 카운터 변수 초기화
    var moreButton = document.querySelector('.more'); // 더 보기 버튼

    if (moreButton) {
      moreButton.addEventListener('click', function() {
        showHiddenAds();
      });
    }

    postItems.forEach(function(item, index) {
      count++;
      
      // 초기에는 3번째 광고만 표시
      if (count % chInfeedAdSenseInsert === 0 && count === 3) {
        insertAd(item);
      } else if (count % chInfeedAdSenseInsert === 0) {
        item.style.display = 'none'; // 나머지 광고는 숨김
      }
    });

    function insertAd(item) {
      // 광고가 이미 삽입되어 있는지 확인
      if (!item.nextElementSibling || !item.nextElementSibling.querySelector('.adsbygoogle')) {
        var adContainer = document.createElement('div');
        adContainer.innerHTML = chInfeedAdSense;
        var divider = document.createElement('hr');
        divider.style.cssText = 'padding: 0; margin: 0; height: 1px; border: 0 none; background-color: transparent;';

        item.parentNode.insertBefore(adContainer, item.nextSibling);
        item.parentNode.insertBefore(divider, adContainer.nextSibling);

        // Ensure that adsbygoogle is called only once per ad container
        (adsbygoogle = window.adsbygoogle || []).push({});
      }
    }

    function showHiddenAds() {
      postItems.forEach(function(item, index) {
        if (item.style.display === 'none') {
          item.style.display = 'block';
          if (!item.nextElementSibling || !item.nextElementSibling.querySelector('.adsbygoogle')) {
            insertAd(item);
          }
        }
      });
    }
  }
});
</script>

코드 설명

1. 페이지 성능을 위해 방문자가 홈(커버) 페이지(.cover-thumbnail-2)에 들어왔을 때에만 스크립트가 실행됩니다. 본문이나 다른 페이지로 이동했을 때에는 스크립트가 실행되지 않습니다.
2. chInfeedAdSenseInsert = 3;은 홈(커버) 게시물 3개마다 광고가 나오는 형식입니다. 4로 변경하면 게시물 4개마다 광고가 나옵니다.
3. border-bottom: 1px dotted #333; margin-top: 28px;는 홈(커버) 페이지의 게시물 스타일과 일치하도록 광고에 아래쪽 테두리와 위쪽 여백을 적용했습니다.
4. 처음에는 세 번째 게시물 다음에만 광고가 표시되고, 나머지 광고는 숨깁니다. '더 보기(more)' 버튼을 클릭하면 숨겨진 광고가 표시됩니다.
5. 광고가 중복으로 나오지 않도록, 이미 광고가 삽입된 게시물에는 추가로 광고가 삽입되지 않게 했습니다.

복사한 최적화된 카테고리 인피드 광고를 새로 추가하여 빈칸에 붙여 넣습니다.

아까 인피드 광고 코드 확인창을 열어 코드를 하나씩 복사해서 붙여 넣어둔 코드에 알맞게 붙여 넣습니다.

'data-ad-layout-key'와 'data-ad-client'와 'data-ad-slot'의 코드를 복사합니다.

 

광고 코드 교체 방법

 

• 'data-ad-layout-key'는 'YOUR_AD_LAYOUT_KEY'와 교체합니다.
• 'data-ad-client'는 'YOUR_AD_CLIENT'와 교체합니다.
• 'data-ad-slot'은 'YOUR_AD_SLOT'과 교체합니다.

코드 교체 후 우측 상단에 적용 버튼을 눌러 저장합니다.

'data-ad-layout-key'와 'data-ad-client'와 'data-ad-slot'에 복사한 코드로 교체합니다.

 

광고 확인하기

미리보기로 확인이 안 되니, 티스토리 블로그 홈(커버)으로 이동하여 광고가 나오는지 확인합니다.

광고가 바로 나오지 않는 경우가 있습니다. 이는 설정이 잘못된 것이 아니라 시간이 필요한 부분입니다. 만약 시간이 지나도 나오지 않는다면, 코드 복사하고 교체하는 과정을 다시 진행해야 합니다.

인피드 광고가 나오는지 확인합니다.

 

결론

이번 글에서는 페이지 성능 최적화된 홈(커버) 인피드 광고를 삽입하는 방법에 대해 알아보았습니다. 제가 알려드리는 코드는 홈(커버)으로 이동했을 때만 광고가 표시되며, 방문자가 본문이나 다른 페이지에 있을 때에는 스크립트가 실행되지 않아 페이지 성능이 좋아집니다.

 

페이지 성능을 고려하지 않고 인피드 광고 코드를 넣을 수도 있지만, 페이지 성능이 좋을수록 점수가 높아져 SEO 측면에서도 유리합니다.  지난 글에서 설명드린 최적화된 본문 상단 광고 2개 코드와 카테고리 인피드 광고를 함께 적용하면 페이지 성능에도 좋고 수익도 극대화될 것입니다. 이를 참고해서 여러분의 블로그에 적용해 보시길 권장드립니다.

 

다음 글에서는 홈 (커버) 쉽게 꾸미기에 대해서 설명해 드리겠습니다. 궁금한 점이나 문제가 있으면 댓글로 알려주세요!