한국어 한국어   Englilsh English
    Skip to end of metadata
    Go to start of metadata

    RecoPick 클라이언트 라이브러리는 웹 서비스를 운영하는 고객들이 쉽고 빠르게 RecoPick 서비스를 사용할 수 있도록 돕는 Javascript 라이브러리입니다.

    RecoPick 서비스는 사용자가 상품 페이지를 방문했을 때의 로그를 수집하여 추천 계산에 활용합니다. 

    클라이언트 라이브러리를 사용하면 RecoPick 서비스에서 바로 로그 수집이 가능하기 때문에, 고객사에서 서버 로그를 전송하는 등의 추가적인 부담이 전혀 없습니다. 

    뿐만 아니라 RecoPick 클라이언트 라이브러리 중 Widget API를 사용하시면 쉽게 추천을 적용할 수도 있습니다.

    클라이언트 라이브러리는 기존 고객 사이트 이용자들이 불편해하는 일이 없도록 사이트 로딩속도에 가능한 한 영향을 주지 않게(비동기 방식으로 처리함) 세심하게 설계되었습니다.

     

    목차


    라이브러리 로드하기

     

    Icon

    RecoPick 클라이언트 라이브러리를 사용하기 위해서는 먼저 아래 코드를 HTML 페이지의 </head> 태그 앞에 삽입해야 합니다. 아래 코드에 recoPick 함수를 추가하셔서 API들을 활용할 수 있습니다.

    각 API에 상세한 설명은 아래를 참고해주세요.

     

    에서 'SERVICE_NAME'은 사이트주소에 맞게 변경해주셔야 합니다.

    • 예를 들어, 쇼핑몰 주소가 www.example.com 일 경우 "www"를 제외한 recoPick('service', 'example.com')로 변경해주세요.
    • 이때, recoPick은 대소문자 구별을 꼭 해주셔야 합니다. (recopick이라고 쓰시면 안됩니다.)
    • 사이트 주소가 수정이 되어야, 데이터를 수집할 수 있습니다. 

    Logging API

    Logging API는 고객사의 사이트 방문객이 사이트에 접속하여 상품을 클릭하여 상세정보를 보았는지, 관심상품을 장바구니에 담았는지, 구매를 했는지, 혹은 아무런 행위도 하지 않고 메인페이지만 보고 사이트를 떠났는지 등의 활동들을 분석하여 로그를 수집하는 스크립트입니다.

    sendLog 함수를 통해 사용자 로그를 RecoPick 서비스에 전송할 수 있습니다. 사용법은 아래의 스크립트처럼 위의 기본 스크립트에 해당 API를 추가하시면 됩니다.

    ACTION_TYPE

    (Required)

    이 페이지의 용도를 입력해주시면 됩니다. 다음 ACTION_TYPE들이 지원됩니다.
    visitview/basket/order/search 이외의 페이지인 경우 사용하시면 됩니다.
    view상품 상세정보를 보는 등의 단순 조회의 경우 view를 사용하시면 됩니다.
    basket장바구니 페이지에 해당합니다. 이 값은 추천계산시 view보다 가치가 높습니다. 단, 장바구니 기능이 없는 경우 사용하지 않으셔도 됩니다.
    order구매 완료 페이지에 해당합니다. 추천계산시 view, basket보다 가치가 높습니다. 구매 로그를 보내주셔야 조금 더 정확한 추천 계산 및 성과 평가가 이루어지게 됩니다.
    search검색 페이지에서 사용자가 검색어를 입력한 경우, 사용하시면 됩니다. 이 데이터를 보내주시면, 개인화 추천의 품질이 더 올라가게 되며, 향후 검색어에 관련된 추천 서비스를 제공 받을 수 있습니다.

    ITEM_ID

    ACTION_TYPE이 view/basket/order인 경우 반드시 지정되어야 합니다.

    ACTION_TYPE이 search인 경우 검색어에 해당하는 값이 반드시 지정되어야 합니다.

    0개 또는 1개 이상의 ITEM_ID가 허용됩니다. 자체적으로 사용하시는 ITEM_ID를 적어주시면 됩니다. ITEM_ID는 문자열, 숫자, Object 모두 허용합니다.

    item_id는 URL 패턴을 통해 상품 상세 페이지에 접근할 수 있는 값으로 지정해주셔야 합니다.

    아래의 Example을 참고해주세요. 

    Example


    • 예를 들어, 사이트 방문객이 133번 상품 상세 보기 페이지를 방문 했을 경우 : 

    • 사이트 방문객이 133번 상품을 구매할 때 : 

    • 사이트 방문객이 133번 상품을 1개, 345번 상품을 2개 장바구니에 담았을 때:

    • 사이트 방문객이 133번 상품을 장바구니에 담았을 때 :

    • 사이트 방문객이 133번 상품을 1개, 345번 상품을 2개 구매할 때: 

    • 구매금액을 로그로 전송해주시면 추천 경유 매출 등의 통계를 보다 정확하게 제공해드립니다.
      사이트 방문객이 1000원짜리 133번 상품을 1개, 2000원짜리 345번 상품을 2개 구매할 때: (total_sales는 구매한 상품의 가격 X 갯수에 해당하는 금액을 입력해주세요.) 

    • 메인페이지나 상품 리스트페이지, 검색페이지와 같이 상품 ID가 존재하지 않는 페이지에 방문했을 경우 :

    • 여러 개의 상품을 한꺼 번에 넣을 때 (주문 페이지의 묶음배송같이 여러개의 상품에 대해 기술해야 할 때 효과적입니다.) :

    • 상품 ID뿐만 아니라 가격, 카테고리 등의 기타 정보를 추가도 가능합니다. (단, JavaScript object 형식을 사용할 때에는 id가 꼭 들어있어야 합니다.)

    • item_id는 문자열, 숫자 혹은 문자와 숫자 조합이 될 수 있습니다. 

    • count의 기본 값은 1입니다. 아래는 모두 같은 의미를 지닌 구문입니다.

    • 사이트 방문객이 "미니스커트"를 검색했을 때

    Widget API

    Widget API를 이용하시면 고객사의 상품 상세정보 페이지에 추천 결과를 원하는 영역에 쉽게 노출시킬 수 있습니다. 아래의 위젯 삽입 코드를 위젯을 노출하고자 하는 영역에 붙여 넣으시면 됩니다.

     

     

    • DOM_ID: 위젯을 렌더링할 HTML 요소의 id 값. 예를 들어 위 코드와 같이 div 태그의 id를 'recopick_widget'로 지정했으면 DOM_ID도 그와 같이 'recopick_widget'으로 지정하시면 됩니다.
    • ITEM_ID: 함께 본 상품, 함께 구매한 상품 등 특정 상품에 대한 추천 위젯을 제공하는 경우의 대상 상품ID 혹은 상품ID 배열. 지정되지 않거나 null로 지정되는 경우 로그 전송 시 지정한 상품ID를 통해 추천 위젯을 제공합니다. (예: "ITEM_ID1") (예2: ["ITEM_ID1", "ITEM_ID2"])
    • OPTIONS: 위젯 설정. JavaScript object 형식으로 지정하시면 되며, 지원되는 값은 위젯 설정에 대한 설명을 참고하세요.
    • CALLBACK: 위젯 렌더링이 완료된 후 호출되는 함수. 첫번째 인자로 렌더링된 위젯에 콘텐츠가 있는지 여부를 가리키는 Boolean값이 전달됩니다.

    Example

     

    기본 사용 예

     

    노출되는 위젯의 스타일을 직접 변경하시려면 RecoPick Admin Dashboard에 로그인 하신 후, "추천위젯 스타일 설정" 메뉴로 이동하시면 됩니다.

    "추천위젯 스타일 설정" 메뉴에서는 위젯을 가로형으로 제공할지 세로형으로 제공할지 및 테두리 표시 유무, 제목, 상품 제목, 가격 색 등 다양한 스타일 설정이 가능합니다.

    추천 대상 상품ID(item_id), 위젯의 가로 길이 및 스타일 설정에서 가능한 스타일은 위젯 표시를 위한 div 태그에 속성으로 지정하여 변경할 수도 있습니다. 

    div 태그에 지정가능한 속성 목록은 위젯 설정을 참고해주세요.

     

    CALLBACK 사용 예
    OPTIONS 사용 예

     

    위젯 설정

    widget_type

    추천 알고리즘의 종류. 기본값은 함께 본 상품(view_together)입니다.

    • 함께 본 상품: view_together
    • 함께 구매한 상품: buy_together
    • 가장 많이 본 상품: view
    • 추천클릭률Top: reco_click_rate
    • 구매전환율Top: purchase_rate
    • 추천유입률Top: reco_inflow_rate
    • 개인화 추천: user (개인화 추천의 이용을 위해서는 대시보드(admin.recopick.com)의 문의 기능을 통해 저희에게 연락을 부탁드립니다.)

    Example:

    예1: <div id="recopick_widget" data-widget_type="reco_click_rate"></div>
    예2: recoPick('widget', 'recopick_widget', null, {widget_type: 'purchase_rate'});
    예3: recoPick('widget', 'recopick_widget', null, {widget_type: 'user,purchase_rate'}); // 다중 알고리즘 노출 설정 (개인화 추천을 우선으로 노출하되, 결과가 없으면 구매전환율Top 결과를 노출)
    widget_id위젯의 스타일 ID. 지정하지 않을 경우 기본 스타일이 적용됩니다. 위젯의 스타일 ID는 어드민 대시보드의 "추천위젯 스타일 설정" 메뉴에서 확인하실 수 있습니다.

    Example:
    예1: <div id="recopick_widget" data-widget_id="gqieKeLe"></div>
    예2: recoPick('widget', 'recopick_widget', null, {widget_id: 'gqieKeLe'});
    item_id

    상품의 ID값. 카페24/고도몰/메이크샵 솔루션을 이용하시는 경우 자동으로 할당되므로 지정할 필요가 없습니다.

    recoPick('sendLog') 함수를 통해 특정 상품 ID를 지정하셨다면 data-item_id 속성을 지정하지 않았을 경우 recoPick('sendLog') 함수에서 지정한 상품 ID에 해당하는 추천 위젯이 제공됩니다.

    그 이외의 경우 사용자가 열람하는 상품의 ID값을 지정해주시면 됩니다.

    Example:

    예1: <div id="recopick_widget" data-item_id="SFSELFAA0078218"></div>
    예2: recoPick('widget', 'recopick_widget', 'SFFFEQ075923');
    width위젯의 가로 길이. (기본값: "100%") 
    정수로 입력할 경우 위젯의 가로 길이가 해당 픽셀로 지정됩니다. 

    Example:
    예1: <div id="recopick_widget" data-width="900"></div>
    예2: recoPick('widget', 'recopick_widget', null, {widget: 900});
    has_outline테두리 표시 여부. 1로 지정 시 위젯에 테두리 선을 표시합니다. 0으로 지정 시 표시하지 않습니다.

    Example:
    예1: <div id="recopick_widget" data-has_outline="1"></div>
    예2: recoPick('widget', 'recopick_widget', null, {has_outline: 1});
    title_type위젯 타이틀 종류. 이미지 혹은 텍스트로 지정할 수 있다.

    Example:
    예1: <div id="recopick_widget"
    data-title_type="text" data-title_text="아무개님을 위한 추천"></div>
    예2: recoPick('widget', 'recopick_widget', null, {title_type: "text", title_text: '아무개님을 위한 추천'});
    title_type1
    title_type2
    title_type3 
    widget_type 속성을 통해 다중 알고리즘 노출 설정을 하신 경우 각 알고리즘별 타이틀 종류를 지정할 수 있습니다.
    title_img위젯 타이틀 이미지. 이미지의 URL 경로로 지정 시 위젯에 해당 이미지가 타이틀로 사용됩니다.

    Example:
    예1: <div id="recopick_widget"
    data-title_img="http://api.recopick.com/widget_title/title_text1_03.png"></div>
    예2: recoPick('widget', 'recopick_widget', null, {title_img: "http://api.recopick.com/widget_title/title_text1_03.png"});
    title_img1
    title_img2
    title_img3 
    widget_type 속성을 통해 다중 알고리즘 노출 설정을 하신 경우 각 알고리즘별 타이틀 이미지를 지정할 수 있습니다.
    title_text위젯 타이틀 텍스트. 위젯 제목을 텍스트 지정한 경우 본 속성을 통해 위젯 제목을 변경할 수 있습니다.

    Example:
    예1: <div id="recopick_widget" data-title_text="홍길동님을 위한 추천"></div>
    예2: recoPick('widget', 'recopick_widget', null, {title_text: '아무개님을 위한 추천'});
    title_text1
    title_text2
    title_text3 
    widget_type 속성을 통해 다중 알고리즘 노출 설정을 하신 경우 각 알고리즘별 타이틀 텍스트를 지정할 수 있습니다.
    title_size위젯 타이틀 텍스트의 크기. 위젯 제목을 텍스트 지정한 경우 본 속성을 통해 위젯 제목의 텍스트 크기를 변경할 수 있습니다.

    Example:
    예1: <div id="recopick_widget" data-title_text="홍길동님을 위한 추천"></div>
    예2: recoPick('widget', 'recopick_widget', null, {title_text: '아무개님을 위한 추천', title_size: 15});
    title_size1
    title_size2
    title_size3 
    widget_type 속성을 통해 다중 알고리즘 노출 설정을 하신 경우 각 알고리즘별 타이틀 텍스트 크기를 지정할 수 있습니다.
    has_thumbnail 섬네일 표시 여부. 0으로 지정 시 섬네일 이미지를 표시하지 않습니다. 1로 지정 시 표시합니다.

    Example:
    예1: <div id="recopick_widget" data-has_thumbnail="0"></div>
    예2: recoPick('widget', 'recopick_widget', null, {has_thumbnail: 0});
    page_count

    추천 목록 페이지 수. 1로 지정 시 한 페이지가, 2 이상 지정 시 이전, 다음 버튼이 노출되며 해당 페이지 수만큼 추천 목록이 제공됩니다.

    추천 목록의 최대 갯수는 추천 환경 설정에서 지정한 최대 "추천 아이템 수"입니다.

    Example:

    예1: <div id="recopick_widget" data-page_count="3"></div>
    예2: recoPick('widget', 'recopick_widget', null, {page_count: 3});
    item_count추천 상품 수. 한 페이지에 표시할 추천 상품 수 입니다. 지정된 숫자만큼 상품 수가 표시됩니다.

    Example:
    예1: <div id="recopick_widget" data-item_count="4"></div>
    예2: recoPick('widget', 'recopick_widget', null, {item_count: 4});
    item_color추천 상품명 색상. 추천 상품명의 색상을 변경할 수 있습니다.

    Example:
    예1: <div id="recopick_widget" data-page_color="#55d"></div>
    예2: recoPick('widget', 'recopick_widget', null, {page_count: '#55d'});
    has_price

    추천 상품 가격 표시 여부. 1로 지정 시 추천 상품의 가격을 표시합니다. 0으로 지정 시 표시하지 않습니다.

    만약 가격이 0원으로 표시되는 경우에는 가격 메타정보를 삽입하여 가격 정보가 수집될 수 있도록 수정하시면 됩니다.

    Example:

    예1: <div id="recopick_widget" data-has_price="1"></div>
    예2: recoPick('widget', 'recopick_widget', null, {has_price: '1'});
    price_color추천 상품 가격 색상. 추천 상품 가격의 색상을 변경할 수 있습니다.

    Example:
    예1: <div id="recopick_widget" data-price_color="#595"></div>
    예2: recoPick('widget', 'recopick_widget', null, {price_color: '#595'});
    channel

    통계 구분을 위한 채널. 사이트에 여러 개의 위젯을 제공하시는 경우 채널명을 다르게 부여하여 위젯별로 각각 클릭률, 추천경유매출 등을 비교, 확인하실 수 있습니다.

    채널명은 임의로 지정하시면 됩니다.

    Tip) RecoPick 위젯을 메인 페이지에 하나, 상품 상세 페이지에 하나 이렇게 두 군데에 제공하신다면 채널명을 위젯의 위치에 맞게 메인은 "main", 상품 상세 페이지는 "view"와 같은 식으로 지정하시면 각 채널별 클릭률 등의 통계를 어드민 대시보드를 통해 확인하실 수 있습니다.


    Example:

    예1: <div id="recopick_widget" data-channel="ch01"></div>
    예2: recoPick('widget', 'recopick_widget', null, {channel: 'ch01'});
    random

    "함께 본 상품", "통계형 상품"의 경우, 추천대상이 고정으로 제공됩니다.

    shuffling된 데이터가 노출되기 원할경우 사용하시면 됩니다.

    Example:

    예1: <div id="recopick_widget" data-random="all"></div>
    예2: recoPick('widget', 'recopick_widget', null, {random: 'all'});
    • HTML 속성과 JavaScript OPTIONS에 같은 설정이 지정되는 경우 JavaScript OPTIONS에 지정된 값이 적용됩니다.

    한 페이지에 여러 위젯 노출하기

    RecoPick의 효과를 극대화하기 위해서, 혹은 한 페이지에 여러 상품을 노출하기 위해서 한 페이지에 여러 개의 RecoPick 추천 위젯을 제공할 수 있습니다.

    Widget API를 참고하여 스크립트를 작성하셨다면 아래와 같이 스크립트 한 줄을 추가하는 것만으로 추천 위젯을 추가로 노출할 수 있습니다.

     

    만약 HTML에 아래와 같이 추천 위젯을 위한 태그를 제공했다면...

    <!-- 상품 상세 정보 이전 -->
    <div id="
    recopick_widget"></div>
    <!-- ... 상품 상세 정보 영역 ... -->
    <!-- 상품 상세 정보 이후 -->
    <div id="recopick_widget2"></div>  

    상품 상세 정보의 이전과 이후에 추천 위젯이 노출됩니다.

     

    한 페이지에 여러 개의 상품의 위젯을 제공하는 경우라면

    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('sendLog', 'view', '123');
      recoPick('widget', 'recopick_widget');
      recoPick('widget', 'recopick_widget2');
    </script>

    <div id="recopick_widget" data-item_id="123"></div>
    <div id="recopick_widget2" data-item_id="124"></div>  

    위와 같이 HTML 태그를 제공한다면 "123"번 상품과 "124"번 상품의 추천 위젯이 노출됩니다.

    위의 코드는 다음과 같이 구현할 수도 있습니다.

    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('sendLog', 'view', '123');
      recoPick('widget', 'recopick_widget', '123');   // recopick_widget이라는 ID를 가진 요소에 ITEM_ID 123인 상품의 추천 위젯 노출
      recoPick('widget', 'recopick_widget2', '124');  // recopick_widget2라는 ID를 가진 요소에 ITEM_ID 124인 상품의 추천 위젯 노출
    </script>
     
    <div id="recopick_widget"></div>
    <div id="recopick_widget2"></div>  

    개인화 추천, 통계형 추천 등 추천 알고리즘별 위젯 노출

    RecoPick에서는 함께 본 상품을 통한 추천 제공 이외에 개인의 성향을 분석한 개인화 추천, 상품별 조회수/클릭률/구매전환율 등을 기준으로 인기 상품을 추천하는 통계형 추천 등 다양한 알고리즘별 추천을 제공합니다. 각 알고리즘별 추천은 다음과 같은 방식으로 추천 위젯을 제공할 HTML 태그에 data-widget_type 속성을 지정하여 노출하실 수 있습니다.

    함께 본 상품 (기본값, 생략가능)

    대시보드에서 임의의 상품에 대한 추천 목록 확인하기: https://admin.recopick.com/-/rand 

    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_view'); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_view" data-widget_type="view_together"></div>

     

    함께 구매한 상품

    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_buy'); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_buy" data-widget_type="buy_together"></div>

    개인화 추천

    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_user'); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_user" data-widget_type="user"></div>

    통계형 추천 - 클릭률

    통계형 추천 데이터 중 클릭률/구매전환율/추천유입률은 함께 본 상품을 통한 위젯이 노출된 후 하루 이틀 후 클릭률/구매전환율 등이 계산된 후 제공됩니다.

    대시보드에서 클릭률 Top 100 확인하기: https://admin.recopick.com/-/item/top100/ctr

    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_click'); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_click" data-widget_type="reco_click_rate"></div>

    통계형 추천 - 구매전환율

    통계형 추천 데이터 중 클릭률/구매전환율/추천유입률은 함께 본 상품을 통한 위젯이 노출된 후 하루 이틀 후 클릭률/구매전환율 등이 계산된 후 제공됩니다.

    대시보드에서 클릭률 Top 100 확인하기: https://admin.recopick.com/-/item/top100/purchase_rate

    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_purchase'); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_purchase" data-widget_type="purchase_rate"></div>

    통계형 추천 - 추천유입률

    통계형 추천 데이터 중 클릭률/구매전환율/추천유입률은 함께 본 상품을 통한 위젯이 노출된 후 하루 이틀 후 클릭률/구매전환율 등이 계산된 후 제공됩니다.

    대시보드에서 클릭률 Top 100 확인하기: https://admin.recopick.com/-/item/top100/item_inflow 

    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_inflow'); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_inflow" data-widget_type="reco_inflow_rate"></div>

    통계형 추천 - 가장 많이 본 상품

    대시보드에서 가장 많이 본 상품 확인하기: https://admin.recopick.com/-/items 

    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_view'); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_view" data-widget_type="view"></div>

    추천 결과가 없을 때 다른 추천 알고리즘을 사용하기

    특정 추천 알고리즘(widget_type)으로 위젯을 노출하였으나 해당 알고리즘이 빈 결과를 반환하는 경우 위젯도 노출되지 않습니다. 이렇게 빈 결과를 반환하는 경우 다중 알고리즘 설정을 통해 다른 알고리즘의 추천 결과로 대체할 수 있습니다.

    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_multi'); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_multi" data-widget_type="user,view"></div> <!-- 개인화 추천(user)을 먼저 요청하고 빈 결과가 반환되면 가장 많이 본 상품(view) 위젯을 노출 -->

     

    위의 코드는 아래와 같이 recoPick('widget') 함수의 인자로도 동일하게 구현할 수 있습니다.
    <!-- 아래 코드는 SERVICE_NAME을 운영하시는 서비스의 URL에 맞게 recopick.com과 같이 변경하신 후 </head> 직전에 삽입해주세요 -->
    <script type="text/javascript">
      (function(w,d,n,s,e,o) {
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
        e=d.createElement(s);e.async=1;e.charset='utf-8';e.src='//static.recopick.com/dist/production.min.js';
        o=d.getElementsByTagName(s)[0];o.parentNode.insertBefore(e,o);
      })(window, document, 'recoPick', 'script');
      recoPick('service', 'SERVICE_NAME');
      recoPick('widget', 'recopick_widget_multi', null, {widget_type: ['user', 'view']}); // 로그 수집, 다른 추천 제공 등을 위해 위 코드를 이미 삽입하신 경우 이 줄만 넣어주세요!
    </script>

     

    <!-- 아래 코드는 위젯을 노출할 영역에 삽입해주세요. -->
    <div id="recopick_widget_multi"></div>

    AB test API

    AB test API를 이용하시면 운영하시는 상품 상세정보 페이지에 여러 조건의 추천 위젯을 통해 A/B 테스트를 간단히 수행할 수 있습니다.

    A/B 테스트 적용

    A/B 테스트를 위해 먼저 필요한 것은 어떤 조건으로 테스트를 진행할지를 지정하는 것입니다.

     

    1. 테스트명: 이 테스트의 이름입니다. 적절히 작성하시면 테스트 중 혹은 테스트 후 결과를 확인하실 때 입력하신 테스트명으로 표시되어 편리합니다.
    2. 테스트 시작일/종료일: 테스트를 특정 기간동안에만 수행하려고 하신다면 시작일과 종료일을 입력해주세요. 지정 안함을 선택하시면 기간과 상관없이 테스트가 진행됩니다.
    3. 위젯: 해당 그룹에게 노출될 위젯입니다. 위젯은 추천 위젯 설정 페이지( https://admin.recopick.com/-/widget )에서 추가/수정하실 수 있습니다.
    4. 채널명: 해당 그룹의 테스트 결과를 통계로 제공해드리는 식별자입니다. 채널명을 "test"라고 입력하시면 클릭률, 경유매출 등의 통계를 "abtest_test"라는 채널명으로 제공해드립니다.
    5. 노출설정: 전체 사용자를 10개의 그룹으로 나누어 각 그룹별로 노출할 위젯을 선택합니다. 그룹1과 그룹2를 5:5로 테스트 하시려면 그룹0~4는 그룹1, 5~9는 그룹2에 체크해주시면 됩니다.
    6. 그룹 추가 버튼을 통해 3개 이상의 그룹(최대 5개)으로 테스트 설정이 가능합니다.

    • 테스트 조건 입력이 끝난 후 저장하시면 "코드 가져오기" 메뉴가 생성됩니다. "코드 가져오기" 메뉴를 클릭하면 아래와 같이 위젯을 표시할 영역에 붙여넣을 수 있는 HTML 코드가 표시됩니다. 코드를 복사 후 위젯을 표시할 영역에 붙여넣으시면 됩니다.

      

    A/B 테스트 결과 확인

    A/B 테스트 적용 다음날부터 대시보드를 통해 A/B 테스트의 결과를 확인하실 수 있습니다.

    1. 통계의 사용자 기준입니다. 전체사용자의 데이터를 볼지, 구매자의 데이터를 볼지, 추천 클릭 사용자의 데이터를 볼지 선택합니다.
    2. 각 사용자 기준의 상세 데이터입니다. (1)에서 추천 클릭 사용자, (2)에서 그룹별 평균 매출을 선택했다면 각 그룹의 추천 클릭 사용자에 대한 평균 매출 데이터가 표시됩니다.
    3. 기준 A/B 테스트입니다. "A/B 테스트 적용" 단계에서 테스트 조건을 입력하셨을 때의 각 그룹별로 데이터가 제공됩니다.
      가령, 선택한 기준 A/B 테스트에 테스트그룹0은 사용자그룹0~8까지, 테스트그룹1은 사용자그룹9가 지정되어 있었다면 테스트그룹0의 데이터는 그룹0~8의 평균, 테스트그룹1의 데이터는 그룹9의 데이터가 됩니다.
    4.  "사용자 그룹별" 탭을 선택하면 사용자그룹0~9까지 각 그룹의 데이터를 모두 확인하실 수 있습니다.

     

     


    User Identification API


    RecoPick 클라이언트 라이브러리는 쿠키에 기반한 자체적인 사용자 키(이하 UID)를 통한 분류 기능을 제공하고 있습니다. 만약 자체적으로 관리하시는 사용자 키가 있고 RecoPick에서도 그 키를 사용하고 싶다면 본 단락을 참고하여 UID를 지정해주시기 바랍니다.

    (  (warning) 잠깐! 이 API는 UID를 꼭 수정하고 싶으신 분들을 위한 API로써 가급적이면 사용하지 않는 것을 권장합니다. )


    RecoPick의 UID를 통한 사용자별 구분은 한 사용자가 여러 페이지를 방문했을 때, 이 사용자가 방문한 페이지들을 추적할 수 있으며 이를 기반으로 고품질의 추천을 계산할 수 있게 합니다.



    setUID

    RecoPick에서 만드는 쿠키 기반 사용자 ID를 사용하지 않고 자체적인  ID를 사용하고자 한다면 아래와 같이 setUID 함수를 사용할 수 있습니다.

    (예: 브라우저 쿠키 기반 사용자 식별값, 쿠키를 사용할 수 없는 모바일 네이티브 앱의 사용자 식별값)

    *Native(Hybrid)App에서 setUID 시에  GAID값과 IDFA값을 반드시 넣으셔야 합니다.

    *Native(Hybrid)App에서 sendLog 시에 setGAID 혹은 set IDFA값을 반드시 삽입하셔야 합니다.

    fetchUID

    UID를 얻어올 수 있는 함수입니다. setUID를 통해 UID를 지정했다면 그 값이, 그렇지 않은 경우 RecoPick에서 생성하는 사용자 식별값이 반환됩니다.

    비동기로 동작하는 함수이며, 구현 방법은 아래 예제를 참고해주시기 바랍니다.

    RecoPick에서 생성하는 사용자 식별값은 개발의 편의성을 위해 운영하시는 사이트에 recopick_uid라는 이름의 쿠키로도 남기고 있습니다.
    만약 서버사이드에서 로그 전송 혹은 추천 API 호출을 하시는 경우 recopick_uid라는 쿠키가 있다면 그 쿠키를 이용하여 uid 값을 지정해주시면 됩니다.

     

    php 예제

     

    setMID

    자체적으로 관리하는 회원과 RecoPick의 UID를 매핑하려면 setMID를 통해 사용자의 아이디 값을 지정할 수 있습니다.
    예를 들어 같은 회원이 PC와 모바일을 통해 접속한다면 UID는 각각 다른 값이 되어 다른 사용자로 인식되지만 MID를 통해 매핑하면 RecoPick에서도 두 사용자를 같은 회원으로 인식하여 개인화 추천 등의 품질 향상에 도움이 됩니다.
    MID를 지정한 후 Logging API를 통해 로그를 전송하면 개인화 추천 API를 통해 특정 회원의 추천 상품을 요청할 수 있게 되어 이메일 마케팅 등에 활용할 수 있습니다.

    (warning) 개인정보보호를 위해 회원의 아이디를 암호화하여 보내주시기 바랍니다. (암호화시 특수문자 제거 필요)

     

     

    (warning) setMID 호출은 sendLog 이전에 호출 하셔야 적용이 됩니다.

    setUserInfo

    사용자의 성별, 연령 등의 데이터를 전송해주시면 각 사용자에게 더욱 특화된 추천을 제공해 드립니다.

    아래는 setUserInfo 함수에 지정할 수 있는 속성입니다. 한 가지 이상 지정해주시면 됩니다.
    birthyear

    출생연도 (반드시 4자리로 세팅)

    예: 1987

    gender

    성별 (M: 남자, F: 여자, O: 기타)

    예: F

    mid

    자체적으로 사용하시는 회원ID

    (setMID 함수와 같은 역할을 합니다.)

    uid

    RecoPick에서 만드는 쿠키 기반 사용자 ID를 사용하지 않고 자체적인 ID를 사용하고자 하시는 경우

    (setUID 함수와 같은 역할을 합니다.)

    (warning) setUserInfo 호출은 sendLog 이전에 호출 하셔야 적용이 됩니다.

    Device Identification API

    플랫폼에서 제공하는 Device의 고유 식별 값을 지정하기 위한 API입니다. Android에서는 GAID(Google Advertising Identifier) 또는 AAID(Android Advertising Identifier)라는 이름으로 제공되고, IOS는 IDFA(Identifier For Advertising) 또는 IFA 라는 이름으로 제공 합니다.

    *Native(Hybrid) App에서 sendLog 전에  반드시 setGAID  혹은 setIDFA를 설정하셔야합니다.

    setGAID

    Android 에서 제공하는 GAID(Google Advertising ID) 또는 AAID(Android Advertising Identifier) 값을 지정하기 위한 API 입니다. 

    (info) Reference

     

    (warning) setGAID 호출은 sendLog 이전에 호출 하셔야 적용이 됩니다.

    setIDFA

    IOS에서 제공하는 IDFA(Identifier For Advertising) 또는 IFA 값을 지정하기 위한 API 입니다. 

    (info) Reference

    (warning) setIDFA 호출은 sendLog 이전에 호출 하셔야 적용이 됩니다.

    Advanced Usage Example

    onclick 등의 이벤트에 recoPick 함수를 붙여서 클릭 로그를 추가할 수 있습니다. 페이지 전환 없이 ajax 호출로 컨텐츠를 불러오는 경우 유용하게 활용할 수 있습니다.

    <a href="#some_item_detail" onclick="recoPick('view', '...')">Some link</a>
    



     

    • No labels