애드센스 광고 해상도에 따라 다르게 만드는 방법

애드센스
2020. 3. 15. 10:30

애드센스 광고 PC와 모바일에 각각 다른 광고 보내는 방법입니다.

이전 애드센스 광고는 text, display로 구분해서 만들 수 있었습니다.

그래서 컴퓨터에는 display 이미지 광고만, 휴대폰에는 텍스트 광고만 보냈죠.

수입은 어느 쪽이 높은지는 말씀드리기는 어렵습니다.

어느 기간에 이미지가 수입이 많았다고 해서 이미지 광고의 효과가 컸다고 단정할 수는 없습니다.

클릭을 많이 받을 때 인기를 얻은 포스팅에서 나온 광고가 다행히 방문자의 손길을 잡았을 수도 있으

니까요, 그때 송출된 광고가 이미지든 텍스트든 본문 글과 잘 녹은 광고라는 것이 중요했을 것입니다.

다만 수익이 제일 많은 위치의 광고는 모바일 상단 광고입니다.

많은 글을 읽어보면 광고의 형태는 상관없는 것 같습니다.

수익을 높일 수 있는 방법의 하나는 빈 광고 자리가 없게 만드는 겁니다.

다른 사람 포스팅에서는 잘 나오는 광고가 내 글에는 빈자리밖에 안 나오는지

아무리 뜯어고치고 바꿔봐도 좋아지는 것 같지가 않습니다.

잘된다는, 광고가 잘 나온다는 코드를 가져와서 그 방법대로 해도,

내 글이 문제인지 그 글을 쓰는 손이 문제인지

해결될 기미가 보이지 않습니다.

스킨 편집에서 코드로 넣어봐도 잘 안되더라고 하시는 분은 플러그인으로 바꿔보고

그래도 안 된다면 또 다른 코드를 찾아보시고 적용해보는 것은 어떨까 합니다.

저 자신도 그렇지만 많은 포스팅이 남들의 코드를 적용하고 올려놓은 것입니다.

옳은 태그인지 어떤지도 모르고 그냥 광고가 나오니까 되더라 하는 것이 많이 있는데요,

여기서 소개하는 코드도 마찬가지입니다.

정확하게 알고 적용하는 것은 아니고 해보니까 안 나오던 글에서 광고가 보인다하는 정도이며,

이 코드가 HTML 기준에 맞는지에 대한 지식은 없습니다.

왼쪽은 플러그인으로 반응형 광고를 그대로 휴대폰에서 보이는 화면입니다.

두 번 째는 애드센스 모바일 플러그인으로 고정형으로 넣었습니다.

광고크기는 300*250인데 이상하게 나왔네요.

세 번째는 반응형으로 가로, 세로 100%로 스킨 편집으로 넣었고

마지막은 가로 336px, 높이 280px로 스킨 편집으로 넣은 것인데

개인적으로는 마지막에 크기를 제한한 것이 이뻐 보이네요.

코드는 이렇습니다.

간단합니다.

복잡한 코드를 사용하시는 분도 계시는데

기본 원리는 이렇습니다.

<div align="center"> <style> .main1 { width:300px; height: 250px; } @media(min-width: 400px) { .main1 { width: 300px; height: 250px; } } @media(min-width: 800px) { .main1 { width: 728px; height: 182px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle main1" style="display:inline-block" data-language="ko" data-ad-client="ca-pub-자신의애드센스 게시자 ID" data-ad-slot="자신의광고코드" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>

화면이 400 이하일 때는 300, 250으로 광고를 노출하고

화면이 800 이상일 때는 728*182 크기로 광고를 보내라는 것입니다.

이것은 똑같은 광고를 pc와 모바일로 보내는 것인데요,

pc 와 모바일을 구분하지 않는다면 이 코드를 사용하면 되겠습니다.

그럼, pc와 모바일에 각각의 광고를 보내기 위해서는 어떻게 하면 좋을까요.

이미지와 텍스트 광고가 없어졌으니 따로 만들 필요가 없을까요?

실적관리를 위해서 모바일 상단용 광고, pc 상단용 광고를 만들어 보낸다면

어느 쪽을 집중적으로 관리해야 하는지 알 수 있어 대처가 가능할 겁니다.

아래는 pc 와 모바일에 다른 광고를 보내는 방법입니다.

pc용 광고 모바일용 광고를 반응형으로 만들어야 합니다.

<div align=center>  <style> .phone ins { width: 336px; height: 280px; } @media(min-width: 468px) { .phone ins { width: 336px; height: 280px; } } @media(min-width: 800px) { .phone ins { width: 0px; height: 0px; } } </style> <div class="phone"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-123456789" data-ad-slot="98765432" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <div align=center> <style> .pc ins { width: 0px; height: 0px; } @media(min-width: 468px) { .pc ins { width: 0px; 0px; } } @media(min-width: 728px) { .pc ins { width: 100%; height: 100%; } } </style> <div class="pc"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle " style="display:block" data-ad-client="ca-pub-123456789" data-ad-slot="98765432" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>

이 코드를 사용하면 모바일 상단에는 336*280 크기의 광고가 나오며

pc에는 100% 크기로 광고가 보일 겁니다.

소스는 화면에서 바로 복사가 가능하며 안된다면 첨부 메모장을 받으시면 됩니다.

애드센스 pc와 모바일 광고 다르게.txt

다운로드

적용하는 방법은

스킨 편집에서