티스토리 게시물 목록에 광고를 넣기 위해 많이들 알아보시는 것 같더라고요. 그리고 다른 블로그를 참조하더라도 목록에 추가가 안되시는 분들도 많아 보입니다.
그 이유와 그 해결방법 제가 가지고 왔습니다. 제가 스스로 문제점을 찾아내고 해결했습니다.
이번 포스팅에선 추가하는 순서부터 차근차근히 알려드리겠습니다 천천히 따라오십시오!
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
https://open.kakao.com/o/g3Rudmwf
목록에 광고 추가 삽입하기 - 인피드 광고 (In-feed)
티스토리 광고는 다양하게 많은데요. 그중에 인피드 광고를 추가하는 방법에 대해 알아보겠습니다.
인피드 광고는 티스토리 설정 내에 있는 플러그인으로 지원을 해주지 않아 직접 스킨편집> HTML편집을 통하여
작업을 해야 합니다. HTML을 쉽게 잘 다루시는 분이라면 크게 문제가 되지 않지만 반면에 그렇지 못한 분들은 힘드실 수 있으며 조심하셔야 합니다. 태그들은 각각 묶여있는 경우들이 많아 사이트가 먹통이 될 수도 있습니다.
인피드 광고를 삽입을 하기 위해 몇 가지의 단계를 걸쳐야 합니다.
1. 애드센스에서 인피드 광고 생성하기
먼저 본인 계정의 애드센스를 로그인하여 광고 > 광고 단위 기준에 가셔서 `인피드 광고` 생성을 클릭합니다.
2. 본인의 티스토리 주소 입력, Desktop 변경 선택 후 페이지 스캔
위와 같은 모양으로 입력하시고 설정해주시면 됩니다. (본인링크 + Desktop)
하지만, 문제는 되는 분도 있고 안 되는 분도 있을 텐데 안되면 하위의 카테고리인 `광고 스타일 직접 만들기`를 선택하여 진행하셔도 무방합니다. 저 또한 스캔이 되지 않아 광고 스타일 직접 만들기로 진행하였습니다.
직접 만들기로 하신 분들은
이와 같이 화면이 뜰 텐데 자신의 피드와 가장 비슷한 모양의 스타일을 지정하시는 것이 좋아 보입니다.
저장 및 코드 생성을 하면 코드가 나올 텐데, 코드를 저장하여 잘 기억해 두시길 바랍니다.
그리고 본인의 [티스토리 - 스킨 편집] 탭으로 갑니다. 가셔서 [html편집]을 클릭합니다.
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
먼저, <head> 태그 사이의 변수 값들을 바꿔줍니다.
<!-- 인피드 광고 코드 -->
<script>
var chInfeed = 0;
var chInfeedAdSenseShow = 0;
var chInfeedAdSenseInsert = 5;
var chInfeedAdsense = '<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="값"
data-ad-client="값"
data-ad-slot="값"></ins>';
</script>
<!-- 인피드 광고 코드 끝 -->값이라고 적혀있는 곳에는 위에서 복사해 놓았던 코드들을 양식에 맞추어 넣어 작성하면 됩니다. 단, 지금은 가독성을 고려하여 줄바꿈을 해놓았지만 줄바꿈을 하지않고, 한줄 출력이 더 좋아보입니다. 즉, 다시 작성해보자면 아래와 같습니다.
<!-- 인피드 광고 코드 -->
<script>
var chInfeed = 0;
var chInfeedAdSenseShow = 0;
var chInfeedAdSenseInsert = 5;
var chInfeedAdsense = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="값" data-ad-client="값" data-ad-slot="값"></ins>';
</script>
<!-- 인피드 광고 코드 끝 -->
여기서 문제입니다. 여기가 제일 중요합니다.
다른 인피드 광고 넣는 게시물들을 보면 `s_index_article_rep`를 검색해서 코드를 넣으라고 하는데 `s_index_article_rep`이 두 군데 있습니다.
<!-- 인피드 광고 -->
<div class="rgy_index_infeedAdsense">
<script>
if (chInfeedAdSenseShow == 0) {
chInfeed++;
if (chInfeed % chInfeedAdSenseInsert == 0) {
document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>');
document.write(chInfeedAdSense);
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
</script>
</div>
<!-- -->첫 번째 `s_index_article_rep`이 아닌 두 번째 `s_index_article_rep`에 아래 작성하셔야 되며, 정확한 위치는
<div class="inner">
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
```
~
```
~
```
</div>
<!-- 인피드 광고 -->
<div class="index_infeedAdsense">
<script>
if (chInfeedAdSenseShow == 0) {
chInfeed++;
if (chInfeed % chInfeedAdSenseInsert == 0) {
document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
document.write(chInfeedAdSense);
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
</script>
</div>
<!-- -->
</s_index_article_rep>에 위치하여 작성하여야 합니다.
1. <div class="inner">
2. <s_index_article_rep>
3. <div class="post-item">
세 개를 주의하여 작성하시기 바랍니다.
이렇게 하고 저장 적용을 하면 끝나게 됩니다.
적용 시간은 30분 정도 걸리니 그 후에 확인할 수 있습니다.
만약에 작동이 되지 않는다면 댓글 문의하시기 바랍니다.
'블로그 운영하기' 카테고리의 다른 글
| 구글 애드센스 계좌 등록하는 방법 ! (0) | 2023.05.13 |
|---|---|
| PIN 번호 등록하는 법 - 구글 애드센스 핀번호가 도착하였습니다. 우편함을 확인해주시기 바랍니다. (0) | 2023.05.12 |
| [쿠팡파트너스] 하지않을 이유가 없다!!! 신청부터 최종 승인까지 그리고 추천인 코드를 입력해야하는 이유!!! ( 추천인코드 : AF9943806 ) (0) | 2023.01.31 |
| [AdFit] 카카오 애드핏 용어 정리 및 이해! (0) | 2022.12.17 |
| [Adsense] 애드센스 용어 정리 및 이해 (0) | 2022.09.01 |
