AI 상품 추천: 스크립트형
1. 시스템 구조도
2. 개요
고객사에서 추천되는 상품을 제어 하거나 또는 추천 상품과 관련된 전시 영역의 디자인에 수정이 필요한 경우 스크립트 방식을 통해 사용 가능합니다.
DIV형과는 다르게 디자인을 자유롭게 구성 가능합니다.
3. 연동 방식
그루비에서 추천 상품 전달 시 html 과 css 가 아닌 [추천 캠페인키], [선택된 알고리즘 코드], [추천 상품 목록]을 고객사 사이트 내의 특정 자바 스크립트 함수를 호출하는 방식으로 전달합니다.
function setGroobeeRecommend("캠페인키", "알고리즘 코드", "추천 상품 목록") {
...
} 고객사에서 작성하는 스크립트 함수는 그루비에서 전달된 [추천 캠페인키], [선택된 알고리즘 코드], [추천 상품 목록]을 활용하여 상품을 선별하고 원하는 위치에 노출할 수 있도록 작업되어야 합니다.
4. setGroobeeRecommend
그루비에서 정보 수집 후 필요한 정보가 전달되는 함수입니다.
정의
역할: 그루비에서 정보 수집 후 필요한 정보가 전달되는 함수
함수명: setGroobeeRecommend (고정 값이며 변경되면 안됨)
파라미터
algorithmCd
알고리즘 코드
string
campaignKey
추천 캠페인키
string
goodsArray
상품 목록
Object[]
- goodsArray에는 상품코드 정보만 내려 보내줍니다.
- goodsArray에 담겨오는 정보
goodsArray = [
{goodsCd:"추천상품코드1"},
{goodsCd:＂추천상품코드2＂},
…
]5. DI(노출)
실제 고객사에서 노출시킨 상품 / 기획전 정보를 그루비로 보내줍니다.
그루비로 노출시킨 상품 / 기획전 정보를 보내주면 통계에 집계되어 어드민에서 확인 가능합니다.
정의
역할: 전시되는 상품을 그루비에서 노출 처리
함수명: groobee.send
파라미터
type
노출 코드("DI" 고정 값)
string
groobeeObj
노출 관련 object
Object
groobeeObj = {
algorithmCd : "알고리즘코드",
campaignKey : "추천캠페인키",
campaignTypeCd : "RE", //고정
goods: [
{goodsCd: "노출된 상품코드1"},
{goodsCd: "노출된 상품코드2"}
]
}정의
역할: 전시되는 기획전을 그루비에서 노출 처리
함수명: groobee.send
파라미터
type
노출 코드("DI" 고정 값)
string
groobeeObj
노출 관련 object
Object
groobeeObj = {
algorithmCd : "알고리즘코드",
campaignKey : "추천캠페인키",
campaignTypeCd : "RE",
goods: [
{plan: ["노출된 기획전코드1", “노출된 기획전코드2”]}
]
}6. CL(클릭)
고객이 클릭한 상품 / 기획전 정보를 그루비로 보내줍니다.
고객이 클릭한 상품 / 기획전 정보를 그루비로 보내주면 통계에 집계되어 어드민에서 확인 가능합니다.
정의
역할: 고객이 클릭한 상품을 그루비에서 클릭 처리
함수명: groobee.send
파라미터
type
노출 코드("CL" 고정 값)
string
groobeeObj
노출 관련 object
Object
groobeeObj = {
algorithmCd : "알고리즘코드",
campaignKey : "추천캠페인키",
campaignTypeCd : "RE", //고정
goods: [
{goodsCd: "고객이 클릭한 상품코드1"}
]
}정의
역할: 고객이 클릭한 기획전을 그루비에서 클릭 처리
함수명: groobee.send
파라미터
type
노출 코드("CL" 고정 값)
string
groobeeObj
노출 관련 object
Object
groobeeObj = {
algorithmCd : "알고리즘코드",
campaignKey : "추천캠페인키",
campaignTypeCd : "RE",
goods: [
{plan: ["고객이 클릭한 기획전코드1"]}
]
}7. 작성 예시
코드 작성 예시를 보여줍니다.
function setGroobeeRecommend (algorithmCd, campaignKey, goodsArray){
// code here.
console.log(algorithmCd, ':::', campaignKey, ':::', goodsArray)
if (goodsArray && goodsArray.length > 0) {
//상품정보가 있을 경우 상품코드로 정렬 및 보여줄 부분에 대하여 처리를 진행
//예시를 위해 범용적인 ajax로 예시를 사용
//임시로 작성한 코드이기에 고객사에 맞도록 알아서 작성할 것
$.ajax({
type: '고객사 상품코드로 정보 가져올 통신 타입',
url : '고객사 상품코드로 정보 가져올 통신 URL',
...
data : JSON.stringify({
goods: goodsArray
}),
success : function(result) {
/*
추천 상품 선별 및 노출작업
각 상품 클릭 시 이벤트 연결처리도 필요 아래 clickGroobeeProduct(함수명은 자유)
예시일 뿐 고객사에 맞춰서 코드는 새로 작성할 것
*/
var html = "<ul>";
for (let i = 0; i < result.length; i++) {
html += `<li onClick="clickGroobeeProduct(${algorithmCd}, ${campaignKey}, ${result[i].goodsCd})">${result[i].goodsNm}</li>`;
}
html += "</ul>";
$('#지정된ID').append(html);
$('#지정된ID').show();
----------------그루비 노출 START------------------
//var goods = ['선별 및 가공된 goods상품정보코드값 array'];
var goods = result;
var groobeeObj = {
algorithmCd : algorithmCd,
campaignKey : campaignKey,
campaignTypeCd : "RE",
goods: goods
};
//마지막에 노출처리
groobee.send('DI', groobeeObj);
----------------그루비 노출 END------------------
},
error : function(result, status, error) {
console.log(error);
}
})
} else {
//상품정보가 없을 때 당사에서 보여줄 부분을 숨김처리해줘야함
$('#지정된ID').hide();
}
....
}
//추천 상품 클릭 시 호출해야하는 함수 (함수명 자유)
function clickGroobeeProduct (algorithmCd, campaignKey, goodsCd) {
//추천 클릭처리
var groobeeObj = {
algorithmCd: algorithmCd,
campaignKey: campaignKey,
campaignTypeCd: "RE" //고정
goods: [
{goodsCd: goodsCd}
]
}
groobee.send('CL', groobeeObj);
//고객사 페이지 이동처리
code....
}
Last updated