본문 바로가기

티스토리스킨/팁.활용.확장

신스킨에 구스킨 인피드 애드센스 적용 방식으로 글목록 애드센스를 붙이는 방법

 구스킨때 목록 중간 중간 건너뛰면서 애드센스 광고를 자동으로 넣어주는 코드가 사용되었는데

작년 가을 신스킨으로 티스토리 스킨 구조가 달라지면서 해당 애드센스 적용 자바스크립트 코드가 전혀 동작하지 않습니다.


애드센스 광고가 글 내용과 겹치거나 깨져 보이게 되는데

스크립트 코드를 신스킨, 또는 해당 스킨의 글목록 구조에 맞춰 변경을 해줘야 애드센스 인피드가 정상적으로 붙게 됩니다.


코드의 구조를 조금 이해한다면 수정해서 붙이는 데 별 무리가 없겠지만

코드 구조를 전혀 이해못하고 일단 코드만 붙여넣으면 동작할줄 알았는데 사용하는 스킨에 따라서 조금씩 손을 봐줘야 합니다.



티스토리 스킨 skin.html 파일 기준입니다.



<head>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> var i 0</script>
</head>




이렇게 먼저 <head></head> 태그 사이에 애드센스 라이브러리를 링크를 걸고


보통 아래와 같은 자바스크립트 코드로 인피드 목록 애드센스를 넣습니다.


    <script>
        i++;
        if(i%3 == 0){//건너뛰는 숫자 글 3개당 1개씩 애드센스 추가
//아래 두줄은 애드센스 코드를 자바스크립트로 뿌리는 기본 코드
            document.write'<div class="list_content" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-layout-key="-eu+r-3v-9g+wc" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></div>');
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    </script>



이 코드는 skin.html 의 


<s_index_article_rep></s_index_article_rep>


이 치환자 태그 안에 위치해야 합니다.


중요한 것은 5번째줄 "document.write" 안에 있는 태그와 클래스입니다.


해당 스킨의 글 목록을 뿌리는 글 목록 아이템의 최상단 태그와 클래스를 맞춰줘야 합니다.





구스킨의 경우


