쿠팡 상품 자동 노출 방법 2탄: 콘텐츠에 최적화된 상품 자동 노출 방법

쿠팡 상품 자동 노출 방법

블로그 글 내용과 자동으로 연동되는 쿠팡 상품 노출 방법을 안내합니다. 제목이나 지정 태그를 분석해 관련 상품을 실시간으로 불러와 자동 배치하는 스마트 자동화 방식입니다.

---

블로그 콘텐츠와 완벽히 일치하는 쿠팡 상품을 자동으로 노출하는 방법을 소개합니다. 이제 더 이상 일일이 상품 링크를 삽입하느라 시간을 낭비할 필요가 없습니다. 이 시스템은 글 제목(h1)이나 지정 태그(p class="shoptag")를 정교하게 분석하여, 해당 콘텐츠와 가장 관련성 높은 상품을 스마트하게 노출합니다.

1. 주요 기능 및 장점

• 콘텐츠 맞춤 상품 매칭: "에어프라이어 추천" 글에는 자동으로 관련 가전 상품을 노출합니다.
• 자동 위치 배치: 독자의 흐름을 방해하지 않는 최적의 위치(첫 번째 h3 태그 다음)에 자동 삽입됩니다.
• 스마트 필터링: 메인이나 카테고리 페이지에서는 비활성화되어 블로그 품질을 유지합니다.
• 반응형 디자인: 데스크톱 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() {
 const tagElement = document.querySelector('p.shoptag');
 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';
 const firstH3 = document.querySelector('h3');
 if (firstH3) firstH3.parentNode.insertBefore(resultsContainer, firstH3.nextSibling);

 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"
 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단계: 설정 항목 가이드

항목	설명	사용 예시
API_URL	구글 앱스 스크립트 배포 주소	https://script.google.com/.../exec
shoptag	수동 키워드 지정 태그	p class="shoptag"에어프라이어/p

3. 구글 앱스 스크립트(Backend) 연동

쿠팡 API 통신을 위한 서버 측 코드를 작성합니다. 반드시 본인의 API Key를 입력하세요.

const COUPANG_ACCESS_KEY = "YOUR_ACCESS_KEY";
const COUPANG_SECRET_KEY = "YOUR_SECRET_KEY";

function doGet(e) {
 const keyword = e.parameter.keyword;
 const limit = e.parameter.limit || 3;
 const result = fetchCoupangProducts(limit, keyword);
 return ContentService.createTextOutput(JSON.stringify(result))
 .setMimeType(ContentService.MimeType.JSON);
}

// (상세 API 호출 로직은 기존 가이드와 동일하게 유지)

4. 반응형 디자인 스타일 (CSS)

다크 모드와 라이트 모드에 최적화된 반응형 카드 스타일입니다.

#coupangProductContainer { display: flex; gap: 20px; flex-wrap: wrap; }
.product-card { flex: 1 1 calc(33.3% - 20px); border: 1px solid #ddd; padding: 10px; border-radius: 8px; text-align: center; }
@media (max-width: 768px) {
 #coupangProductContainer { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
 .product-card { flex: 0 0 80%; }
}

---

질문 1: 쿠팡 자동 상품 노출 시스템은 어떻게 작동하나요?

블로그 글의 제목(h1)이나 수동 지정 태그(p class="shoptag")를 분석해 해당 콘텐츠와 가장 관련성 높은 쿠팡 상품을 자동으로 추천해주는 시스템입니다. 별도의 수동 작업 없이 최신 인기 상품을 실시간으로 노출하여 관리와 운영 효율성을 높여줍니다.

질문 2: 자동으로 상품이 삽입되는 위치를 변경할 수 있나요?

네, 기본적으로 본문 내 첫 번째 h3 태그 다음에 삽입되도록 설정되어 있습니다. 스크립트 내의 'querySelector('h3')' 부분을 다른 태그나 클래스명으로 변경하면 원하는 위치로 자유롭게 조정이 가능합니다.

질문 3: 시스템 도입 시 주의해야 할 정책적 사항은 무엇인가요?

쿠팡 파트너스 운영 정책에 따라 '수수료 제공' 안내 문구(디스클레이머)는 반드시 노출되어야 합니다. 또한 과도한 API 호출은 제한될 수 있으므로 분당 호출 횟수를 조절하여 안정적으로 운영하는 것이 중요합니다.