쿠팡 파트너스 상품을 글 내용에 맞게 자동 노출 하기

블로그 글 내용과 자동으로 연결되는 쿠팡 상품 노출 방법을 정리해 드립니다. 내가 쓴 글의 제목이나 지정한 태그를 인공지능처럼 분석하여 관련 있는 물건을 실시간으로 불러와 배치하는 상품 노출 프로그램 설치 방법입니다.

내 블로그 콘텐츠와 잘 어울리는 상품을 찾고 링크를 하나하나 복사해서 붙여넣느라 귀중한 시간을 낭비할 필요가 없습니다. 이 방법은 글의 핵심 주제가 담긴 제목(h1)이나 직접 지정한 키워드 태그(p class="shoptag")를 꼼꼼하게 분석합니다. 그 후 해당 내용과 가장 연관성이 높은 물건을 골라 자연스럽게 쿠팡 파트너스 상품을 적용합니다.

1. 쿠팡 상품 자동 노출 방법 특징 및 장점

• 콘텐츠 맞춤 상품 매칭: 예를 들어 “에어프라이어 추천”이라는 글을 쓰면 자동으로 관련 가전제품이나 주방 용품을 찾아 노출합니다.
• 자동 위치 선정: 독자가 글을 읽는 흐름을 방해하지 않도록 가장 보기 좋은 위치(첫 번째 h3 소제목 다음)에 상품 카드가 생성됩니다.
• 스마트 필터링 기능: 블로그 홈 화면이나 카테고리 목록 페이지에서는 작동하지 않도록 설정되어 블로그의 전체적인 품질과 SEO 최적화를 유지합니다.
• 반응형 디자인 적용: 컴퓨터 화면에서는 3열 격자 모양으로, 스마트폰에서는 옆으로 넘겨보는 가로 슬라이드 방식으로 보여 광고 효율을 높입니다.

2. 쿠팡 상품 자동 노출 적용 단계 (7단계 순서)

1단계: 내 블로그에 설치할 클라이언트 스크립트

아래의 자바스크립트 코드를 블로그 관리 페이지의 스킨 편집 화면에서 body 태그가 끝나기 직전 위치에 삽입합니다. 이 코드가 글의 주제를 파악하고 상품을 가져오는 역할을 합니다.

<script>
const API_URL = 'https://본인의_앱스_스크립트_URL';
const DEFAULT_LIMIT = 3;

document.addEventListener('DOMContentLoaded', function () {
 const path = window.location.pathname;
 // 메인페이지나 카테고리 목록에서는 실행되지 않도록 방어 로직 추가
 if (path === '/' || path.startsWith('/category')) return;
 searchProductsAndInsert();
});

function searchProductsAndInsert() {
 // 우선적으로 shoptag 클래스를 가진 p 태그 안의 텍스트를 키워드로 인식
 const tagElement = document.querySelector('p.shoptag');
 // 태그가 없다면 h1 제목의 앞부분을 키워드로 활용
 const h1Element = document.querySelector('h1');
 let keyword = tagElement?.textContent.trim() || h1Element?.textContent.split('-')[0].trim();

 if (!keyword) return;

 const resultsContainer = document.createElement('div');
 resultsContainer.id = 'coupangProductContainer';
 
 // 첫 번째 h3 태그를 찾아 그 바로 아래에 상품 컨테이너 삽입
 const firstH3 = document.querySelector('h3');
 if (firstH3) {
  firstH3.parentNode.insertBefore(resultsContainer, firstH3.nextSibling);
 }

 // 구글 앱스 스크립트 API에 접속하여 상품 데이터 요청
 fetch(`${API_URL}?keyword=${encodeURIComponent(keyword)}&limit=${DEFAULT_LIMIT}`)
 .then(res => res.json())
 .then(data => {
  if (data.data?.productData) {
   displayResults(data.data.productData, resultsContainer);
   addAffiliateDisclaimer(resultsContainer);
  }
 });
}

function displayResults(products, container) {
 products.forEach(p => {
  const card = document.createElement('div');
  card.className = 'product-card';
  card.innerHTML = `
  <img src="${p.productImage}" class="product-image" alt="${p.productName} 쿠팡 파트너스 자동 추천 상품 이미지">
  <div class="product-title">${p.productName}</div>
  <div class="product-price">${p.productPrice.toLocaleString()}원</div>
  <a href="${p.productUrl}" target="_blank" class="product-link">쿠팡에서 최저가 확인</a>`;
  container.appendChild(card);
 });
}

function addAffiliateDisclaimer(container) {
 const p = document.createElement('p');
 p.className = 'coupang-disclaimer';
 p.textContent = '※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.';
 container.after(p);
}
</script>

2단계: 설정 및 사용 방법 안내

위 코드에서 본인의 환경에 맞게 변경해야 할 항목들입니다.

3. 구글 앱스 스크립트(GAS) 연동 설정

쿠팡 서버와 안전하게 통신하기 위한 뒷단(Backend) 코드를 작성해야 합니다. 쿠팡 파트너스 API 연동을 위해 본인의 고유 키값을 반드시 입력해야 정상 작동합니다.

const COUPANG_ACCESS_KEY = "본인의_액세스_키_입력";
const COUPANG_SECRET_KEY = "본인의_시크릿_키_입력";

function doGet(e) {
 const keyword = e.parameter.keyword;
 const limit = e.parameter.limit || 3;
 // 쿠팡 API를 호출하여 상품 리스트를 가져오는 함수 실행
 const result = fetchCoupangProducts(limit, keyword);
 return ContentService.createTextOutput(JSON.stringify(result))
 .setMimeType(ContentService.MimeType.JSON);
}

// 상세한 API 서명 생성 및 호출 로직은 표준 라이브러리 방식을 따릅니다.

4. 예쁜 상품 카드를 위한 디자인 설정 (CSS)

화면 테마에 상관없이 깔끔하게 어울리는 반응형 카드 스타일입니다. 스킨 편집의 CSS 탭에 추가해 주세요.

#coupangProductContainer { display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0; }
.product-card { flex: 1 1 calc(33.3% - 20px); border: 1px solid #eee; padding: 15px; border-radius: 12px; text-align: center; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.product-image { width: 100%; height: auto; border-radius: 8px; margin-bottom: 10px; }
.product-title { font-size: 14px; color: #333; margin-bottom: 8px; line-height: 1.4; height: 2.8em; overflow: hidden; }
.product-price { font-weight: bold; color: #e44d26; margin-bottom: 10px; }
.product-link { display: inline-block; background: #007bff; color: #fff; padding: 6px 12px; border-radius: 20px; text-decoration: none; font-size: 13px; }

/* 모바일 전용 슬라이더 설정 */
@media (max-width: 768px) {
 #coupangProductContainer { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
 .product-card { flex: 0 0 75%; scroll-snap-align: center; }
}