지난 포스팅에서 반응형 인피드 광고 넣는 방법에 대해 알아보았습니다.
티스토리 애드센스(4-2) 반응형 인피드 광고 적용 (단위기준설정)
지난 포스팅에서 인피드 광고 적용방법을 알아보았습니다. 인피드 광고가 PC에서는 제대로 적용되는데 모바일에서 다른 목록들과 다르게 이미지나 리스트 영역이 크게 보이는 현상이 있습니다. 이를 해결하기 위해..
leeys.tistory.com
이번에는 인피드 광고를 중간 위치에 여러 개 넣는 방법에 대해 알아보겠습니다.
반응형 인피드 광고와 비슷한 방식으로 소스코드를 편집해야 하기 때문에 홈, 카테고리 광고의 소스코드를 메모장에 복사합니다. (홈 화면을 사용하지 않으신 분은 카테고리만 복사하시면 됩니다.)
복사한 모든 소스코드에서 각각의 <ins> ~ </ins> 부분을 한 줄로 수정하고 아래 주석 설명을 참고하여 편집합니다.
<script>
var infeedCnt = 0; // 수정하지 마세요
var infeedAdSenseShow = true; // true = 인피드광고 적용, false = 인피드광고 비적용
var infeedAdSenseInterval = 3; // 설정한 숫자순번에 반복해서 광고가 삽입됩니다.
var homeInfeedAdSense = window.innerWidth>=768
//홈 - PC용을 넣어주세요
? '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-em+1c-1b-sa+1k8" data-ad-client="ca-pub-1275210501074897" data-ad-slot="9902289416"></ins>'
//홈 - 모바일용을 넣어주세요
: '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-g5+1c-66-ht+1jw" data-ad-client="ca-pub-1275210501074897" data-ad-slot="9167275324"></ins>';
var categoryInfeedAdSense = window.innerWidth>=768
//카테고리 - PC용을 넣어주세요
? '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-fa+13+a-ry+1ec" data-ad-client="ca-pub-1275210501074897" data-ad-slot="3590325642"></ins>'
//카테고리 - 모바일용을 넣어주세요
: '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-g6+a+4-jp+148" data-ad-client="ca-pub-1275210501074897" data-ad-slot="2656023084"></ins>';
</script>
편집된 소스는 티스토리 스킨 편집 화면에서 <head> ~ </head> 사이에 삽입합니다.
지금까지는 준비과정이고 이제 홈, 카테고리에 인피드 광고를 삽입할 위치를 찾아 아래 소스를 넣어주어야 합니다.
홈 - 인피드 광고
<script>
if (infeedAdSenseShow) {
infeedCnt++;
// infeedCnt == 1 -> 필수 적용 위치(ex. 첫번째 무조건 광고삽입)
if (infeedCnt == 1 || infeedCnt % infeedAdSenseInterval == 0) {
document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
document.write(homeInfeedAdSense);
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
</script>
카테고리 - 인피드 광고
<script>
if (infeedAdSenseShow) {
infeedCnt++;
// infeedCnt == 1 -> 필수 적용 위치(ex. 첫번째 무조건 광고삽입)
if (infeedCnt == 1 || infeedCnt % infeedAdSenseInterval == 0) {
document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
document.write(categoryInfeedAdSense);
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
</script>
소스 삽입 후 적용을 하게 되면 아래와 같이
"광고(필수 적용 위치) > 글 2개 > 광고 > 글 2개 > 광고 > {반복}" 순으로 광고가 삽입됩니다.
'기타 > 블로그 팁' 카테고리의 다른 글
| 티스토리 애드센스(4-2) 반응형 인피드 광고 적용 (단위기준설정) (0) | 2019.12.11 |
|---|---|
| 티스토리 애드센스(4-1) 인피드 광고 넣기(단위기준설정) (0) | 2019.12.04 |
| 티스토리 애드센스(3-2) 반응형 디스플레이 상단 2개 넣기(단위기준설정) (4) | 2019.12.03 |
| 티스토리 애드센스(3-1) 반응형 디스플레이 광고 설정 방법(단위기준설정) (0) | 2019.12.02 |
| 티스토리 애드센스(2) 자동 광고 넣기 (3) | 2019.12.01 |
