블로그를 운영하면서 광고를 넣으면 화면이 지저분해지는 것 같아서 광고를 넣지 않았습니다. 우연히 구글 애드센스를 들어갔더니 $40의 광고비가 누적되어 있는데, $100가 되어야 인출이 가능하네요. $100을 달성해 보기 위해 워드프레스에 애드센스를 추가해 보았습니다.
Site Kit 플러그인
Site Kit (by Google)은 구글이 공식적으로 개발하고 제공하는 워드프레스 전용 무료 플러그인입니다.
웹사이트를 운영할 때 필수로 사용하게 되는 구글의 주요 분석 및 마케팅 도구들을 워드프레스 소스 코드를 복잡하게 수정할 필요 없이 클릭 몇 번과 구글 계정 연동만으로 한곳에 통합해 주는 역할을 합니다.
다음과 같은 서비스의 데이터를 대시보드에서 확인할 수 있습니다.
- Google Search Console (서치 콘솔): 사람들이 어떤 검색어(키워드)를 통해 내 사이트에 방문하는지, 구글 검색 결과에 내 글이 얼마나 노출되고 클릭 되었는지 보여줍니다.
- Google Analytics 4 (GA4 / 애널리틱스): 실시간 방문자 수, 인기 있는 페이지, 체류 시간 등 유저들이 내 사이트에서 어떻게 행동하는지 상세히 분석해 줍니다.
- Google AdSense (애드센스): 블로그나 웹사이트에 구글 광고를 게재하여 수익을 올릴 수 있도록 도와줍니다. 복잡한 광고 코드를 삽입하지 않아도 Site Kit이 자동으로 코드를 배치해 줍니다.
- PageSpeed Insights (페이지스피드 인사이트): 내 웹사이트의 로딩 속도와 성능을 측정하고, 모바일 및 PC 환경에서 사이트를 더 빠르게 만들기 위한 개선 점을 알려줍니다.
Site Kit을 설치 후 Google과 연동하는 절차를 안내해주기 때문에 쉽게 관련 서비스와 연동할 수 있었습니다. 하지만 자동최적화 기능으로 광고를 띄웠더니 원치 않는 영역에 지저분하게 노출되어 해당 기능을 비활성화 하였습니다.
Ad Inserter 플러그인
Ad Inserter는 워드프레스에서 구글 애드센스, 아마존 배너 등 다양한 광고 코드를 원하는 위치에 정확하고 정교하게 배치할 수 있도록 도와주는 광고 관리 플러그인입니다.
구글의 Site Kit이 광고 코드를 알아서 심어주는 단순 자동화 도구라면, Ad Inserter는 사용자가 위치와 조건을 세밀하게 제어하는 커스텀 도구라고 볼 수 있습니다.
Ad Inserter를 통해 삽입할 코드는 Google Adsense 설정에서 광고단위를 통해 생성할 수 있습니다. 저는 가로형, 세로형 광고단위를 생성하였습니다. 광고단위를 생성하는 마지막 단계에서 블로그에 삽입할 코드를 확인할 수 있으며, 광고단위 목록에서 < > 아이콘을 클릭하여 확인할 수도 있습니다.
Ad Inserter의 1번에는 컨텐츠 상단에 넣을 코드를 삽입하였습니다.
2번에는 컨텐츠 하에 넣을 코드를 삽입하였습니다.
우측 사이드바는 위젯으로 구성되어 있기 때문에, 사용자 정의 HTML 코드블럭으로 코드를 삽입하였습니다.
Google Adsense에서 광고단위를 생성할때 생성된 코드에는 동일한 javascript가 들어 있기 때문에 1번만 호출하기 위해 Header에만 추가해 주었습니다.
<!-- 헤더 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-키값" crossorigin="anonymous"></script>
<!-- Before content : 디스플레이-수평형-반응형 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-키값"
data-ad-slot="수평값"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<hr style="border: 1px dashed #ccc; margin: 20px 0;">
<!-- After content : 디스플레이-수평형-반응형 -->
<div style="width: 88%; margin: 0 auto;">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-키값"
data-ad-slot="수평값"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- Widget : 디스플레이-수직형-반응형 -->
<div style="width: 90%; margin: 0 auto;">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-키값" data-ad-slot="수직값" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>Code Snippets 플러그인
포스트를 작성할때 제가 원하는 위치에 광고를 삽입하기 위한 단축코드를 다음과 같이 작성하였습니다. 글을 작성시 원하는 위치에서 [a d s e n s e] 를 입력하면 광고가 삽입됩니다.
function kimstar_adsense_shortcode() {
if ( is_admin() ) return '';
ob_start();
?>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-키값"
data-ad-slot="수평값"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php
return ob_get_clean();
}
add_shortcode( 'adsense', 'kimstar_adsense_shortcode' );
