정보/블로그 운영팁

애드센스 인피드 광고 티스토리에 적용하기

변태 개발자 아미넴 2020. 10. 7.

글 목록에 비슷한 양식으로 광고가 껴 들어가 있는 경우 자주 보셨죠?

제 블로그도 이미 적용을 해 놔서 잘 나오고 있습니다.

블로그 보시는 분들은 불편할 수도 있어서 죄송합니다만,

위와 같이 자동 맞춤 광고와 함께 제가 수작업으로 넣은 인피드 광고까지

잘 나오고 있는 것을 확인할 수 있습니다.

 

사실 피드에는 자동으로 생성이 안 되는 줄 알고 반영을 한 건데

둘 다 나와서 조금 당황스럽네요. ㅎㅎ

 

 

목차

     

    광고 단위 수동 생성

    아래 순서대로 진행해 보겠습니다.

    애드센스 사이트 > 광고 > 개요 클릭

     

    광고 단위 기준 > 인피드 광고 선택

     

    광고 스타일 직접 만들기 > 측면 이미지 선택 > 다음 버튼 클릭

    * 'Google 시스템에서 추천하는 스타일 확인'을 선택하셔도 되지만 저는 설명을 위해 직접 만들기를 선택하였습니다.

     

    광고 단위 이름 입력

     

    전체 옵션 설정

    Font는 취향에 맞게 설정하시면 되구요.

    저는 패딩을 전부 0으로 설정하였는데 이것도 자신의 블로그에 맞게 설정하시면 됩니다.

    잘 모르시겠으면 일단 저랑 똑같이 설정해 보세요.

     

    이미지 옵션 선택

    이미 스타일을 알고 있다면 문제될 것이 없지만 알기 어려운 경우라고 가정하고 설명 드리겠습니다.

    먼저 본인의 피드를 살펴 봅니다.

     

    크롬 기준 개발자 모드(F12 또는 맥인 경우 command + option + i)에서 엘리먼트 선택 도구를 클릭합니다.

     

    그리고 마우스 커서를 이미지에 가져다 대면 이미지 크기 정보가 나옵니다.

    제가 광고를 넣으려는 피드의 이미지는 140 x 140 px 크기 이군요.

     

    그리고 이미지 왼쪽 여백도 알고 싶다면 엘리먼트에 마우스를 가져다 대 봅니다.

     

    그러면 웹 페이지에 아래와 같이 표시되는 것을 볼 수 있는데 주황색 부분이 적용된 margin을 나타내고 있습니다.

    해당 태그(여기서는 figure)에서 클릭을 합니다.

     

    스타일 탭에서 클래스에 적용된 스타일을 살펴보면 margin-left가 40px인 것을 알 수 있습니다.

    여기서 이미지 크기까지 다 확인이 되는군요.

     

    이렇게 알아낸 값을 이미지 옵션에 입력해 주면 됩니다.

    알아낸 값은 마진이고 입력 란은 패딩이지만 구현의 차이일 뿐 여백 크기는 같습니다.

    그리고 이미지가 오른쪽에 있으므로 오른쪽 정렬을 선택하였습니다.

    나머지는 기본 값 그대로 두겠습니다.

    이어서 저장 및 코드 생성을 클릭해 줍니다.

     

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-format="fluid"
         data-ad-layout-key="-g8-p+6q-o0+r5"
         data-ad-client="ca-pub-0000000000000000"
         data-ad-slot="0000000000"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    위와 같은 코드가 생성되었습니다.

     

    저 같은 경우는 브라우저 크기에 따라 피드의 사이즈가 달라지는 반응형 웹이 적용된 스킨을 사용하고 있어서

    광고 크기도 2가지 스타일 임을 확인했기 때문에 인피드 광고를 2개 만들었습니다.

    브라우저 크기를 줄인 후 확인해서 위에서 설명한 것과 같은 방법으로 하나 더 만드시면 됩니다.

     

     

    티스토리 html 소스에 적용

    마찬가지로 아래 순서대로 진행해 볼게요.

    html 소스에서 피드 위치 확인 하기

    개발자 모드에서 엘리먼트를 확인하다 보면 원하는 위치(여기서는 #최신)의 클래스(여기서는 cover-thumbnail-2)를 확인할 수 있습니다.

     

    관리 페이지 접속 > 꾸미기 > 스킨 편집 클릭

     

    html 편집 클릭

     

    HTML 클릭

     

    개발자 모드에서 확인한 html 소스 위치 확인

    제가 사용한 스킨의 경우 227번째 라인에 똑같은 이름의 클래스가 보이네요.

    이 소스 부분에서 반복적으로 피드가 생성된다고 보시면 됩니다.

     

    광고 소스 삽입하기

    이제부터 이해를 좀 잘 하셔야 합니다.

    s_cover 태그 안쪽에서 피드가 생성이 되는데 정확한 매커니즘을 확인할 수는 없지만

    구조를 추측해 보니 s_cover_item 태그 안쪽에서 반복적으로 생성되는 것으로 보입니다.

    따라서 s_cover_item 태그를 기준으로 script 태그를 사용하여

    바깥쪽에 광고 위치나 개수를 제어할 변수를 선언해 두고

    안쪽에서 광고 생성 구문을 작성하면 적절히 들어갈 것 같습니다.

    위와 같이 작성하는 것이 괜찮아 보입니다.

     

    먼저 제어 변수부터 생각해 보겠습니다.

    <script>
        var infeedCnt = 0;
        var ranNum = Math.floor(Math.random()*2);
    </script>

    s_cover_item 태그 내부에서 피드 글을 반복적으로 불러오면서 카운팅 할 변수와

    그 카운팅 변수에 따라 무작위로 광고를 넣기 위한 0~1까지 숫자 중 하나를 랜덤으로 가져와서 담은 변수를 선언하였습니다.

     

    이어서 광고 삽입 구문을 생각해 보겠습니다.

    <script>
        if(window.innerWidth >= 768) {
            if(infeedCnt%2 == ranNum) {
                document.write('<ins class="adsbygoogle" style="display:block;margin-top:28px;" data-ad-format="fluid" data-ad-layout-key="-g8-p+6q-o0+r5" data-ad-client="ca-pub-0000000000000000" data-ad-slot="0000000000"></ins>');
                (adsbygoogle = window.adsbygoogle || []).push({});
            }
        } else {
            if(infeedCnt%2 == ranNum) {
                document.write('<ins class="adsbygoogle" style="display:block;margin-top:28px;" data-ad-format="fluid" data-ad-layout-key="-hc+u-2k-do+yf" data-ad-client="ca-pub-1111111111111111" data-ad-slot="1111111111"></ins>');
                (adsbygoogle = window.adsbygoogle || []).push({});
            }
        }
        infeedCnt++;
    </script>

    브라우저 크기에 따라 사이즈가 다른 인피드 광고가 적용될 수 있도록 if문을 사용하였고

    소스가 동적으로 쓰여져야 하므로 document.write 메서드를 이용하여 애드센스에서 얻은 광고 코드를 삽입했습니다.

    첫번째 스크립트 태그는 구글 광고 신청 시 붙여 넣은 스크립트와 중복되므로 제외했습니다.

    또한 글 2개당 하나의 광고가 나타나도록 나머지 연산자를 활용하였습니다.

     

    브라우저가 어느 크기에서 피드 사이즈가 바뀌는지 css 소스에서 확인할 수도 있지만

    단순히 브라우저 크기를 줄여봐도 바뀌는 시점을 알 수 있기 때문에 저는 그렇게 해서 768이라는 값을 확인했습니다.

    그리고 개발자 모드에서 피드의 margin-top이 28px라는 값을 알아내서 style에 추가로 넣어 주었습니다. 

     

    완성된 소스는 위와 같습니다.

    적용 버튼을 클릭하여 변경 사항을 저장합니다.

     

    피드에서 광고 확인하기

    글 2개당 광고가 하나 씩 잘 표현되고 있습니다.

    연속으로 표시된 광고 중 하나는 구글 스크립트에 의해 자동 생성 된 광고입니다.

     

    작은 크기의 브라우저에서도 적절하게 표시되고 있습니다.

     

     

    더 궁금한 점은 댓글로 남겨 주시기 바랍니다.

    BIG

    댓글17

    • 달려라촌딱 2020.11.18 16:31 신고

      저는 지금 광고에 개요클릭하면 아무것도 안나옵니다..
      월래 이런건가요
      답글

    • 멜리에 2021.03.27 21:40 신고

      아미넴님 덕분에 인피드 광고를 달 수 있었습니다 감사합니다!
      혹시 5개마다 1개씩의 인피드 광고가 나오게 하려면 var 부분을 수정해야 할까요?
      html 왕초보라서 조심스레 여쭈어봅니다 ㅠ
      답글

      • 안녕하세요!

        var ranNum = Math.floor(Math.random()*5);

        위와 같이 2를 5로 바꾸면 0~4까지 숫자가 랜덤으로 생성됩니다.

        infeedCnt%5 == ranNum

        마찬가지로 위 부분도 2에서 5로 바꾸면 infeedCnt를 5로 나눈 나머지가 0~4이므로 ranNum으로 얻은 숫자 0~4와 같을 경우만 광고를 게재하도록 만든 로직입니다.

        도움이 되었길 바랍니다 :)

    • 멜리에 2021.03.27 22:04 신고

      감사합니다 ^^! 말씀해주신대로 잘 적용하였습니다~!!
      답글

    • HV 2021.04.08 11:25

      안녕하세요! 유용한 정보 감사합니다! 근데 구글스크립트에 의해(?) 연속으로 나오는 저 인피드 광고 2개 연속되는 부분을 1개만 나오게 바꿀 수는 없나요? 특히 메인 화면에서 MORE(더보기) 버튼 위에 광고가 2개나 연달아 보여서 보기 좋지 않아서요..ㅠ 저는 분명이 3개 1개 나오게 스크립트 조정해서 넣었고, MORE버튼 누르고 나서 다 펼쳐지면 정상적입니다. 그런데 접혀있을 때 광고 2개가 꼭 연속되어 보입니다 ㅠㅠ
      답글

    • 허니바이브 2021.04.10 18:40 신고

      아미넴님 늘 블로그 관련 유용한 수정 방법들을 공유해주셔서 감사한 마음으로 구독하며 잘 보고 있습니다! ^^ 한가지 여쭤보고 싶은데요 인피드 광고 따라하다가 문의 드립니다! 잘 나오긴 하는데 제가 원하는 대로 안되서요ㅠ

      북클럽 스킨 쓰고 있습니다만. 메인에서 more 더보기 버튼 안 나오고 그냥 제 카테고리 하위 메뉴 movie &drama처럼 쭉 리스트가 펼쳐져서 인피드가 3개 글당 1개씩 자연스럽게 보이면 좋겠는데, 메인은 그게 불가할까요?ㅠㅠ
      어떻게 설정을 해줘야할까요?

      제 블로그 메인한번만 확인해주신다면..은혜는 잊지 않겠습니다 ㅠㅠ
      답글

      • 안녕하세요. 북클럽 스킨에서 more 버튼을 없애려면 script.js 에서 if ( $(".cover-thumbnail-2").length ) coverLoadMore(); 부분을 제거하거나 주석처리하면 될 것 같습니다.
        해 보시고 혹시 다른 문제가 또 있으면 댓글 부탁드릴게요~

      • 허니바이브 2021.04.10 19:36 신고

        근데 이거 사용하면 카테고리 메뉴에서도 다 더보기버튼이 사라져버리죠? ㅠㅠ 메인과 따로 컨트롤은 불가한가요?

      • 아뇨~ 커버의 더보기 버튼과 카테고리에서의 더보기 버튼은 다른 걸로 알고 있습니다.

        (추가)
        확인해 보니 카테고리의 더보기 버튼은 다음 코드 부분으로 보이네요.
        if ( $(".paging-view-more").length && $(".post-item").length ) viewMore();

      • 2021.04.10 21:18

        비밀댓글입니다

      • 애드센스 광고는 화면에 보이지 않는 상태라면 광고를 게재하지 않습니다. 이건 애드센스 자체적인 기준이라 사용자가 따로 컨트롤하는건 불가능하구요.
        시도해 보지는 않았지만 더보기 버튼을 누른 뒤 그 다음 스탭으로 광고를 로드하는 로직을 넣어야 표시할 수 있을 것 같습니다.

      • 2021.04.11 03:46

        비밀댓글입니다

      • 해결하신건가요? 제가 볼때는 그런 오류가 안 뜨네요. 아니면 광고 스크립트에 의한 일시적인 현상일 수도 있을 것 같습니다.

    💲 추천 글