안녕하세요, Davey 입니다. 오늘 포스팅할 내용은 구글 애드센스 관련된 포스팅입니다. 상단 광고의 개수를 한 개가 아닌 2개로 하는 방법입니다. 구글 애드센스 합격하고 나서 이것 저것 찾아보니까, 너무나도 유용한 정보가 많아서 이렇게 같이 공유 하려고 이렇게 포스팅을 작성하게 되었습니다.
혹시 구글 애드센스 신청하기에 대해서 궁금하신 분이 계시면 아래 Link 통해서 보시면 도움이 되실 듯합니다. (합격 후기 첨부 하겠습니다.)
davey.tistory.com/381?category=807308
1. 구글 애드센스 상단 광고 내용 검토
: 구글 애드센스 승인을 받고 광고를 만들어 코드를 받아와야 합니다. 일반적으로 코드를 받으면 아래 항목이 포함이 되어 있습니다.
1) data-ad-client="ca-pub 로 시작"
2) data-ad-slot="숫자로 시작"
- 이 부분을 이용하여, 상단의 광고를 1개에서 2개로 구성이 가능합니다. 그럼 만드는 기본적인 개념을 설명 드리면, 상단 광고가 나타나는 부분의 공간을 2개로 나눠서, 2개의 광고가 보이게 하는 원리입니다. 물론 <div> </div> 한 그룹으로 묶어서 보여 주는 방법입니다.
2. 구글 애드센스 상단 광고 만들기
: 일단 상단 광고를 만들기 위해서 지난 포스팅에도 설명을 드렸지만, 구글 애드센스의 광고를 만들어서 코드를 받아야 합니다. 아래 snap shot 표시 되어 있는 대로, "디스플레이 광고" 를 선택하여, 해당 코드를 복사 합니다. 그러면 대부분의 코드는 아래와 같이 이뤄져 있을 겁니다.
==================================================================================
<!-- 상단 사각 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXX" (이 부분을 아래 Code에 Copy / Paste 해야함)
data-ad-slot="XXXXXX" (이 부분을 아래 Code에 Copy / Paste 해야함)
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
==================================================================================
- 위 코드에서 1번 항목에서 설명드린 항목의 property를 따와서, 아래 표시해놓은 위치에 대체를 해놓으셔야 합니다.
==================================================================================
<div class="topAdsense" style="text-align: center;">
<style type="text/css">
.adsense_1 {
display: inline-block;
width: 100%;
height: 280px;
}
.adsense_empty {
display: none;
width: 20px;
}
.adsense_2 {
display: none;
}
@media (min-width:680px) {
.topAdsense .adsbygoogle {
display: inline-block;
width: 300px;
height: 250px;
}
}
@media (min-width:783px) {
.topAdsense .adsbygoogle {
display: inline-block;
width: 336px;
height: 280px;
}
.adsense_empty {
display: inline-block;
}
}
</style>
<span>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adsense_1" data-ad-client="ca-pub-XXXX (입력 해야 하는 곳)" data-ad-slot="!!!! (입력 해야 하는 곳)" data-language="ko"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
<span class="adsense_empty">
</span>
<span>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adsense_2" data-ad-client="ca-pub-XXXX (입력 해야 하는 곳)" data-ad-slot="!!!! (입력 해야 하는 곳)" data-language="ko"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
==================================================================================
- 이렇게 작업이 완료가 되면, 티스토리 플러스인에 들어가서 코드를 붙여넣기 해야 합니다. 가는 경로는 아래와 같습니다.
[관리] - [플러스인] - [구글 애드센스 - 반응형]
- 위 경로를 통해서 들어가게 되면, 아래 화면 처럼 나오는데, 여기에서 상단 코드 집어 넣는 곳에 위에서 작업한 코드를 붙여넣기 하시면 됩니다.
- 그리고 나서 약간의 시간이 지난 후에 확인하면 아래와 같이 광고가 상단에 2개가 나오는 것을 확인 하실 수 있습니다.
이상입니다. 구글 애드센스를 승인 받으신 분들 중에 어떻게든 광고 노출을 시키기 위해서 나름대로 생각을 하시고, 이런 아이디를 내놓은 거 같습니다. 물론, 각 블로그에 광고로 덕지덕지 하는 건 좋지 않지만, 나름대로의 경제적 자유, 파이프라인을 구축하시는 분들에게는 꼭 필요하신 정보라고 생각하여 공유 드립니다. 그럼 오늘도 같이 공부하고, 같이 성장하시죠. 감사합니다.
제 Posting이 조금이나마 정보 전달에 도움이 되셨길 빌며, 되셨다면, 구독, 댓글, 공감 3종 세트 부탁 드립니다. 감사합니다.
[저작권이나, 권리를 침해한 사항이 있으면 언제든지 Comment 부탁 드립니다. 검토 후 수정 및 삭제 조치 하도록 하겠습니다. 그리고, 기재되는 내용은 개인적으로 습득한 내용이므로, 혹 오류가 발생할 수 있을 가능성이 있으므로, 기재된 내용은 참조용으로만 봐주시길 바랍니다. 게시물에, 오류가 있을때도, Comment 달아 주시면, 검증 결과를 통해, 수정하도록 하겠습니다.]
'너도 파워 블로거 될 수 있어 (Power Blogger) > 구글 애드센스 (Google Adsense)' 카테고리의 다른 글
구글 애드센스 핀(PIN) 번호 수신 주소 수정 및 재 신청 하기 (7) | 2020.10.07 |
---|---|
구글 애드센스 - 구글 애드센스 + 자동 앵커 광고 하단에 설정하기 (6) | 2020.10.05 |
구글 애드센스 광고가 모바일에서 보이지 않을 때 현상 + 해결책 (21) | 2020.10.01 |
티스토리에 구글 애드센스 자동 광고 + 앵커 효과 + 반응형 광고 달기 (19) | 2020.09.27 |
구글 애드센스 Part 2 이후 계속적인 노력 + 구글 애드센스 합격 (15) | 2020.09.25 |
댓글