AI 상품 추천:데이터호출형_모든페이지(성별/나이)

1. 시스템 구조도

---

2. 개요

• 스크립트 LOAD 완료된 후 원하는 시점에 추천 상품 목록을 가져와서 사용할 수 있습니다.

• DIV형과는 다르게 디자인을 자유롭게 구성 가능합니다.

---

3. 연동 방식

• 고객사에서 그루비에서 추천 상품 요청 시 데이터를 바로 전달합니다.

groobee.getGroobeeKeyBaseRecommendAsync("캠페인키", "추천타입", "타입에따른 기준값", 타임아웃) 
                    .then( data =>  { console.log(data); } );    

• 비동기식이라 요청이 느려졌을 경우 html에 추천 리스트를 표현하지 못하는 경우가 존재합니다.

이 문제를 방지하려면 아래 사항을 확인해 주세요.

1. 스크립트 로드 완료 후 호출 추천 API는 그루비 스크립트가 완전히 로드된 이후에 호출해야 합니다. 스크립트 로드 전에 호출할 경우 추천 결과가 정상적으로 렌더링되지 않을 수 있습니다.

2. 타임아웃 설정 조정 네트워크 환경에 따라 응답이 지연될 수 있습니다. 응답 실패가 자주 발생하는 경우, 타임아웃 값을 늘려 충분한 응답 대기 시간을 확보하는 것을 권장합니다.

3. 추천 실패 시 재시도 로직 구현 (고객사 직접 구현) 타임아웃 또는 네트워크 오류로 추천 요청이 실패한 경우, 그루비는 자동 재시도를 제공하지 않습니다. 실패 시 재시도 로직은 고객사 측에서 직접 구현해 주시기 바랍니다. 예) 일정 횟수만큼 재요청하거나, 실패 시 기본 상품 리스트로 대체 노출

---

4. 어드민 설정

키(Key) 기반 추천 상품 조회를 사용할 경우 새로운 AI 추천 생성 시 무조건 모든페이지(데이터호출형)을 사용해야만 합니다.

모든 페이지(데이터 호출형)을 선택 후 나오는 추천 유형은 getGroobeeKeyBaseRecommendAsync에서 사용할 추천 종류(recommendBaseType)와 똑같이 맞춰주셔야 합니다.

---

5. 키(Key) 기반 추천 상품 조회(getGroobeeKeyBaseRecommendAsync)

• 고객사에서 추천 상품 요청 시 전달해주는 함수입니다.

• 정의

  • 역할: 추천 상품 조회

  • 함수명: groobee.getGroobeeKeyBaseRecommendAsync

  • 파라미터

campaignKey	캠페인키	string
recommendBaseType	추천 종류(대문자)	string
recommendValue	추천 검색 값	string, object
	recommendBaseType 종류 • CATEGORY (string) • GOODS (string) • KEYWORD (string) • MEMBER_DATA (object)	recommendBaseType에 따른 recommendValue • CATEGORY : 카테고리 코드 • GOODS : 상품코드 • KEYWORD : 검색어 • MEMBER_DATA { genderCode: "성별코드", ageCode: "나이코드" }

작성 예

groobee.getGroobeeKeyBaseRecommendAsync("RE6b33946d7add471dbd33f35347b5c06f",
    “CATEGORY“, “카테고리코드“, 500).then(
            data =>  { console.log(data); }
);
 
groobee.getGroobeeKeyBaseRecommendAsync("RE6b33946d7add471dbd33f35347b5c06f",
    “GOODS“, “상품코드“, 500).then(
            data =>  { console.log(data); }
);
 
groobee.getGroobeeKeyBaseRecommendAsync("RE6b33946d7add471dbd33f35347b5c06f",
     “KEYWORD“, “검색어“, 500).then(
            data => { console.log(data); } 
);

groobee.getGroobeeKeyBaseRecommendAsync("RE6b33946d7add471dbd33f35347b5c06f",
     “MEMBER_DATA“, {genderCode: "성별", ageCode: "나이"}, 500).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],
        },
        ...
    ]
}

recommendType 이 MEMBER_DATA 일 경우 참고사항

• MEMBER_DATA의 경우 object 형태로 전달해야 하며, string 형태로 전달 시 정상 동작하지 않을 수 있습니다.

• MEMBER_DATA의 값은 어드민 설정의 회원정보로 등록한 값과 일치해야 합니다.

• 전체를 원할 경우

  • 성별 전체 → genderCode: “ALL“

  • 나이 전체 → ageCode: “ALL“

---

6. DI(노출)

• 실제 고객사에서 노출시킨 상품 정보를 그루비로 보내줍니다.

• 그루비로 노출시킨 상품 정보를 보내주면 통계에 집계되어 어드민에서 확인 가능합니다.

• 정의

  • 역할: 전시되는 상품을 그루비에서 노출 처리

  • 함수명: groobee.send

  • 파라미터

type	노출 코드("DI" 고정 값)	string
groobeeObj	노출 관련 object	Object

groobeeObj = {
   algorithmCd : "알고리즘코드",
   campaignKey : "추천캠페인키",
   campaignTypeCd : "RE", //고정
   goods: [
      {goodsCd: "노출된 상품코드1"},
      {goodsCd: "노출된 상품코드2"}
      ]
}

