티스토리 반응형 Square 스킨 애드센스 인피드 광고 삽입 넣는 방법

티스토리 반응형 Square 스킨 애드센스 인피드 광고를 삽입 넣는 방법입니다.

 

1. 애드센스에서 인피드 광고를 만듭니다.

1. 애드센스에서 인피드 광고를 만듭니다.

 

2. Square 스킨 편집으로 들어가서 html  편집을 클릭합니다.

2. Square 스킨 편집으로 들어가서 html  편집을 클릭합니다.

 

3. </head> 태그를 찾아서 바로 위에 아래 소스를 넣어 줍니다.

- 애드센스의 인피드 광고 소스에서 data-ad-layout-key, data-ad-client, data-ad-slot 값을 찾아 넣어 줍니다.
- chInfeedAdSenseInsert 값을 통해서 목록 사이에 몇 개를 노출할 것인지 결정하면 됩니다.

<script>
    var chInfeed = 0;
    var chInfeedAdSenseShow = 0; // 0 = 인피드광고 적용, 1 = 인피드광고 비적용
    var chInfeedAdSenseInsert = 5; // 인피드광고 적용 개수
    var chInfeedAdSense = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="◆" data-ad-client="■" data-ad-slot="●"></ins>';
</script>

3. </head> 태그를 찾아서 바로 위에 아래 소스를 넣어 줍니다.

 

4. 대략 165 라인 정도에 아래 소스를 넣어 줍니다.

- 실제로 화면에 나오게 하는 소스입니다.
- <div id="body" class="list"> → <s_list_rep> <li> ... </li> 아래에 소스를 넣어 줍니다.

			<div id="body" class="list">
				<ul>
					<s_list_rep>
					<li>
						<a href=""></a>
						<span class="date"></span>
						<span class="cnt"></span>
						<div class="clear"></div>
					</li>

<!-- 인덱스 페이지 애드센스 시작 -->
<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({});
						document.write("<hr style='padding: 0; margin: 0; height: 1px; border: 0 none; color: #f5f5f5; background-color: #f5f5f5;'>");
        }
    }
</script>
<!-- 인덱스 페이지 애드센스 끝 -->
						
					</s_list_rep>
				</ul>
			</div>

4. 대략 165 라인 정도에 아래 소스를 넣어 줍니다.

 

소스를 정상적으로 삽입을 하였다면 아래와 같이 노출이 되게 됩니다.

티스토리 반응형 Square 스킨 애드센스 인피드 광고가 들어간 모습

 

아래 첨부 파일은 위에서 얘기 드렸던 샘플 소스입니다.

 

인피드 광고.zip

0.00MB

 

2020/10/29 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 플러그인 상단 애드센스 배너 2개 노출 방법

티스토리 반응형 Square 스킨 플러그인 상단 애드센스 배너 2개 노출 방법

2020/10/22 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 애드핏 상단 하단 배너 방법 - Daum AdFit (PC)

티스토리 반응형 Square 스킨 애드핏 상단 하단 배너 방법 - Daum AdFit (PC)

 

2020/10/20 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 Recent posts 에러 해결 방법

티스토리 반응형 Square 스킨 Recent posts 에러 해결 방법

2020/02/03 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 사이드바에 애드핏, 애드센스 넣기

티스토리 반응형 Square 스킨 사이드바에 애드핏, 애드센스 넣기