애드센스에 새로 추가된 인피드광고를 Material T 스킨에 적용하는 방법을 알아보겠습니다.

    애드센스의 새로운 광고유형 '인피드 광고'와 '콘텐츠 내 자동 삽입 광고'


    피드는 티스토리에서는 글 목록이라고 생각하시면 됩니다.

    인피드 광고는 목적과 달리 티스토리에 적용하기 어려운 면이 있는데요, 왜냐하면 티스토리 구조상 스킨에서 피드가 반복되는 부분에 인피드 광고를 삽입하면 피드1개당 광고1개가 반복되기 때문에 너무 많은 광고를 삽입하게되기 때문입니다. 따라서 일반적인 HTML기법으로는 피드의 맨처음이나 맨끝에만 인피드 광고를 삽입할 수 있습니다.


    이번 강좌에서는 material T 스킨의 홈카드 대신 인피드 광고를 삽입하는 방법을 알아보겠습니다. 

    Material T mark 5와 5.2 기준으로 설명드립니다. 

    Material T Mark 5 티스토리 스킨 무료 배포 - material T의 마지막 버전!


    피드 중간중간 광고를 삽입하는 방법은 좀더 생각이 필요할 것 같네요.


    material T 스킨 홈카드 대신 인피드 광고 삽입

    1. html편집에서 다음부분을 찾습니다. 홈카드였던 부분입니다.

    <div id="homeCard" class="clearfix" style="display:none">

    <div class="homeBG card"></div>

    </div>

    2. 찾은 홈카드 부분을 지우거나 다음과같이 주석처리하여 더이상 홈카드가 나타나지 않게합니다.

    <!--

    <div id="homeCard" class="clearfix" style="display:none">

    <div class="homeBG card"></div>

    </div>

    -->


    3. 애드센스 인피드 광고의 코드를 받아 다음과 같이 불필요한 부분은 지우고 줄바꿈을 모두 지웁니다.

    예)

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-fd+5i+5b-it+jd"  data-ad-client="ca-pub-05************" data-ad-slot="810********"></ins>

    <script>

         (adsbygoogle = window.adsbygoogle || []).push({});

    </script>


    4.html 맨 아래쯤 </body> 윗줄에 다음을 붙여넣습니다. 파란색 부분은 3. 과정에서 수정한 광고코드입니다.

    <script>

    if($("#entry>li").length) $("#entry").prepend('<li class="card entryList"><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-fd+5i+5b-it+jd"  data-ad-client="ca-pub-05************" data-ad-slot="810********"></ins></li>');

    $("ins.adsbygoogle:empty").each(function(){(adsbygoogle=window.adsbygoogle||[]).push({})});

    </script>


    이제 홈화면 맨위와 검색화면 맨위에 인피드 광고가 나타납니다.

    ※새로 만든 광고단위는 활성화될 때까지 빈칸으로 나타날수있습니다










    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함

티스토리 툴바