구글 애드센스 본문에 중간 광고 여러 개 넣는 방법
애드센스 광고 수익이 기존 CPC(클릭당 비용)에서 CPM(1,000회 노출당 비용) 변경되었으며 이로 인해 워드프레스에 광고노출을 조금이라도 늘리고자 애드센스 광고 2개씩 3개 6개 삽입 방법을 살펴보겠습니다. 애드센스 광고를 PC에서는 2개 모바일에서는 1개가 작동되도록 코드를 작성하고 패턴 이용하여 추후 변경 시 패턴만 변경하면 전체 사이트 적용할 수 있도록 코드를 작성해 보겠습니다.
광고 코드 만들기
구글 애드센스 페이지로 이동후 광고 코드는 광고 효율이 좋은 디스플레이 광고로 광고 코드를 생성합니다. 애드센스 홈페이지에서 [광고] → [광고 단위 기준] → [디스플레이 광고]를 선택합니다.
- 디스플레이 광고 형태는 사각형 선택
- 광고 단위 이름은 광고1 (다른이름으로 변경 가능)
- 광고 크기는 반응형을 선택하고 만들기를 해줍니다.
- 위에 디스플레이 광고로 총 6개를 만들어 줍니다. (광고1,광고2,광고3,광고4,광고5,광고6)
애드센스에서 광고 만들기는 마무리 되었습니다. 총 6개의 광고를 워드프레스에 패턴형태로 만들어 보겠습니다.
광고패턴 만들기
1.애드센스 광고1 (CSS 선언)
<style>
.adsbygoogle.post-top_1 {display:block}
.adsbygoogle.post-top_1_1 {display:none}
.adsbygoogle.post-top_2 {display:block}
.adsbygoogle.post-top_2_1 {display:none}
.adsbygoogle.post-top_3 {display:block}
.adsbygoogle.post-top_3_1 {display:none}
@media (min-width: 768px) {
.adsbygoogle.post-top_1 {
display:inline-block;min-width:336px;
max-width:336px;width:100%;height:280px;
}
.adsbygoogle.post-top_1_1 {
display:inline-block;margin-left:20px;min-width:336px;
max-width:336px;width:100%;height:280px;
}
.adsbygoogle.post-top_2 {
display:inline-block;min-width:336px;
max-width:336px;width:100%;height:280px;
}
.adsbygoogle.post-top_2_1 {
display:inline-block;margin-left:20px;min-width:336px;
max-width:336px;width:100%;height:280px;
}
.adsbygoogle.post-top_3 {
display:inline-block;min-width:336px;
max-width:336px;width:100%;height:280px;
}
.adsbygoogle.post-top_3_1 {
display:inline-block;margin-left:20px;
min-width:336px;max-width:336px;width:100%;height:280px;
}
}
</style>
<div style="text-align: center; margin-bottom: 15px;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<ins class="adsbygoogle post-top_1"
data-ad-client="ca-pub-펍코드" <!-- 펍코드 숫자만 -->
data-ad-slot="광고코드1" <!-- 광고 코드 1 -->
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle post-top_1_1"
data-ad-client="ca-pub-펍코드" <!-- 펍코드 숫자만 -->
data-ad-slot="광고코드2" <!-- 광고 코드 2 -->
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>패턴만들기
워드프레스 홈페이지 접속후 상단에 새로추가를 클릭합니다.(새글쓰기)
- 블록 삽입기 토글 클릭후 검색창에 html 입력 후 사용자 정의 HTML를 선택합니다.
- 이제 본문에 사용자 정의 HTML 입력창에 위 소스코드를 붙여넣습니다.
- 패턴명 : 패턴명을 광고1로 넣어줍니다.
- 동기화됨 : 동기화에 체크되어야 추후 포스팅 글에 전체 적용됩니다.
(다른 광고 형태로 바꿀때 일괄 변경이나 삭제가능)
2.애드센스 광고2 (구현)
<div style="text-align: center; margin-bottom: 15px;">
<ins class="adsbygoogle post-top_2"
data-ad-client="ca-pub-펍코드" <!-- 펍코드 숫자만 -->
data-ad-slot="광고코드3" <!-- 광고 코드 3 -->
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle post-top_2_1"
data-ad-client="ca-pub-펍코드" <!-- 펍코드 숫자만 -->
data-ad-slot="광고코드4" <!-- 광고 코드 4 -->
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>- 위 광고1 패턴만들기를 반복적으로 실행하세요!
- 패턴 이름만 광고2으로 저장을 해줍니다.
3.애드센스 광고3 (구현)
<div style="text-align: center; margin-bottom: 15px;">
<ins class="adsbygoogle post-top_2"
data-ad-client="ca-pub-펍코드" <!-- 펍코드 숫자만 -->
data-ad-slot="광고코드5" <!-- 광고 코드 5 -->
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle post-top_2_1"
data-ad-client="ca-pub-펍코드" <!-- 펍코드 숫자만 -->
data-ad-slot="광고코드6" <!-- 광고 코드 5 -->
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>- 위 광고1 패턴만들기를 반복적으로 실행하세요!
- 패턴 이름만 광고3으로 저장을 해줍니다.
이제 광고만들기, 패턴만들기까지 끝냈습니다. 이젠 포스팅하실때 만들어 놓은 패턴만 사용하시면 간단히 광고 삽입이 가능합니다.
글 작성하기
글 작성 시 기존에 저장해 놓은 패턴을 불러와서 본문에 삽입하면 됩니다.
애국가 1절 다음에 광고를 넣어보겠습니다.
- [블록 삽입기] -> [패턴] -> [내 패턴] 을 선택하시면 우측에 저장된 패턴명이 나옵니다.
- 실제 제가 저장한 패턴명이 컨텐츠 광고1 이며 본문에 광고 삽입을 해보겠습니다.
패턴광고 미리보기
주의사항
- 애드센스 광고1에 해당 CSS가 선언되었기 때문에 포스팅의 길이에 따라 1개의 광고만 넣을 땐 패턴의 광고1만 삽입해 주세요!
- 광고 2개 삽입 : 광고1, 광고2 를 삽입 하거나 광고 1, 광고 3 삽입하기
- 광고 3개 삽입 : 광고1, 광고2, 광고3 삽입하시면 됩니다.
- 어떠한 광고든 광고1이 빠지면 적용이 되질 않습니다.
오늘은 애드센스 광고 변화에 맞춰 CPM 증가를 위해 PC 버전에선 광고 2개를 보이고 모바일은 1개만 보이는 방법으로 셋팅된 광고 형태입니다. 아무쪼록 블로그 수익에 도움이 되셨슴 합니다.
