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"} ] }

6. CL(클릭)

---

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

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

• 정의

역할	고객이 클릭한 상품을 그루비에서 클릭 처리
함수명	groobee.send
파라미터	type	노출 코드("CL" 고정 값)	string
groobeeObj	노출 관련 object	Object
groobeeObj = { algorithmCd : "알고리즘코드", campaignKey : "추천캠페인키", campaignTypeCd : "RE", //고정 goods: [ {goodsCd: "노출된 상품코드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....
          }