M.Lab – Motion & Life Archive

작업과 일상의 기록. 감각을 실험하고, 기억을 아카이빙합니다. Still & Motion, 모두를 담는 공간. – by 미온

📁 Life Archive/└ 생각정리 (잡생각, 에세이, 회고 등)

📌 [티스토리 광고 꿀팁⑥-2] 특정 카테고리에서만 광고 보이게 설정하기 (조건 제어)

M.Lab (미온랩) 2025. 4. 16. 21:00

📌 [광고] 이 게시물은 쿠팡 파트너스 활동의 일환으로,
이에 따른 일정액의 수수료를 제공받을 수 있습니다.

이번에는 반대로, "특정 카테고리에서만 광고를 보이게 설정 하는 방법" 을 소개할게요! 
예를 들어, '정보', '리뷰' 카테고리에는 광고를 넣고,  그 외에는 광고를 숨기고 싶을 때 사용할 수 있어요.


<!-- 시리즈 안내 박스 -->
<div style="background:#f8f9fa; padding:12px 16px; border-left:5px solid #4e73df; margin-bottom:20px; font-size:14px; line-height:1.5;">
  <strong>📌 티스토리 광고 꿀팁 시리즈</strong><br>
  ① 다이나믹 배너 삽입법<br>
  ② 카테고리별 광고 설정<br>
  ③ 글 길이 따라 광고 조절<br>
  ④ 모바일 광고 스타일링<br>
  ⑤ 광고 자동삽입 & 랜덤 출력<br>
  ⑥-1 특정 카테고리 광고 숨기기<br>
  ⑥-2 특정 카테고리에만 광고 보이기 (← 현재 글)
</div>

✅ 1. 카테고리 정보 가져오기



```js
const category = document.querySelector(".category")?.innerText || '';


✅ 2. 광고를 보여줄 카테고리 설정하기

const included = ['정보', '리뷰'];

if (included.includes(category)) {
  const adCode = `<iframe src="https://ads-partners.coupang.com/widgets.html?id=AF9262877&template=carousel&trackingCode=AF9262877&subId=&width=100%&height=140&tsource=" width="100%" height="140" frameborder="0" scrolling="no" referrerpolicy="unsafe-url"></iframe>`;
  document.write(`<div class="ad-by-category">${adCode}</div>`);
}

✅ 3. 삽입 위치는 동일하게

이번에는 반대로, "특정 카테고리에서만 광고를 보이게 설정 하는 방법" 을 소개할게요! 
예를 들어, '정보', '리뷰' 카테고리에는 광고를 넣고,  그 외에는 광고를 숨기고 싶을 때 사용할 수 있어요.


<!-- 시리즈 안내 박스 -->
<div style="background:#f8f9fa; padding:12px 16px; border-left:5px solid #4e73df; margin-bottom:20px; font-size:14px; line-height:1.5;">
  <strong>📌 티스토리 광고 꿀팁 시리즈</strong><br>
  ① 다이나믹 배너 삽입법<br>
  ② 카테고리별 광고 설정<br>
  ③ 글 길이 따라 광고 조절<br>
  ④ 모바일 광고 스타일링<br>
  ⑤ 광고 자동삽입 & 랜덤 출력<br>
  ⑥-1 특정 카테고리 광고 숨기기<br>
  ⑥-2 특정 카테고리에만 광고 보이기 (← 현재 글)
</div>

✅ 1. 카테고리 정보 가져오기



```js
const category = document.querySelector(".category")?.innerText || '';


✅ 2. 광고를 보여줄 카테고리 설정하기

const included = ['정보', '리뷰'];

if (included.includes(category)) {
  const adCode = `<iframe src="https://ads-partners.coupang.com/widgets.html?id=AF9262877&template=carousel&trackingCode=AF9262877&subId=&width=100%&height=140&tsource=" width="100%" height="140" frameborder="0" scrolling="no" referrerpolicy="unsafe-url"></iframe>`;
  document.write(`<div class="ad-by-category">${adCode}</div>`);
}

✅ 3. 삽입 위치는 동일하게

상단에 JS 코드 넣기!


🌿 이 글은 ‘미온’의 아카이브 공간
[M.Lab – Motion & Life Archive]에 기록된 "유용한 정보" 입니다.
소소한 팁들이 당신의 하루에 도움이 되기를 바랍니다 :)
상단에 JS 코드 넣기!


🌿 이 글은 ‘미온’의 아카이브 공간
[M.Lab – Motion & Life Archive]에 기록된 "유용한 정보" 입니다.
소소한 팁들이 당신의 하루에 도움이 되기를 바랍니다 :)