티스토리 글 상단 광고 PC 2개 모바일 1개 넣기, 구글 애드센스 광고

티스토리 블로그를 방문하다보면 글 상단 광고가 2개가 있는 것을 종종 볼수 있는데요.

노출이 되는 것만으로도 구글 애드센스는 작게나마 수익이 올라가는 구조다 보니

더 효과적인 수익을 위해 2개를 비치하고 있습니다.

애드센스 승인이 나자마자 저도 광고 2개를 넣기위해 알아보던중

2개 게시가 애드센스 정책위반이라는 글을 보고 접었는데요.

알고보니 PC에서는 2개 노출이 되어도 위반이 아니라고 하네요.

화면에 일정 %이상이 광고로 덥혀있으면 위반이다보니

모바일에서는 광고2개가 표시되면 위반인 것 같습니다.

그래서 얼른 2개를 게재하고자 여러방법을 찾아봤는데 그 중에 좋은 방법이있어 저도 적용했습니다.

티스토리 PC용/모바일용 광고 만들기

광고 2개를 넣을 때 반응형 사이즈의 광고를 넣으면 모양이 길쭉한 모양이 나오기도 하고 해서

글 상단이 굉장히 어지럽게 됩니다. 그래서 고정사이즈로 PC용 광고를 따로 만들어야 하는데요.

1. 먼저 애드센스(https://www.google.com/adsense/)로 들어갑니다.

Google 애드센스 - 웹사이트에서 수익 창출하기

Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다.

www.google.co.kr

2. 신규광고 단위 만들기에서 디스플레이 광고를 눌러 들어갑니다.

3. 디스플레이 광고의 이름을 정하고 광고크기를 "반응형"->"고정형"으로 변경후 너비는 336, 높이는 280으로 변경합니다.

이때 광고는 총 3개를 만드는데요.

PC용 2개, 모바일용 1개입니다.

PC는 336*280 사이즈로, 모바일은 300*250으로 준비해주세요.

빨간색으로 표시해둔 <>버튼을 누르면 각 광고의 소스를 볼수 있는데요.

광고 소스들중 아래 사진에 표시해둔 내 고유 아이디와 광고마다 번호가 다른 광고슬롯을 체크해둡니다.

4. 아래 소스를 받아 주세요. 여기에 '내아이디번호'와 'PC1광고슬롯', 'PC2광고슬롯', '모바일광고슬롯'이라고써있는 곳에 3번에서 설명한 내아이디와 광고슬롯을 넣어줍니다.

<style>
@media (min-width:780px){
    .my-ad-pc{width:336px;height:280px;display:inline-block}
    .my-ad-mobile{display:none}
}
@media (max-width:780px){
    .my-ad-pc{display:none}
    .my-ad-mobile{display:inline-block;width:300px;height:250px}
}
</style>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- PC1 -->
<ins class="adsbygoogle my-ad-pc"
     data-ad-client="ca-pub-내아이디번호"
     data-ad-slot="PC1광고슬롯"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- PC2 -->
<ins class="adsbygoogle my-ad-pc"
     data-ad-client="ca-pub-내아이디번호"
     style="margin-left:20px"
     data-ad-slot="PC2광고슬롯"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mobile -->
<ins class="adsbygoogle my-ad-mobile"
     data-ad-client="ca-pub-내아이디번호"
     data-ad-slot="모바일광고슬롯"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

애드센스 상단 PC 2개 모바일1개 방법.txt

0.00MB

1차출처 : https://yoons-family.tistory.com/31

2차출처 : https://yeonsblee.tistory.com/20

소스는 저도 다른 블로그에서 가지고 왔습니다. 여러 블로그에서 소스를 오픈하고 있는데, 그 스킨에 적용된 스타일을 적용하다보니 제 블로그에 적용하는 소스를 찾는게 쉽지 않더라구요. 이 자리를 빌어 두 블로그 분들께 감사드립니다. :)

5. 만들어진 소스를 플러그인을 통해 입력하면 됩니다. 티스토리 블로그 관리홈 메뉴 중, 플러그인으로 들어갑니다.

플러그인 중에서도 '구글애드센스(반응형)'으로 들어갑니다.