티스토리 애드센스 숏코드 광고 넣기

01

of 05

숏코드를 사용하는 이유

1. 간편하다

티스토리에 구글 애드센스 광고를 넣을 때 일일이 원하는 위치에 수동으로 전체 광고 코드를 넣을 수도 있지만, 숏코드를 이용하면 조금 더 쉽게 광고를 넣을 수 있다. 물론 티스토리의 서식 기능을 사용하면 되지만 그래도 짧은 쇼코드를 이용하는 게 더 간편하다.

2. 관리하기 편하다

숏코드를 사용할 때 전체 광고를 한꺼번에 관리하고 수정할 수 있다. 만약 나중에 인피드 광고를 디스플레이 광고로 변경하게 된다면 간단하게 숏코드 스크립트만 수정하면 된다.

숏코드를 만드는 방법은 여러 가지가 있고, 숏코드 생성기라는 사이트가 있지만, 굳이 사이트에 방문해서 숏코드를 생성하지 않아도 아래 코드만 적절한 위치에 삽입하면 문제없이 사용할 수 있다.

02

of 05

애드센스 광고 코드

디스플레이 광고. 인피드 광고, 인아티클 광고, 멀티플렉스 광고가 있다. 이 광고를 모두 숏코드로 만들 수 있지만 되도록 멀티플렉스 광고는 사용하지 않는 게 좋다. 광고 코드가 비슷해 보이지만 확실히 다른 부분이 있다.

1. 디스플레이 광고 코드

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
Code language: JavaScript (javascript)

2. 인피드 광고 코드

<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="000000000000000"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
Code language: JavaScript (javascript)

3. 콘텐츠 내 자동 삽입 광고 (인아티클 광고) 코드

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
Code language: JavaScript (javascript)

03

of 05

애드센스 숏코드 스크립트

예시를 위해서 총 10개의 숏코드를 만들었다. 광고는 디스플레이 광고, 인피드 광고, 콘텐츠 내 자동 삽입 광고를 골고루 만들어 뒀다.

① ads01, ads04, ads06, ads09 : 디스플레이 광고

② ads02, ads07 : 인피드 광고

③ ads03, ads05, ads08, ads10 : 콘텐츠 내 자동 삽입 광고 (인아티클 광고)

아래 코드를 티스토리 – 꾸미기 – 스킨편집 – html 편집 – html의 하단부 </body> 코드 윗 부분에 붙여 넣기 하면 된다.

<!-- 애드센스 숏코드 -->
<script>
function shortcode(x){return document.getElementById(x)}

if(shortcode('ads01')!=null){
shortcode('ads01').innerHTML='<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxx" data-ad-slot="000000"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads02')!=null){
shortcode('ads02').innerHTML='<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxx" data-ad-client="ca-pub-xxx" data-ad-slot="000000"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads03')!=null){
shortcode('ads03').innerHTML='<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxx" data-ad-slot="000000" data-ad-format="auto" data-full-width-responsive="true"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads04')!=null){
shortcode('ads04').innerHTML='<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxx" data-ad-slot="000000"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads05')!=null){
shortcode('ads05').innerHTML='<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxx" data-ad-slot="000000" data-ad-format="auto" data-full-width-responsive="true"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads06')!=null){
shortcode('ads06').innerHTML='<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxx" data-ad-slot="000000"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads07')!=null){
shortcode('ads07').innerHTML='<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxxx" data-ad-client="ca-pub-xxx" data-ad-slot="000000"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads08')!=null){
shortcode('ads08').innerHTML='<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxx" data-ad-slot="000000" data-ad-format="auto" data-full-width-responsive="true"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads09')!=null){
shortcode('ads09').innerHTML='<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxx" data-ad-slot="000000"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}

if(shortcode('ads10')!=null){
shortcode('ads10').innerHTML='<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxx" data-ad-slot="000000" data-ad-format="auto" data-full-width-responsive="true"></ins>';
(adsbygoogle=window.adsbygoogle||[]).push({});
}
</script>
Code language: JavaScript (javascript)

위 코드에서처럼 처음 시작은 1로 시작해야 하고, 그다음 숫자는 2, 3으로 설정해야 한다. 또한 연속되지 않은 숫자를 사용해도 안 된다.

예로 만약 위 코드 10개를 5개로 줄인다면, 1~5번까지로 설정해서 사용하면 된다.

전체 코드를 복사하여 메모장에 붙여 넣기 한 후 자신이 원하는 개수만큼 적당히 잘라내고, 본인의 data-ad-client, data-ad-slot, data-ad-layout-key로 변경하여 사용하면 된다. 보통 한 페이지에 들어가는 광고는 모두 다른 광고 코드를 사용해야 한다. 중복되는 코드가 들어가면 광고가 나오지 않는다.

04

of 05

애드센스 숏코드 서식 만들기

애드센스 숏코드를 html에 붙여 넣기 했다면 되도록 서식을 만들어서 사용하는 게 편하다. 물론 그냥 수동으로 코드를 넣을 수도 있지만 티스토리에는 강력한 서식 기능이 있기에 이 기능을 사용하면 쉽게 코드를 글 중간중간에 삽입할 수 있다.

만약 숏코드로 애드센스 광고 9개를 만들었다면, 서식 또한 아래와 같이 9개를 만들어야 한다.

<div id="ads01">&nbsp;</div>
Code language: HTML, XML (xml)

<div id="ads02">&nbsp;</div>
Code language: HTML, XML (xml)

<div id="ads03">&nbsp;</div>
Code language: HTML, XML (xml)

<div id="ads04">&nbsp;</div>
Code language: HTML, XML (xml)

<div id="ads05">&nbsp;</div>
Code language: HTML, XML (xml)

<div id="ads06">&nbsp;</div>
Code language: HTML, XML (xml)

<div id="ads07">&nbsp;</div>
Code language: HTML, XML (xml)

<div id="ads08">&nbsp;</div>
Code language: HTML, XML (xml)

<div id="ads09">&nbsp;</div>
Code language: HTML, XML (xml)

아래 이미지처럼 9개의 서식이 만들어 졌다. 서식 제목은 본인이 알아볼 수 있게 의미를 담아서 작성하는 게 좋다.

05

of 05

애드센스 숏코드 사용하기

글 작성시 원하는 위치에 만들어 놓은 서식을 삽입하면 된다. 글 쓰는 중간중간에 광고를 넣어도 되지만, 되도록 모든 글을 작성한 후 광고 넣을 위치를 정하고 그곳에 광고 넣는 방법을 추천한다.

1. 광고 넣을 위치 선정

광고를 넣을 땐 되도록 모든 글을 작성한 후 광고 넣을 위치를 정하면 된다. 원하는 위치에 마우스를 클릭하고 엔터키를 누른 후 공백에 서식 삽입을 하면 된다.

2. 광고 서식 선택

만들어 놓은 광고 서식 중 원하는 광고를 선택하여 삽입하면 된다. 광고를 삽입할 땐 순서대로 삽입하지 않아도 되고, 원하는 서식 아무거나 삽입해도 된다.