AI 상품 추천: 데이터 호출형¶
개요¶
스크립트 LOAD 완료 후 원하는 시점에 추천 상품 목록을 가져와서 사용할 수 있습니다. DIV형과 달리 디자인을 자유롭게 구성할 수 있습니다.
비동기식 방식으로 구혐되어 있기 때문에 타임아웃 값을 적절하게 설정해주세요.
연동 방식¶
고객사가 Groobee에서 추천 상품을 요청하면 데이터를 바로 전달합니다. 비동기식이라 요청이 느려지면 HTML에 추천 리스트를 표현하지 못하는 경우가 발생할 수 있습니다.
추천 상품 조회 (getGroobeeRecommendAsync)¶
고객사가 추천 상품을 요청할 때 사용하는 함수입니다.
- 역할: 추천 상품 조회
- 함수명:
groobee.getGroobeeRecommendAsync
파라미터¶
campaignKey(string): 캠페인키timeSet(int): 타임아웃 시간 (기본 3000ms){}(object, optional): 임시(생략 가능)
호출 예시¶
groobee.getGroobeeRecommendAsync("RE6b33946d7add471dbd33f35347b5c06f", 3000)
.then(data => {
console.log(data);
});
결과 예시¶
{
"campaignKey": "RE0878d834239d4160b8d9fbac6e69617c",
"algorithmCd": "ST09",
"goodsList": [
{
"serviceKey": "21af7eb7cd8643a0ac599fd2ea1c9611",
"goodsNm": "자갸드 원피스",
"goodsCd": "49",
"goodsImg": "//shop3.grooshop.com/web/product/medium/202008/179f46dfad80fd80432fc283f8735e91.jpg",
"goodsCateNm": "",
"goodsCate": "",
"goodsPrc": 52800,
"goodsSalePrc": 47520,
"regDtm": [2020, 5, 21, 22, 16, 13, 232000000],
"moddDtm": [2020, 5, 21, 22, 16, 13, 232000000]
}
]
}
DI (노출)¶
실제 고객사에서 노출된 상품/기획전 정보를 Groobee로 보내 통계에 집계합니다.
- 함수명:
groobee.send - type:
"DI"(고정 값)
상품 노출¶
groobeeObj = {
algorithmCd: "알고리즘코드",
campaignKey: "추천캠페인키",
campaignTypeCd: "RE", // 고정
goods: [
{ goodsCd: "노출된 상품코드1" },
{ goodsCd: "노출된 상품코드2" }
]
};
groobee.send("DI", groobeeObj);
기획전 노출¶
groobeeObj = {
algorithmCd: "알고리즘코드",
campaignKey: "추천캠페인키",
campaignTypeCd: "RE", // 고정
goods: [
{ plan: ["노출된 기획전코드1", "노출된 기획전코드2"] }
]
};
groobee.send("DI", groobeeObj);
CL (클릭)¶
고객이 클릭한 상품/기획전 정보를 Groobee로 보내 통계에 집계합니다.
- 함수명:
groobee.send - type:
"CL"(고정 값)
상품 클릭¶
groobeeObj = {
algorithmCd: "알고리즘코드",
campaignKey: "추천캠페인키",
campaignTypeCd: "RE", // 고정
goods: [
{ goodsCd: "고객이 클릭한 상품코드1" }
]
};
groobee.send("CL", groobeeObj);
기획전 클릭¶
groobeeObj = {
algorithmCd: "알고리즘코드",
campaignKey: "추천캠페인키",
campaignTypeCd: "RE",
goods: [
{ plan: ["고객이 클릭한 기획전 코드1"] }
]
};
groobee.send("CL", groobeeObj);
작성 예시¶
아래는 작성 예시일 뿐 고객사 코드에 맞게 수정해 주세요. Groobee 스크립트가 정상적으로 로드되지 않으면 동작하지 않기 때문에 예시와 같이 setInterval 함수 사용을 권장드립니다.
function groobeeRecommendCall() { // 함수 존재 여부 체크 if (groobee && groobee.getGroobeeRecommendAsync) { groobee.getGroobeeRecommendAsync("RE6b33946d7add471dbd33f35347b5c06f") .then(data => { 고객사처리함수(data); }); } else { // 함수가 아직 준비되지 않은 경우 재시도 let tryCnt = 0; let _timer = setInterval(() => { if (tryCnt === 3) { clearInterval(_timer); $("#지정된ID").hide(); return; } tryCnt++; if (groobee.getGroobeeRecommendAsync && typeof groobee.getGroobeeRecommendAsync === "function") { groobee.getGroobeeRecommendAsync("RE6b33946d7add471dbd33f35347b5c06f") .then(data => { 고객사처리함수(data); }); clearInterval(_timer); } }, 500); } } function 고객사처리함수(data) { console.log("recommendData :::", data); if (data && data.goodsList) { // 고객사 추천상품 노출 및 데이터 처리 var html = "<ul>"; for (let i = 0; i < data.goodsList.length; i++) { html += `<li onClick=\"clickGroobeeProduct('${data.algorithmCd}', '${data.campaignKey}', '${data.goodsList[i].goodsCd}')\">${data.goodsList[i].goodsNm}</li>`; } html += "</ul>"; $("#지정된ID").append(html); $("#지정된ID").show(); // --------------groobee 노출(DI) 처리 START---------------- groobeeDisplayInsert(data.campaignKey, data.algorithmCd, data.goodsList); // --------------groobee 노출(DI) 처리 END------------------ } else { $("#지정된ID").hide(); } } function groobeeDisplayInsert(campaignKey, algorithmCd, goodsList) { if (!goodsList || goodsList.length === 0) return; // 기존 goodsList를 사용하거나, goodsCd만 가공해서 전달할 수 있습니다. // 1) var goods = goodsList; // 2) var goods = goodsList.map(item => ({ goodsCd: item.goodsCd })); var goods = goodsList; var groobeeObj = { algorithmCd: algorithmCd, campaignKey: campaignKey, campaignTypeCd: "RE", goods: goods }; groobee.send("DI", groobeeObj); } function clickGroobeeProduct(campaignKey, algorithmCd, goodsCd) { var groobeeObj = { algorithmCd: algorithmCd, campaignKey: campaignKey, campaignTypeCd: "RE", goods: [{ goodsCd: goodsCd }] }; groobee.send("CL", groobeeObj); // 고객사 페이지 이동 처리 // ... }