쿠팡 상품 자동 노출 방법

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

블로그 콘텐츠와 완벽히 일치하는 쿠팡 상품을 자동으로 노출하는 방법을 소개합니다. 이제 더 이상 일일이 상품 링크를 삽입하느라 시간을 낭비할 필요가 없습니다. 이 시스템은 글 제목(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 호출은 제한될 수 있으므로 분당 호출 횟수를 조절하여 안정적으로 운영하는 것이 중요합니다.