본문 바로가기
웹 개발/구글애드센스

구글애드센스 | 티스토리 본문 상단 광고 2개

by KISCH 2020. 2. 28.
반응형

구글애드센스




디스플레이 상단 2개 


디스플레이 상단 2개가 가장 광고효과가 좋다고 합니다.


1. 구글 애드센스 로그인 > 광고 단위 기준

2. 신규 광고 단위 만들기 

디스플레이광고

3. 광고크기 >> 고정 >> 336 x 280 (광고단위사이즈)

4. 광고단위이름 설정 >> 만들기

5. 코드를 보겠습니다.

data-ad-client="xxx"

data-ad-slot="yyy"


6. xxx 와 yyy 부분을 복사해서 잘 저장해둡니다.

7. 1-4번까지 반복해서 광고를 만듭니다.

8. 코드를 또 보겠습니다.

data-ad-client="xxx"

data-ad-slot="zzz"



9. zzz를 잘 복사합니다.

10. 다음 코드에서 xxx, yyy, zzz 를 복사해 둔 본인의 클라이언트 아이디와 광고 넘버로 바꿔주세요.


<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:800px) and (max-width:899px) {

                .adsense_1 {

                    width: 300px;

                    height: 250px;

                }

            }

            @media (min-width:900px) and (max-width:999px) {

                .adsense_1 {

                    width: 336px;

                    height: 280px;

                }

            }

            @media (min-width:1000px) and (max-width:1019px) {

                .adsense_1 {

                    width: 300px;

                    height: 250px;

                }

 }

            @media (min-width:1020px) {

                .adsense_1 {

                    width: 336px;

                    height: 280px;

                }

            }

        </style>

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

        <ins class="adsbygoogle adsense_1" data-ad-client="xxx" data-ad-slot="yyy"></ins>

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

        <script>

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

        </script>

    </span>

    <span class="adsense_empty">

        <style type="text/css">

            .adsense_empty {

                display: inline-block;

                width: 0px;

                height: 0px;

            }

            @media (max-width: 799px) {

                .adsense_empty {

                    display: none;

                }

            }

            @media (min-width:800px) {

                .adsense_empty {

                    width: 20px;

                }

            }

        </style>

    </span>

    <span>

        <style type="text/css">

            .adsense_2 {

                display: inline-block;

            }

            @media (max-width:799px) {

                .adsense_2 {

                    display: none;

                }

            }

            @media (min-width:800px) and (max-width:899px) {

                .adsense_2 {

                    width: 300px;

                    height: 250px;

                }

            }

            @media (min-width:900px) and (max-width:999px) {

                .adsense_2 {

                    width: 336px;

                    height: 280px;

                }

            }

            @media (min-width:1000px) and (max-width:1019px) {

                .adsense_2 {

                    width: 300px;

                    height: 250px;

                }

            }

            @media (min-width:1020px) {

                .adsense_2 {

                    width: 336px;

                    height: 280px;

                }

            }

        </style>

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

        <ins class="adsbygoogle adsense_2" data-ad-client="xxx" data-ad-slot="zzz"></ins>

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

        <script>

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

        </script>

    </span>

</div>


위의 코드는 광고 2개를 표시하는 코드이고, 코드가 긴 이유는 모바일광고의 경우 1개만 보여주게 됩니다. (모바일은 광고 2개가 붙어있으면 구글 애드센스정책에 위배됩니다.)


11. 위의 코드를 복사하셔서 플러그인 >> 구글애드센스(반응형) >> 상단 박스안에 붙여넣기 하시면 끝

디스플레이광고

확인해보면 2개의 광고가 본문 상단에 위치하게됩니다. 


디스플레이광고

모바일에서는 1개의 광고가 표시됩니다.






반응형

댓글