AI 상품 추천:스크립트형

Updated by Oh


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....
}


How did we do?