|
✔ 애드센스 광고 코드의 효율적인 삽입 방법 |
이 글은 티스토리 블로그를 기준으로 작성되었습니다. 이하 블로그는 티스토리 블로그를 말하는 것입니다. 블로그 운영으로 수익을 얻기 위해서 구글의 애드센스를 많이 사용하고 있습니다. 구글 AdX (Google DoubleClick Ad Exchange) 광고를 이용하는 블로그가 아니라면 기본적으로 하나의 화면에서 노출 가능한 광고수는 총 8개로 텍스트 및 디스플레이형 광고 3개, 링크형 광고 3개, 맞춤검색 엔진 광고 2개입니다. 그 이상을 초과하는 광고를 한 화면에 노출하게 되면 구글 정책 위반이 되니 주의해야 합니다. 서론이 길었네요. 다른 사람들의 블로그를 보다 보면 보통 한 화면에 텍스트 및 디스플레이형 광고, 링크형 광고 등 최소 2~6개까지 노출되는 것을 보았는데요. 애드센스 광고를 사용하게 되면 광고 코드가 추가되다보니 사용하지 않았을 때 보다 블로그 속도가 느려집니다. 그래서 블로그에 삽입되는 애드센스 광고 코드에서 중복되는 JS 파일을 한 곳에서 사용하도록 수정해서 블로그를 로딩 속도를 향상시키려고 합니다.
여기서 수정 대상이 되는 광고 형태는 텍스트 및 디스플레이형 광고와 링크형 광고입니다. 맞춤검색 엔진 광고의 경우 소스의 형태가 달라서 대상이 되지 않습니다.
아래에서 다시 설명 하겠지만, 플러그인 형태로 애드센스 광고 코드를 삽입한 경우에는 아래의 방법을 사용할 수 없습니다.
|
✔ 반복되는 코드는 한곳에서 사용하자 |
|
텍스트 및 디스플레이형 광고, 링크형 광고 코드는 아래와 같은 형태를 가지고 있습니다. 광고 코드마다 중복되는 내용을 확인해 보면 JS 파일을 include 하는 부분과 광고를 화면에 보여주기 위한 부분입니다.
|
1
2
3
4
5
6
7
8
|
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="**-***-****************"
data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
|
결론부터 말씀드리면 JS 파일을 include 하는 부분은 한 곳에서 공통으로 사용 가능합니다.
|
1
|
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
cs |
광고를 화면에 보여지기 위한 부분은 한 곳에서 사용하는 것이 불가능합니다. 광고 하나하나마다 아래의 스크립트가 있어야 합니다. 예를 들어 3개의 광고를 보여주고자 하는데 아래의 코드는 2군데만 있다고 하면 화면에 보여지는 광고는 2개입니다. 즉, 광고 개수만큼 있어야 하는 코드입니다.
|
1
2
3
|
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
|
cs |
|
✔ 애드센스 광고 소스 정리하기 |
|
에드센스 광고 소스 정리는 아래와 같은 순서로 진행합니다.
1. JS 파일을 include하는 소스를 skin.html 에 head 태그 안으로 이동시키기
|
1
2
3
4
5
6
7
|
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
// 아래의 내용을 추가합니다.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
...
</head>
|
cs |
skin.html 에 head 태그 안에 jquery.min.js파일을 include 하는 소스 바로 아래에 위와 같이 중복해서 사용되던 내용을 추가합니다.
2. 광고 소스에서 JS 파일을 include하는 소스를 삭제하기
|
1
2
3
4
5
6
7
|
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="**-***-****************"
data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
|
cs |
중복으로 사용되던 내용은 head 태그 영역으로 옮겨서 이제 한 곳에서만 호출되도록 변경하였으니 head 태그 안에 추가했던 내용은 광고 소스 안에서는 모두 삭제하고 남은 광고 소스 형태로 삽입해서 사용하면 됩니다.
|
✔ 마치면서 |
|
위의 화면은 실제로 구글 애드센스 광고 소스에서 공통으로 사용되는 JS 분리한 후 광고를 노출한 결과입니다.