---

7. CL(클릭)

• 고객이 클릭한 상품 정보를 그루비로 보내줍니다.

• 고객이 클릭한 상품 정보를 그루비로 보내주면 통계에 집계되어 어드민에서 확인 가능합니다.

• 정의

  • 역할: 고객이 클릭한 상품을 그루비에서 클릭 처리

  • 함수명: groobee.send

  • 파라미터

type	노출 코드("CL" 고정 값)	string
groobeeObj	노출 관련 object	Object

groobeeObj = {
   algorithmCd : "알고리즘코드",
   campaignKey : "추천캠페인키",
   campaignTypeCd : "RE", //고정
   goods: [
        {goodsCd: "고객이 클릭한 상품코드1"}
        ]
}

---

8. 사용 가능 알고리즘 정의

• 사용 가능한 알고리즘을 확인합니다.

RecommendBaseType	Algorithm
CATEGORY(카테고리 기반)	1. 카테고리 TOP N 2. 실시간 카테고리 TOP N 3. 연관 카테고리 상품
GOODS(상품 기반)	1. 함께 본 상품 2. 함께 구매한 상품 3. 함께 담은 상품 4. 구매 패턴 유사 상품 5. 상품명 기반 유사 상품 6. 딥러닝 기반 유사 상품 7. 연관 카테고리 상품 8. 이미지 기반 유사 상품 9. 딥러닝 기반 다음에 볼 상품
KEYWORD(검색어 기반)	1. 검색어 추천

---

9. 작성 예시

코드 작성 예시를 보여줍니다.

//작성 예시일 뿐 고객사의 코드에 맞게 수정해주시면 됩니다.
//아래 코드가 정답이 아닙니다. 참고만 부탁드립니다.
function groobeeRecommendCall () {
  //함수가 존재하는지 체크
  if (groobee && groobee.getGroobeeKeyBaseRecommendAsync) {
    //groobee.getGroobeeKeyBaseRecommendAsync 함수를 정상적으로 호출이 될 경우
    //1. 상품,키워드,카테고리일 경우 / 현재 예시는 상품일 경우
    groobee.getGroobeeKeyBaseRecommendAsync('RE6b33946d7add471dbd33f35347b5c06f','GOODS', '123456', 500)
      .then(data => {
        고객사처리함수(data);
      })
    //2. 범주형일 경우
    groobee.getGroobeeKeyBaseRecommendAsync('RE6b33946d7add471dbd33f35347b5c06f','MEMBER_DATA', {genderCode: 'ALL', ageCode: 'ALL'}, 500)
      .then(data => {
        고객사처리함수(data);
      })
  }  else {
    //groobee.getGroobeeKeyBaseRecommendAsync 함수가 정상적으로 호출이 되지 않을 경우
    let tryCnt = 0;
    let _timer = setInterval(()=> {
      // 3회 넘어갈시 중지
      if(tryCnt==3){
          clearInterval(_timer);
          $('#지정된ID').hide();
          return;
      }
      tryCnt++;
      // function 존재시에만 실행
      if(groobee.getGroobeeKeyBaseRecommendAsync && typeof groobee.getGroobeeKeyBaseRecommendAsync == 'function')
 {
          groobee.getGroobeeKeyBaseRecommendAsync('RE6b33946d7add471dbd33f35347b5c06f')
            .then(data => {
              고객사처리함수(data);
            })
          clearInterval(_timer);
      }}, 500);
  }
}
function 고객사처리함수(data) {
  console.log('recommendData :::', data);
  if (data && data.goodsList) {
    //고객사 추천상품 노출 및 데이터처리
    ...code 
    /*
      추천 상품 선별 및 노출작업
      각 상품 클릭 시 이벤트 연결처리도 필요 아래 clickGroobeeProduct(함수명은 자유)
      예시일 뿐 고객사에 맞춰서 코드는 새로 작성할 것
    */
    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(type, campignKey, algorithmCd, goodsList) {
  //상품목록이 존재하는지 체크
  if (!goodsList || goodsList.length == 0) return;
  //이전에 goodsCd만 가공해서 보냈다면 1번 방식을 그게 아니라면 2번 방식을 채택하시면됩니다.
  1. var goods = goodsList;
  2. var goods = [];
    for (var i = 0; i < goodsList.length; i++) {
      var newObj = {goodsCd: goodsList[i].goodsCd};
      goods.push(newObj);
    } 
  var groobeeObj = {
    algorithmCd: algorithmCd, //알고리즘코드 (추천받을때 받은 algorithmCd)
    campaignKey: campaignKey, //캠페인키
    campaignTypeCd: 'RE',     //고정값
    goods: goods
  }
  groobee.send('DI', groobeeObj);
}
function clickGroobeeProduct(algorithmCd, campaignKey, goodsCd) {
  //추천 클릭처리
  var groobeeObj = {
    algorithmCd: algorithmCd, //알고리즘코드 (추천받을때 받은 algorithmCd)
    campaignKey: campaignKey, //캠페인키
    campaignTypeCd: 'RE',     //고정값
    goods: [
      {goodsCd: goodsCd}
    ]
  }
  groobee.send('CL', groobeeObj);
  //고객사 페이지 이동처리
  code....
}