[팝업/배너] 소셜프루프 스크립트 등록하기

📍 코드앤버터 소셜프루프 타입

코드앤버터 소셜프루프는 두 가지 타입을 제공합니다.

• 해당 상품을 조회한 사용자 수 (세션 기준)
• 해당 상품을 구매한 사용자 수 (세션 기준)

📍 소셜프루프 사용하기

• 카페24 앱 연동 사용자 → 별도의 작업 없이 바로 사용 가능
• 일반 코드앤버터 사용자 → 스크립트 작업 필요

일반 코드앤버터 사용자를 위한 스크립트 작업

① 공통 작업

아래 스크립트를 추가하세요. 내부 개발자의 도움이 필요하며, 궁금한 점은 언제든지 채팅 상담으로 문의해 주세요.

• 상세 페이지 안 스크립트 추가
  • 상세 페이지안 아래의 스크립트를 추가하여 상품 정보를 전달해야 합니다.

<script>
window.CodenButterPageInfo = {
type: "PRODUCT", // 필수(고정)
id: "상품의 아이디 값", // 필수
name: "상품명", // 상품의 이름(옵션)
image: "상품 이미지", // 상품의 이미지 URL(옵션)
price: 10000 // 상품의 가격(옵션)
discount: 8000, // 할인된 최종 가격(옵션)
currency: "KRW", // 통화 단위(옵션)
variant1: "BLUE", // 옵션코드1[색상](옵션)
variant2: "XL", // 옵션코드2[사이즈] (옵션)
categoryId: "32", // 카테고리ID (옵션)
categoryName: "shrits", // 카테고리명 (옵션)
};
</script>

• 필수 항목

• 선택 항목

예시1) 상품 페이지 별로 아이디가 존재하고 해당 상품 아이디가 window의 mall이라는 객체에 저장되어 있는 경우

<script>
window.CodenButterPageInfo = {
type: "PRODUCT",
id: window.mall.id,
name: window.mall.name
image: window.mall.image
price: window.mall.price
discount: window.mall.discount
currency: window.mall.currency
variant1: window.mall.variant1
variant2: window.mall.variant2
categoryId: window.mall.categoryId
categoryName: window.mall.categoryName
};
</script>

아래 최소한의 필수 값을 채우세요.

<script>
window.CodenButterPageInfo = {
type: "PRODUCT",
id: window.mall.id
};
</script>

예시2) 상품 페이지 별로 상품 아이디는 있으나, 해당 상품 아이디를 가져올 window 객체가 없는 경우

상품페이지에 맞는 상품 아이디를 직접 스크립트에 삽입 후 각각의 상품페이지에 아래의 스크립트를 삽입해야합니다.

<script>
window.CodenButterPageInfo = {
type: "PRODUCT",
id: 상품 아이디"
};
</script>

해당 스크립트는 아래의 예시처럼 코드앤버터 스크립트 위에 작성하세요.

<script>
window.CodenButterPageInfo = {
type: "PRODUCT",
id: 상품 아이디"
};
</script>
<script>(function (co,de,n,but,t,e,r){!n[co]&&(n[co]=function(){
(n[co].q=n[co].q||[]).push(arguments);});e=t.createElement(but);
e.async=true;e.src=de;r=t.getElementsByTagName(but)[0];
r.parentNode.insertBefore(e, r);
})("CodenButter", "https://buttr.dev/butter.js", window, "script", document);
window.CodenButter("boot", { siteId: "{siteId}", auto: true });</script>

② 추가 작업

‘구매한 사용자 수’ 타입을 사용하고자 한다면 공통 작업과 추가 작업을 진행해야 합니다.

• 구매한 사용자 수 추가 작업을 위한 선행 조건
  • 구매지표가 추가 완료 상태여야 합니다.
    • 코드앤버터 대시보드 → 주요지표에서 구매 관련 지표가 추가되어 있는지 확인할 수 있습니다.
    • 구매 관련 지표추가를 원할 경우 지표 스크립트 등록하기 가이드를 참고해 주세요.
  • 구매지표 이벤트와 함께 상품 정보 이벤트가 정상적으로 들어오고 있어야 합니다.

• 추가 작업 진행하기
  • 구매 지표 이벤트와 함께 상품 정보 이벤트를 별도로 전달해 주세요.

CodenButter("event", { 
name: "purchase_item|상품ID", revenue: { amount: "상품금액" }, props: {
orderId: "주문번호",
itemCount: "상품개수"
} });