'인피드(infeed) 광고'란 말 그대로 feed 안의 광고다. 즉, 게시물 목록 사이에 광고를 넣는다는 의미.
구글 애드센스 관리자 페이지에서 미리 만들어놓은 인피드 광고의 코드를 티스토리에 적용해보자.
먼저, 티스토리 관리자 메뉴의 '스킨편집 > html 편집' 을 열어 <head> 부분에 'InfeedCount' 즉, 카운트 변수를 선언해야 한다.
개발자라면 무슨 의미인지 한번에 알 수 있겠지만 개발자가 아니라면 구체적인 의미 보다는 그냥 몇번째 게시글 아래에 광고를 넣을지 계산하기 위한 값 정도로 보면 된다.
<head>
.
.
.
<!-- adSense -->
<script data-ad-client="ca-pub-yours" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 인피드 광고 카운트 선언 -->
<script> var InfeedCount = 0; </script>
</head>
다음은 </s_index_article_rep> 태그를 찾는다. 아마 여러개가 나올텐데, <s_article_rep> 태그로 감싸여져 있는 </s_index_article_rep>를 찾아야 한다. 일반적으로 html은 <xxx></xxx> 이렇게 쌍으로 되어있다는 것만 알자.
<s_article_rep>
<s_index_article_rep>
<div class="list_content">
.
.
.
</div>
.
.
.
--->> 여기에 인피드 광고 코드 넣을 것임!!!!
</s_index_article_rep>
.
.
.
<s_article_rep>
예시1) 6개의 게시글 중에서 2번째에 넣고 싶다.
<s_article_rep>
<s_index_article_rep>
<div class="list_content">
.
.
.
<!-- 인피드 광고 시작 -->
<script>
if (InfeedCount % 6 == 1) {
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="your_key" data-ad-client="your_pub" data-ad-slot="yours"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({});
}
InfeedCount++;
</script>
<!-- 인피드 광고 끝 -->
</s_index_article_rep>
.
.
.
</s_article_rep>
예시2) 6개의 게시글 사이에 광고를 2개 넣고 싶다.
<s_article_rep>
<s_index_article_rep>
<div class="list_content">
.
.
.
<!-- 인피드 광고 시작 -->
<script>
if (InfeedCount % 3 == 1) {
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="your_key" data-ad-client="your_pub" data-ad-slot="yours"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({});
}
InfeedCount++;
</script>
<!-- 인피드 광고 끝 -->
</s_index_article_rep>
.
.
.
</s_article_rep>
만약, 원하는 순서에 광고를 자유자재로 넣고 싶다면 InfeedCount % 6 == 2 이나 InfeedCount % 3 == 1 의 계산식과 결과에 대해서 이해하면 쉬운데, '6으로 나눈 값의 나머지가 2', '3으로 나눈 값의 나머지가 1' 이라는 뜻이다. 이해했다면 바로 응용!
예시3) 서로 다른 인피드 광고를 게시글 사이에 넣고 싶다.
우선 애드센스 관리자 페이지에서 두개의 인피드 광고를 만든다.
그 다음, 각각의 인피드 광고 코드를 알맞게 넣는다.
<s_article_rep>
<s_index_article_rep>
<div class="list_content">
.
.
.
</div>
<!-- 인피드 광고 시작 -->
<script>
if (InfeedCount % 3 == 1) {
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="your_key_1" data-ad-client="ca-pub-yours" data-ad-slot="your_slot1"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({});
}
InfeedCount++;
if(InfeedCount == 6) {
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="your_key_2" data-ad-client="ca-pub-yours" data-ad-slot="your_slot2"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
<!-- 인피드 광고 끝 -->
</s_index_article_rep>
.
.
.
<s_article_rep>
[예시3의 결과]
'프로그래밍' 카테고리의 다른 글
| vimrc 설정하기 (0) | 2022.03.10 |
|---|