GitHub(깃허브) 블로그에 애드센스 수동 광고 넣기
GitHub(깃허브) 블로그에 애드센스 수동 광고 넣기
이 글에서는 GitHub 블로그에 애드센스 수동 광고를 설정하는 방법을 설명합니다.
수동 광고가 필요한 경우
구글 애드센스 사용자는 콘텐츠 전달의 편의와 광고 효율 향상을 위해 자동 광고와 수동 광고를 섞어쓰는 경우가 많습니다.
자동 광고는 말 그대로 애드센스가 알아서 광고를 보여줍니다. 수동 광고는 사용자가 지정한 위치에 지정한 형태로 광고를 보여줍니다.
애드센스는 자동 광고에 대해 "사이트 전체에서 가장 적합한위치에 자동으로 광고 게재"라고 설명하고 있습니다.
자동 광고 기능을 켜면 사용자 경험(user experience)를 해치는 경우가 종종 있습니다. 모바일의 경우 맨 상단 제목 바로 아래 큼지막한 광고를 보여주는 경우도 많습니다. 페이지의 기본 내용을 보려고 해도 스크롤을 해야 하는 것은 물론이고, 상단 광고 로딩에도 시간이 소요되게 됩니다.
애드센스에서 광고를 넣지 않을 영역(제외된 영역)을 지정할 수는 있지만, 사이트 구조에 따라서는 지정할 수 없는 부분도 있습니다.
아래와 같이 제목 밑을 광고 제외 영역으로 지정하려고 하는데, 지정이 되지 않습니다. 그런데 여기에 광고가 나타납니다.
| 광고 제외 가능 영역 (파란색) | 실제 나타난 광고 |
|---|---|
 |
 |
사이트 운영 목적에 따라 다르겠지만, 사용자 경험을 조금 우선시 한다면 적절한 수준으로 광고를 줄일 필요가 있습니다.
수동 광고 사용하기
여기서는 자동 광고를 모두 끄고, 페이지의 맨 마지막에 있는 각주 바로 위에만 광고를 수동 게재하는 방법을 설명합니다. 이 보다는 자동 광고 수를 줄이고, 원하는 위치에 수동 광고를 기본 배치하는 것이 나을 수 있습니다.
수동 광고를 만들기 위해서는 먼저 광고 단위를 만들어야 합니다. 디스플레이, 인피드, 인아티클, 멀티플렉스의 4가지를 지원합니다. 각각을 눌러보면 어떤 스타일인지 알 수 있습니다.
아래는 멀티플레스 광고 단위를 설정하는 화면입니다. 오른쪽 아래에 스크롤을 하면 본인의 사이트에 어울리도록 폰트나 배경색도 지정할 수 있습니다.
만들기 버튼을 누르면 아래와 같이 HTML에 삽입할 수 있는 코드가 나타납니다. 이 코드를 광고가 나타나기를 원하는 위치에 넣으면 됩니다.
제 경우에는 각주 위에 넣을 예정입니다. 각주만 담당하는 _includes/commons/footnotes.md 파일이 있으니, 여기에 추가하면 됩니다. 운영 사이트에만 동작하도록 설정했으며, 테스트 사이트에는 애드센스 위치로 표시하도록 하였습니다.
{% if site.github.url == site.prod_url__ %}
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8120389152057270"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-8120389152057270"
data-ad-slot="3188337285"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
{% else %}
```plaintext
** Place for AdSense **
```
{% endif %}
테스트 사이트에서는 어디에 광고가 위치되는지 보여주고 있습니다.
운영 사이트에도 적용해 보겠습니다. 데스크탑에는 한 줄에 4개씩 두 줄이 나오고 있습니다.
모바일에는 한 줄에 하나씩 총 10개 이상 나오고 있습니다.
멀티플렉스 광고 수 조절하기
광고가 과도하게 나오는 듯 해서 원인을 살펴보니 HTML 코드는 하나임에도 광고 블럭은 2개로 잡힙니다.
애드센스 도움말을 찾아보니 멀티플렉스는 데스크탑과 모바일에 대해 각각 행과 열 수를 지정할 수 있다고 합니다.
아래와 같이 변경하면, 데스크탑은 1x4 (4개짜리 1줄), 모바일은 2x1 (1개짜리 2줄)로 광고가 나옵니다. data-matched-content-rows-num과 data-matched-content-columns-num은 광고의 열과 행 수이고, 첫번째 숫자는 모바일용, 두번째 숫자는 데스크탑용입니다. 마찬가지로 보여주는 광고 형태를 설정하는 data-matched-content-ui-type도 순서대로 모바일, 데스크탑 설정입니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8120389152057270"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-8120389152057270"
data-ad-slot="3188337285"
data-matched-content-rows-num="2,1"
data-matched-content-columns-num="1,4"
data-matched-content-ui-type="image_stacked,image_stacked"></ins>
설정대로 잘 나오고 있습니다.
모바일 광고가 자리를 많이 차지하는 듯 합니다.
댓글
댓글 쓰기