구글 애드센스 광고 상단 PC 2개 모바일 1개 넣는 방법

티스토리 블로그를 돌아다녀 보면 본문 상단에 애드센스 광고가 2개 나란히 나오는 것을 자주 보실 수 있습니다. 애드센스 상단이 수익률이 가장 좋기 때문에 애드센스 광고 코드를 수정해서 2개를 노출하는 블로그가 많이 보입니다. 주의해야 할 점이 광고때문에 콘텐츠가 스크롤해야 보이는 부분에 있다면 애드센스 정책 위반이 될 수 있기 때문에 PC에서는 광고가 나란히 나와서 괜찮겠지만 모바일에서는 화면이 좁기 때문에 설정을 안하면 광고가 연속으로 2개가 나올수도 있습니다. 그럼 애드센스 반응형 상단 광고가 PC에서는 2개 모바일에서는 1개로 나오게 하는 방법에 대해서 알아보겠습니다.

애드센스 상단 광고 만들기

애드센스 사이트

먼저 HTML 코드에 들어갈 광고를 만들어 보겠습니다. 애드센스 사이트에 광고 - 광고 단위 기준 - 디스플레이 광고를 눌러주세요.

왼쪽 상단에 광고 이름을 쓰는 칸이 있습니다. 나중에 수익률 확인도 하고 다른 광고와 구분을 하기 위해서 자신이 알아볼 수 있도록 입력해 주면 됩니다.

광고 형태은 사각형 광고 크기는 티스토리 애드센스 반응형 플러그인에 코드를 넣을 예정이니 반응형으로 하고 만들기를 눌러주세요.

광고가 만들어지면 하트 모양과 별 모양이 있는 부분을 기억해 주세요. 나중에 복사를 하게 됩니다.

HTML 코드 변경하기

<div style="text-align: center;">
<span>
<style type="text/css">
.adsense_1 { display:inline-block; width: 300px; height: 250px; }
@media (max-width: 300px) { .adsense_1 { width: 300px; height: 250px; } }
@media (min-width: 450px) { .adsense_1 { width: 336px; height: 280px; } }
@media (min-width: 900px) { .adsense_1 { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 애드센스 코드 넣는곳 1 -->
<ins class="adsbygoogle adsense_1"
     data-ad-client="ca-pub-♥♥♥"
     data-ad-slot="★★★"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</span>
<span style="margin-left: 20px;">
<style type="text/css">
.adsense_2 { display:inline-block; width: 0px; height: 0px; }
@media (max-width: 300px) { .adsense_2 { display: none; } }
@media (max-width: 450px) { .adsense_2 { display: none; } }
@media (min-width: 900px) { .adsense_2 { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 애드센스 코드 넣는곳 2 -->
<ins class="adsbygoogle adsense_2"
     data-ad-client="ca-pub-♥♥♥"
     data-ad-slot="★★★"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</span>
</div>

애드센스 상단 광고가 PC에서 336x280 사이즈가 2개 모바일에서 300x250 사이즈가 1개 나오는 HTML 코드입니다. <!-- 애드센스 코드 넣는곳 1-->, <!-- 애드센스 코드 넣는곳 2--> 두 군데 밑에 하트와 별모양이 있는데 이 부분만 위에서 만든 광고 코드에서 복사하고 붙여 넣으면 됩니다.

티스토리_애드센스_PC 2개_모바일 1개_코드.txt

코드 수정하기 쉽게 텍스트 파일을 첨부합니다. 코드 수정이 끝나면 전체를 복사해 주세요.

티스토리 애드센스 플러그인 적용하기

이제 수정한 코드를 티스토리 플러그인에 적용시켜 보겠습니다. 티스토리 관리자홈에 플러그인을 눌러주세요.

구글 애드센스 (반응형)을 찾아서 눌러줍니다.

광고 형태는 상단만 넣으려면 처음에 있는 것으로 선택하면 됩니다. 저는 하단에도 광고를 넣기 때문에 상단과 하단이 같이 있는 형태를 선택했습니다. 아래 2번에 복사한 코드를 붙여넣기 합니다. 끝나면 변경사항 적용을 눌러주세요.

애드센스 광고 확인하기

광고가 나오기까지 시간이 걸릴 수 있으니 만약 나오지 않는가면 기다려 주세요. PC에서는 애드센스 광고 2개가 나란히 잘 나오고 있습니다.

모바일 태블릿 애드센스 광고 쉽게 확인하는 법

Troy labs daum 사이트

PC에서 블로그를 하다가 모바일과 태블릿에서 애드센스 광고 나오는 것을 확인하려면 접속도 해야하고 태블릿이 없는 경우도 있을겁니다. 이럴때 PC에서 쉽게 모바일과 태블릿에서 광고 확인 할 수 있는 트로이라는 사이트가 있어서 소개합니다. 확인 방법은 상단에 자신의 사이트 주소를 입력하고 왼쪽 카테고리에 여러가지 브랜드의 모바일이 있는데 확인하고 싶은 기종을 선택하면 오른쪽에 나옵니다. 참고로 최신기종은 없고 갤럭시를 기준으로 S8, S8+, 노트8까지 나와있더군요.

스마트폰으로 선택해서 확인해보니 광고가 연달아서 2개가 나오지 않고 1개가 나오는걸 확인 할 수 있었습니다. 실제 저의 스마트폰으로도 확인해 봤는데 1개가 나오더군요. 

아이패드로 선택한 화면입니다. 2개 광고 중 하나는 사이즈 900부터 나오기 때문에 768인 아이패드에서도 1개가 나오는 것을 확인했습니다. 

> 애드센스 일치하는 콘텐츠 광고 설정하는 법

> 애드센스 콘텐츠 내 자동 삽입 광고 설정하는 법

> 애드센스 인피드 광고 설정하는 법

> 애드센스 디스플레이 광고 설정하는 법

> 애드센스 수익 공개 블로그 연말 결산 (2019년)

> 티스토리 애드센스 수익 방문수 일간 최고치 달성