AI 상품 추천:스크립트형
1. 시스템 구조도
2. 개요
• 고객사에서 추천되는 상품을 제어 하거나 또는 추천 상품과 관련된 전시 영역의 디자인에 수정이 필요한 경우 스크립트 방식을 통해 사용 가능합니다.
• DIV형과는 다르게 디자인을 자유롭게 구성 가능합니다.
3. 연동 방식
• 그루비에서 추천 상품 전달 시 html 과 css 가 아닌 [추천 캠페인키], [선택된 알고리즘 코드], [추천 상품 목록]을 고객사 사이트 내의 특정 자바 스크립트 함수를 호출하는 방식으로 전달합니다.
function setGroobeeRecommend("캠페인키", "알고리즘 코드", "추천 상품 목록") {
...
}
• 고객사에서 작성하는 스크립트 함수는 그루비에서 전달된 [추천 캠페인키], [선택된 알고리즘 코드], [추천 상품 목록]을 활용하여 상품을 선별하고 원하는 위치에 노출할 수 있도록 작업되어야 합니다.
4. setGroobeeRecommend
• 그루비에서 정보 수집 후 필요한 정보가 전달되는 함수입니다.
• 정의
| 역할 | 그루비에서 정보 수집 후 필요한 정보가 전달되는 함수 | ||
| 함수명 | setGroobeeRecommend (고정 값이며 변경되면 안됨) | ||
| 파라미터 | algorithmCd | 알고리즘 코드 | string |
| campaignKey | 추천 캠페인키 | string | |
| goodsArray | 상품 목록 | Object[] | |
{goodsCd:"추천상품코드1"}, {goodsCd:＂추천상품코드2＂}, … ] |
|||
5. DI(노출)
• 실제 고객사에서 노출시킨 상품 / 기획전 정보를 그루비로 보내줍니다.
• 그루비로 노출시킨 상품 / 기획전 정보를 보내주면 통계에 집계되어 어드민에서 확인 가능합니다.
• 정의
| 역할 | 전시되는 상품을 그루비에서 노출 처리 | ||
| 함수명 | groobee.send | ||
| 파라미터 | type | 노출 코드("DI" 고정 값) | string |
| groobeeObj | 노출 관련 object | Object | |
groobeeObj = {
|
|||
| 역할 | 전시되는 기획전을 그루비에서 노출 처리 | ||
| 함수명 | groobee.send | ||
| 파라미터 | type | 노출 코드("DI" 고정 값) | string |
| groobeeObj | 노출 관련 object | Object | |
groobeeObj = {
|
|||
6. CL(클릭)
• 고객이 클릭한 상품 / 기획전 정보를 그루비로 보내줍니다.
• 고객이 클릭한 상품 / 기획전 정보를 그루비로 보내주면 통계에 집계되어 어드민에서 확인 가능합니다.
• 정의
| 역할 | 고객이 클릭한 상품을 그루비에서 클릭 처리 | ||
| 함수명 | groobee.send | ||
| 파라미터 | type | 노출 코드("CL" 고정 값) | string |
| groobeeObj | 노출 관련 object | Object | |
groobeeObj = {
|
|||
| 역할 | 고객이 클릭한 기획전을 그루비에서 클릭 처리 | ||
| 함수명 | groobee.send | ||
| 파라미터 | type | 노출 코드("CL" 고정 값) | string |
| groobeeObj | 노출 관련 object | Object | |
groobeeObj = {
|
|||
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....
}