글목록을 뿌리는 구조가 


    <s_index_article_rep>
        <div class="list_content">
            <s_article_rep_thumbnail>
                <a href="[##_article_rep_link_##]" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=[##_article_rep_thumbnail_raw_url_##]"></a>
            </s_article_rep_thumbnail>
            <a href="[##_article_rep_link_##]" class="link_post">
                <strong class="tit_post ">[##_article_rep_title_##]</strong>
                <p class="txt_post">[##_article_rep_summary_##]</p>
            </a>
            <div class="detail_info">
                <a href="[##_article_rep_category_link_##]" class="link_cate">[##_article_rep_category_##]</a>
                <span class="txt_bar"></span>
                <span class="txt_date">[##_article_rep_date_##]</span>
            </div>
        </div>
    </s_index_article_rep>


이런 구조로 보통 글목록이 뿌려지게 되어 있습니다. ( 치환자는 <s_index_article_rep> 입니다.) 


<div class="list_content"></div>


가 글목록 아이템 하나가 되게 되고 위의 인피드 애드센스 코드가 중간 중간 건너뛰면서 애드센스 광고를 반복적으로 붙이게 됩니다.


따라서 인피드 자바스크립트 코드에도


document.write'<div class="list_content"> ... </div>');


이런 식으로 

뿌리는 태그를 맞춰줘야 합니다.


<ins class="list-item">...</ins>


이런 식으로 목록 아이템이 되어있다면

위의 자바스크립트 코드는


document.write'<ins class="list_item"> ... </ins>');


가 되어야 합니다.






신스킨의 경우 대부분 레퍼런스 스킨 디자인에서 파생된 디자인은

아래와 같은 구조를 가집니다.


제 블로그에 올라간 스킨은 작년 11월부터 올라간 대부분의 스킨이 해당됩니다.



글목록에 붙일 경우


기본적으로 <div class="post-item"> ... </dv> 태그와 그 안의 내용이 글 목록 아이템 1개가 되고

이것이 반복되는 구조입니다.


즉, 아래 코드 기준으로 반복되는 최상단 태그의 클래스로 class="post-item" 이 반드시 있어야 합니다.

그래야 레이아웃이 깨지지 않고 스킨 레이아웃에 맞춰져 애드센스 광고가 끼워넣어지게 됩니다.


또는 다른 방식으로 커스터마이징을 한 스킨인 경우 목록 아이템의 최상단 클래스로 정의한 클래스 명을 반드시 인피드 애드센스 코드로 정의를 해줘야 합니다.


    <s_index_article_rep>
        <div class="post-item">
            <a href="[##_article_rep_link_##]">
                <span class="thum">
                    <s_article_rep_thumbnail>
                        <img src="//i1.daumcdn.net/thumb/C360x240/?fname=[##_article_rep_thumbnail_raw_url_##]" alt="">
                    </s_article_rep_thumbnail>
                </span>
                <div class="article-info">
                    <span class="title">[##_article_rep_title_##]</span>
                    <s_if_var_view-thumbnail-date>
                    <span class="date">
                        <s_if_var_short-date>[##_article_rep_simple_date_##]</s_if_var_short-date>
                        <s_not_var_short-date>[##_article_rep_date_##]</s_not_var_short-date>                                       
                    </span>
                    </s_if_var_view-thumbnail-date>
                    <s_if_var_view-thumbnail-excerpt>
                    <span class="excerpt">[##_article_rep_summary_##]</span>
                    </s_if_var_view-thumbnail-excerpt>
                </div>
            </a>
        </div>
    </s_index_article_rep>



따라서 인피드 애드센스 자바스크립트 코드는


    <script>
        i++;
        if(i%3 == 0){//건너뛰는 숫자계산 
            document.write'<div class="post-item" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-layout-key="-eu+r-3v-9g+wc" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></div>');
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    </script>


와 같이 됩니다.



커버리스트에 붙일 경우


커버리스트 외곽은 ".cover-list" 가 되고 커버 아이템 한개는 ".cover-list ul li" 가 됩니다.


예를 들어


    <s_cover_group>
        <s_cover_rep>

            <s_cover name='cover-list'>
                <div class="cover-wrap cover-list">
                    <div class="inner">
                        <ul>
                            <s_cover_item>
                                <li>
                                    <a href="[##_cover_item_url_##]">
                                        <div class="article-info">
                                            <span class="thum">
                                                <s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C400x400/?fname=[##_cover_item_thumbnail_##]" alt=""></s_cover_item_thumbnail>
                                            </span>
                                        </div>
                                        <div class="article-info">
                                            <s_cover_item_article_info>
                                                <span class="category">[##_cover_item_category_##]</span>
                                            </s_cover_item_article_info>
                                            <span class="title">[##_cover_item_title_##]</span>
                                            <span class="excerpt">[##_cover_item_summary_##]</span>
                                        </div>
                                    </a>
                                </li>
                            </s_cover_item>
                        </ul>
                    </div>
                </div>
            </s_cover>

        </s_cover_rep>
    </s_cover_group>


<s_cover_item> 안의 "<li></li>" 태그 하나가 목록 아이템 1개가 됩니다.


따라서 자바스크립트 코드는 "<s_cover_item>" 바로 밑에 추가를 해야 하고 코드는 


<script>
i++;
if(i%3 == 0){//건너뛰는 숫자계산 
    document.write'<li style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-layout-key="-eu+r-3v-9g+wc" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></li>');
    (adsbygoogle = window.adsbygoogle || []).push({});
}
</script>


와 같은 식으로 태그를 맞춰줘야 합니다.




코드를 붙일 때 알아둘 중요한 사항 3가지!



1. 항상 글목록 반복 아이템의 최상의 태그와 클래스를 맞춰주면 됩니다;



2. 클래스중 구글 샘플 코드에 기본 클래스로 적용된 "adsbygoogle" 클래스 명은 없어도 무방합니다.



3. 블로그에 따라서는 공지사항, 보호된 글, 커버리스트에도 붙여야 할 수 있습니다. 블로그에 적용한 스킨에 따라 <s_index_article_rep></s_index_article_rep> 태그를 적용한 다른 위치에도 인피드 코드를 적용해줘야 할 수 있습니다.



  • 아~ 어포스트님 스킨으로 시작해서 애드센스 승인도 받고 블로그 운영 잘~하고 있습니다. 스킨 이쁘다 깔끔하다는 말도 몇번이나 들었고 또 이렇게 제작 스킨들 문제점 수정방법까지 포스팅 해 주시니 스킨선택 참 잘했다는 생각이드네요.
    어제 인피드 광고를 넣는중 광고와 글이 겹쳐 보이는 현상이 있어 적용이 어려웠는데 블로그에 와 보니 역시 해당 내용에 대한 피드백이 있네요 ㅎㅎ 감사합니다~

  • 비밀댓글입니다

  • 매번 답변 감사드립니다. ^^
    인피드 광고 코드를 받아서 제 블로그에 적용을 했는데요. 메인페이지에서만 3개마다 광고가 나옵니다.
    제가 원한 것은 게시글 본문 밑에 쪼끄맣게 8~12개 나오고 사이사이 광고 들어간 형태를 원한 건데요.
    제가 인피드광고 코드를 받을때 desktop으로 해 놓고 해서 그런건지, 게시글본문밑에 뜨는 광고는 전혀 다른 개념인지 궁금합니다.
    어포스트님 매번 질문만 드려서 죄송하지만 부탁드려요. 감사합니다.

    • 질문이 이해가 안됩니다.

      게시글 본문 밑에 쪼끄맣게 8~12개 나오고 사이사이 광고 들어간 형태

      이 내용이...

      위 인피드 코드는 글 목록에 3개 건너 1개씩 광고가 표시해주도록 하는 인피드 광고입니다.

  • https://mon107.tistory.com/54
    질문용으로 게시물 하나 작성하였습니다. 게시물에 캡쳐해놓은 것을 말씀드린 것입니다.
    확인 부탁드립니다. ^^

    • 질문글처럼 광고를 계속 달면 아마 어뷰징으로 간주되서 애드센스 계정이 차단당할겁니다.

      갯수를 많이 단다고 광고가 갯수만큼 전부 다 표시되지 않을뿐더러, 동일한 광고가 8개가 나오게 될 수 있습니다.
      광고가 표시되는 페이지의 컨텐츠가 충분하지 않을 경우 일부 광고는 표시되지 않게 되며, 평균 3개이상 한페이지에 광고가 있을 경우 중복되는 동일한 광고가 거의 100% 나옵니다.

      충분한 컨텐츠 내용 없이 정상적인 범주에서 벗어나는 광고를 임의로 많이 달게될 경우 저품질 사이트로 떨어지게 될 확율이 높아지고, 검색 우선 순위에서 뒤로 밀리거나 검색 결과에 미표시되게 됩니다.

  • 답변감사드립니다.^^
    검색을 계속해 보니 "일치하는 콘텐츠 광고" 라는 메뉴가 있다고 합니다.
    이 메뉴가 처음 애드센스 하는 사람들은 활성화가 안 되있고, 일정 조건이 되면 활성화가 된다는 글을 보았습니다.
    저는 열심히 블로그하면서 기다리는 방법밖에 없네요 .^^

  • 메인 화면을 커버로 최신글 9개가 나오도록 설정되어 있습니다.
    이 상태에서 <s_cover name='cover-list'> 태그를 찾아 태그가 끝나는 부분에 어포스트님의 인피드 코드를 삽입했는데 광고가 나오지 않는데 해결 방법이 있나요?
    애드센스에서 발급받은 인피드코드를 삽입하면 정상적으로 나오는데 게시글 중간 마다 삽입하고 싶은데 어떻게 해야할까요?

    • 커버리스트의 경우 코드를 붙여넣는 위치와 붙여넣는 소스의 태그를 맞춰서 변경해줘야 합니다.

      그냥 붙여넣으면 광고가 표시되지 않습니다.

      커버리스트 관련한 글 내용을 하단에 추가해서 업데이트 했습니다.

      참고삼아 보시기 바랍니다.


닫기