한국어 한국어   Englilsh English

.

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Note
title본 가이드는 카페24에 해당하는 내용입니다.


 

Table of Contents

<1단계> 레코픽 로그수집 스크립트 삽입

...

  1. 카페24 쇼핑몰 관리자 페이지에 로그인한 후 '디자인관리' > '디자인 수정하기'를 선택하여 스마트 디자인 편집창을 엽니다.

     


  2. 전체화면보기 탭에서 '레이아웃' > '기본 레이아웃' > '공통 레이아웃'을 선택한후 <head> … </head> 태그 사이에 아래 로그수집 스크립트를 복사 후 삽입하세요. 스크립트 관리가 용이하도록 </head> 태그 바로 앞에 넣기를 권장합니다.

     


    Panel
    borderColor#007eff
    bgColor#ffffff
    titleColor#ffffff
    titleBGColor#007eff
    languageactionscript3
    themeConfluence
    languageborderStyleactionscript3solid
    title기본 로그수집 스크립트
    borderStylesolid
    linenumberstrue


    Code Block
    languagecoldfusion
    themeMidnightlanguagecoldfusion
    <!--RecoPick 로그수집 스크립트 -->
    <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', '사이트 url');
       recoPick('sendLog', 'cafe24');
    </script>
    <!--RecoPick 로그수집 스크립트 -->


    (warning) 주의하세요! '사이트 url' 은 www를 제외한 사이트 주소로 수정합니다. 반드시 대소문자 구별을 꼭 해주셔야 합니다.

     

  3. 공통 헤더용 로그수집 스크립트 삽입후 더욱 특화된 개인화 추천을 원하시면 암호화된 ID, 연령, 성별 데이터를 보내주세요! 

    (’service’, ‘ 사이트 url’); 바로 다음에 아래 스크립트를 삽입해 주시면 됩니다. 출생년도, 성별은 예시 참고하셔서 변경해 주시고 MEMBER_ID(MID)는 자체적으로 사용중인 회원 ID를 암호화해서 보내주세요.

    * 레코픽에서 수집하는 암호화된 ID, 연령, 성별 데이터로는 절대 개개인을 식별할 수 없으며, 단순히 사용자를 구분하기 위한 용도로만 사용됩니다.
      예를 들어, 같은 회원이 PC와 모바일을 통해 접속한다면 MID를 통해  매핑하면 RecoPick에서도 두 사용자를 같은 회원으로 인식하여 개인화 추천 등의 품질 향상에 도움이 됩니다.

    (warning) 주의하세요! 레코픽 추천을 API 방식으로 사용하는 경우, GET방식으로 API를 호출하게 됩니다.
      이 경우 일부 API의 파라미터에 MID가 사용되는데, MID 값에 일부 특수문자(예> &, =) 가 들어가게 되면 정상동작 하지 않을 수 있습니다.
      암호화된 결과에 특수문자가 들어가지 않는 암호화 알고리즘으로 단방향 암호화 해주세요. (예> SHA-256, MD5 등)

    * MID 단방향 암호화 예 : 88020d58ceb8a4ad7f6756021fbc06b8a91f17daad2f04a5d369608d9c308bde (SHA-256으로 암호화), 4509bf9373ff3dca193ba02726c87988 (MD5로 암호화)

    Panel
    borderColor#007eff
    bgColor#ffffff
    titleColor#ffffff
    titleBGColor#007eff
    languageactionscript3
    themeConfluence
    languageborderStyleactionscript3solid
    title사용자 구분을 위한 로그수집 스크립트borderStylesolid
    linenumberstrue


    Code Block
    languagevb
    themeMidnightlanguagevb
    recoPick('setMID',암호화된 MEMBER_ID); 
    recoPick('setUserInfo',{ birthyear:‘출생연도’, gender:'성별’});
    


    <예시>

    * 출생년도, 성별 정보 (M: 남자, F: 여자, O: 기타)

    Code Block
    languagejs
    themeConfluencelanguagejs
    recoPick('setUserInfo',{ birthyear: ‘1987’, gender: 'M’});


...

  1. (구)디자인  관리> HTML 디자인  > 메인화면 페이지를 엽니다.

  2. HTML 편집화면에서 <head> … </head> 태그 사이에 아래 로그수집 스크립트를 복사후 삽입하세요!  

    스크립트 관리가 용이하도록 </head> 태그 바로 앞에 넣기를 권장합니다.

    Panel
    borderColor#007eff
    bgColor#ffffff
    titleColor#ffffff
    titleBGColor#007eff
    themelanguageactionscript3
    themeConfluence
    languageborderStyleactionscript3solid
    title기본 로그수집 스크립트borderStylesolid
    linenumberstrue


    Code Block
    language
    languagecoldfusion
    themeMidnightcoldfusion
    <!--RecoPick 로그수집 스크립트 -->
    <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', '사이트 url');
       recoPick('sendLog', 'cafe24');           
    </script>
    <!--RecoPick 로그수집 스크립트 -->


    (warning) 주의하세요! '사이트 url' 은 www를 제외한 사이트 주소로 수정합니다. 반드시 대소문자 구별을 꼭 해주셔야 합니다. 

     


  3. 공통 헤더용 로그수집 스크립트 삽입후 더욱 특화된 개인화 추천을 원하시면 암호화된 ID, 연령, 성별 데이터를 보내주세요! 

    (’service’, ‘ 사이트 url’); 바로 다음에 아래 스크립트를 삽입해 주시면 됩니다. 출생년도, 성별은 예시 참고하셔서 변경해 주시고 MEMBER_ID(MID)는 자체적으로 사용중인 회원 ID를 암호화해서 보내주세요.

    * 레코픽에서 수집하는 암호화된 ID, 연령, 성별 데이터로는 절대 개개인을 식별할 수 없으며, 단순히 사용자를 구분하기 위한 용도로만 사용됩니다.
      예를 들어, 같은 회원이 PC와 모바일을 통해 접속한다면 MID를 통해  매핑하면 RecoPick에서도 두 사용자를 같은 회원으로 인식하여 개인화 추천 등의 품질 향상에 도움이 됩니다.

    (warning) 주의하세요! 레코픽 추천을 API 방식으로 사용하는 경우, GET방식으로 API를 호출하게 됩니다.
      이 경우 일부 API의 파라미터에 MID가 사용되는데, MID 값에 일부 특수문자(예> &, =) 가 들어가게 되면 정상동작 하지 않을 수 있습니다.
      암호화된 결과에 특수문자가 들어가지 않는 암호화 알고리즘으로 단방향 암호화 해주세요. (예> SHA-256, MD5 등)

    * MID 단방향 암호화 예 : 88020d58ceb8a4ad7f6756021fbc06b8a91f17daad2f04a5d369608d9c308bde (SHA-256으로 암호화), 4509bf9373ff3dca193ba02726c87988 (MD5로 암호화)

    Panel
    borderStyle
    borderColor#007eff
    bgColor#ffffff
    titleColor#ffffff
    titleBGColor#007eff
    languageactionscript3
    themeConfluence
    languageborderStyleactionscript3solid
    title사용자 구분을 위한 로그수집 스크립트
    solidlinenumberstrue


    Code Block
    languagevb
    themeMidnight
    languagevb
    recoPick('setMID',암호화된 MEMBER_ID); 
    recoPick('setUserInfo',{ birthyear:‘출생연도’, gender:'성별’});
    


    <예시>

    * 출생년도, 성별 정보 (M: 남자, F: 여자, O: 기타)

    Code Block
    languagejs
    themeConfluence
    languagejs
    recoPick('setUserInfo',{ birthyear: ‘1987’, gender: 'M’});


...

1.  상품 상세 정보 선택후 html 최상단에 메타 태그를 삽입해주세요! 메타태그 정보를 통해 레코픽 추천위젯이 표시되기때문에 정확하게 넣어주시기 바랍니다

최신버전 삽입경로(구)버전 삽입경로
Image Modified
Image Modified

 

...




  • Panel
    borderColor#007eff
    bgColor#ffffff
    titleColor#ffffff
    titleBGColor#007eff
    languageactionscript3
    themeConfluence
    languageborderStyleactionscript3solid
    title기본 메타 태그borderStylesolid
    linenumberstrue


    Code Block
    language
    languageactionscript3
    themeEclipseactionscript3
    <meta property="recopick:title" content="상품 이름">
    <meta property="recopick:image" content="상품 이미지 url">
    <meta property="recopick:price" content="상품가격">
    <meta property="recopick:price:currency" content="가격 통화단위">
    



...

  • 현재 가격, 할인 가격을 둘 다 표시할 수 있습니다.

    Panel
    borderColor#007eff
    bgColor#ffffff
    titleColor#ffffff
    titleBGColor#007eff
    languageactionscript3
    themeConfluence
    languageborderStyleactionscript3solid
    title할인 가격이 있을 경우borderStylesolid
    linenumberstrue


    Code Block
    language
    languageactionscript3
    themeEclipseactionscript3
    <meta property="recopick:sale_price" content="할인가격">
    <meta property="recopick:sale_price:currency" content="할인가격 통화단위">



  • 상품 품절 시 지정합니다.

    true
    Panel
    linenumbers
    borderColor#007eff
    bgColor#ffffff
    titleColor#ffffff
    titleBGColor#007eff
    languageactionscript3
    themeConfluence
    languageborderStyleactionscript3solid
    title상품이 품절 상태인 경우
    borderStylelinenumberssolidtrue


    Code Block
    code
    language
    actionscript3
    themeEclipselanguageactionscript3
    <!--/if soldout/-->
    <meta property="recopick:availability" content="oos">
    <!--/end if/-->


      

3. Content 블루텍스트 부분은 실제 사용하는 변수로 수정해 주셔야 하며 반드시 큰따옴표(double-quotes)로 묶여야 합니다.

  • < 메타 태그 설명 >
    PropertyContent

    recopick:title (상품명)

    * 필수 메타 입니다.

    상품 이름

    <예시> “ 클래식 체크 스커트”

    recopick:image (상품이미지)

    * 필수 메타 입니다.

    상품 이미지 url 

    * 추천위젯에 이미지가 제대로 보일 수 있도록 하려면 가로/세로 사이즈 비율이 동일한 이미지를 사용하세요!

    recopick:price (정상가격)

    * 필수 메타 입니다.

    상품 가격

    <예시> "55800"

    recopick:price:currency (정상가격 통화)

    * 필수 메타 입니다.

    통화 단위

    <예시> 원화인 경우 “KRW,” 달러화인 경우 “USD”, 엔화인 경우 “JPY”

    recopick:description (상품설명)상품에 대한 설명

    * 상품에 대한 간단한 설명을 넣어주세요.

    recopick:author (상품의 브랜드 or 판매자 정보)브랜드 or 판매자 정보

    <예시> “ Nike”

    recopick:sale_price (할인가격) 할인 가격 

    <예시> "54600"

    recopick:sale_price:currency (할인가격 통화)

    할인 가격 통화 단위

    <예시> 원화인 경우 “KRW,” 달러화인 경우 “USD”, 엔화인 경우 “JPY”

    recopick:availability (상품 품절 표시)

    * 상품 품절인 경우에만 사용될 수 있도록 상품 품절여부를 체크하는 if 조건문 내에 위치시켜 주세요.

    OOS (out of service 약자)

    * 레코픽에서는 다음과 같은 경우에도 품절로 간주합니다.

    - 상품에 대한 필수 메타정보가 없는 경우

    - 상품 페이지의 URL로 접근하였으나 다른 페이지로 리다이렉트(redirect, 자동이동)되는 경우

    - 상품 페이지의 HTML 문서 길이가 128 바이트 이하인 경우

    recopick:c1 (대분류)대분류 상품 카테고리 이름
    recopick:c2 (중분류)중분류 상품 카테고리 이름
    recopick:c3 (소분류)소분류 상품 카테고리 이름
    recopick:brand (브랜드 카테고리)브랜드 카테고리


<3단계> 추천 위젯 삽입

 

 Admin Dashboard > 추천 위젯 설정에 들어가셔서 아래 가이드에 따라 추천위젯을 설정합니다.

 상품상세, 메인, 장바구니, 구매완료, 마이페이지 등 추가로 생성하신 후 생성된 스크립트를 고객님 쇼핑몰 페이지별로 적용해 주세요. 


*추천 위젯을 삽입후 사이트에서 추천결과를 바로 확인하실 수 없습니다.

추천계산을 위해 데이터 수집 후, 2~3일이 지나서 추천결과를 확인하실 수 있는데 추천결과 반영은 메일을 통해 안내해 드립니다. 안내에 따라 노출을 원하시는 시점에 추천타입을 설정한 후 저장하시면 사이트에서 반영하실 수 있습니다.

 


1.     상품 상세 페이지 상단 ( 함께 본 상품 추천)

  1. 위젯 관리가 용의하도록 위젯명을 상품상세_상단으로 입력합니다.
  2. 채널별 성과분석시(추천클릭률, 추천경유매출 등) 비교가 용이하도록 detail_top으로 입력합니다. 
  3. 추천타입은 우선 사용안함으로 설정합니다. (데이터 수집후, 2~3일이 지나서 설정합니다.)
  4. 그 외 원하시는 대로 위젯 스타일을 변경하실 수 있으며 할인가 표시를 원하시면 표시여부를 체크해 주세요.  

    <위젯설정 예시>
    Image Modified


  5. 모든 설정을 마친 후에는 꼭 저장 버튼을 클릭하시고 아래 위젯 적용 부분의 스크립트를 복사해서 고객님 사이트의 상품 상세 페이지 상단에 삽입해 주세요. <삽입 위치 참고>

    <위젯 적용><삽입 위치>
    Image Modified
    Image Modified



2.     상품 상세 페이지  ( 함께 구매한 상품 추천)

  1. 새 스타일 추가 버튼을 클릭해서 새로운 탭이 생성되면 위젯명을 상품상세_하단으로 입력합니다.

  2. 채널 별 성과 분석 시(추천클릭률, 추천경유매출 등) 비교가 용이하도록 detail_bottom으로 입력합니다. 

  3. 추천타입은 우선 사용안함으로 설정합니다. (데이터 수집후, 2~3일이 지나서 설정합니다.)

  4. 그 외 원하시는 대로 위젯 스타일을 변경하실 수 있으며 할인가 표시를 원하시면 표시여부를 체크해 주세요. 

    <위젯설정 예시>
    Image Modified


  5. 모든 설정을 마친 후에는 꼭 저장 버튼을 클릭하시고 아래 위젯 적용 부분의 스크립트를 복사해서 고객님 사이트의 상품 상세 페이지 하단에 삽입해 주세요. <삽입 위치 참고>

    <위젯 적용><삽입 위치>
    Image Modified
    Image Modified



3.     메인 페이지  (실시간 개인화 추천)

  1. 새 스타일 추가 버튼을 클릭해서 새로운 탭이 생성되면 위젯명을 메인으로 입력합니다.

  2. 채널 별 성과분석시(추천클릭률, 추천경유매출 등) 비교가 용이하도록 main으로 입력합니다. 

  3. 추천타입은 우선 사용안함으로 설정합니다. (데이터 수집후, 2~3일이 지나서 설정합니다.)

  4. 그 외 원하시는 대로 위젯 스타일을 변경하실 수 있으며 할인가 표시를 원하시면 표시여부를 체크해 주세요. 

    <위젯설정 예시>
    Image Modified


  5. 모든 설정을 마친 후에는 꼭 저장 버튼을 클릭하시고 아래 위젯 적용 부분의 스크립트를 복사해서 고객님 사이트의 메인 페이지에 삽입해 주세요. <삽입 위치 참고>

    <위젯 적용><삽입 위치>
     Image Modified
    Image Modified



4.     장바구니 페이지  ( 함께 구매한 상품 추천)

  1. 새 스타일 추가 버튼을 클릭해서 새로운 탭이 생성되면 위젯명을 장바구니로 입력합니다.

  2. 채널 별 성과분석시(추천클릭률, 추천경유매출 등) 비교가 용이하도록 basket으로 입력합니다. 

  3. 추천타입은 우선 사용안함으로 설정합니다. (데이터 수집후, 2~3일이 지나서 설정합니다.)

  4. 그 외 원하시는 대로 위젯 스타일을 변경하실 수 있으며 할인가 표시를 원하시면 표시여부를 체크해 주세요. 

    <위젯설정 예시>
    Image Modified


  5. 모든 설정을 마친 후에는 꼭 저장 버튼을 클릭하시고 아래 위젯 적용 부분의 스크립트를 복사해서 고객님 사이트의 장바구니 페이지에 삽입해 주세요. <삽입 위치 참고>

    <위젯 적용><삽입 위치>
     Image Modified
    Image Modified



5.     주문완료 페이지  (실시간 개인화 추천)

  1. 새 스타일 추가 버튼을 클릭해서 새로운 탭이 생성되면 위젯명을 주문완료로 입력합니다.

  2. 채널 별 성과분석시(추천클릭률, 추천경유매출 등) 비교가 용이하도록 order_result으로 입력합니다. 

  3. 추천타입은 우선 사용안함으로 설정합니다. (데이터 수집후, 2~3일이 지나서 설정합니다.)

  4. 그 외 원하시는 대로 위젯 스타일을 변경하실 수 있으며 할인가 표시를 원하시면 표시여부를 체크해 주세요. 

    <위젯설정 예시>
    Image Modified


  5. 모든 설정을 마친 후에는 꼭 저장 버튼을 클릭하시고 아래 위젯 적용 부분의 스크립트를 복사해서 고객님 사이트의 주문완료 페이지에 삽입해 주세요. <삽입 위치 참고>

    <위젯 적용><삽입 위치>
     Image Modified
    Image Modified


6.     마이 페이지  (실시간 개인화 추천)

  1. 새 스타일 추가 버튼을 클릭해서 새로운 탭이 생성되면 위젯명을 마이페이지로 입력합니다.

  2. 채널 별 성과분석시(추천클릭률, 추천경유매출 등) 비교가 용이하도록 mypage으로 입력합니다. 

  3. 추천타입은 우선 사용안함으로 설정합니다. (데이터 수집후, 2~3일이 지나서 설정합니다.)

  4. 그 외 원하시는 대로 위젯 스타일을 변경하실 수 있으며 할인가 표시를 원하시면 표시여부를 체크해 주세요. 

    <위젯설정 예시>
    Image Modified


  5. 모든 설정을 마친 후에는 꼭 저장 버튼을 클릭하시고 아래 위젯 적용 부분의 스크립트를 복사해서 고객님 사이트의 마이 페이지에 삽입해 주세요. <삽입 위치 참고>

    <위젯 적용><삽입 위치>
    Image Modified
    Image Modified


추천서비스 시작 (추천우선 순위 설정)

로그수집 스크립트, 메타태그, 추천위젯 삽입까지 모두 완료하셨나요?

제대로 설치하셨다면 데이터 수집된후, 2~3일이 지나서 추천결과를 반영할 수 있습니다.   


추천결과 반영시점은 메일을 통해 알려드립니다. 메일을 받으신 후 안내에 따라  Admin Dashboard  > 추천 위젯 설정에 들어가셔서

...

* 추천 설정은 가장 추천효과가 좋았던 best practice기반으로 안내하고 있으며 1순위 추천결과가 나타나지 않는 경우 다음 순위 추천결과를 노출합니다.

추천 설정상품상세_상단상품상세_하단메인  페이지

장바구니

주문완료마이페이지그외 페이지
1순위함께 본 상품 추천실시간 개인화 추천실시간 개인화 추천함께 구매한 상품 추천

실시간 개인화 추천

실시간 개인화 추천실시간 개인화 추천
2순위실시간 개인화 추천함께 구매한 상품 추천

통계형 추천

(구매전환율 TOP 100)

실시간 개인화 추천

함께 구매한 상품 추천

통계형 추천

(구매전환율 TOP 100)

통계형 추천

(구매전환율 TOP 100)
3순위

통계형 추천

(구매전환율 TOP 100)

통계형 추천

(구매전환율 TOP 100)
사용안함

통계형 추천

(많이 팔린 상품 TOP 100)

통계형 추천

(많이 팔린 상품 TOP 100)
사용안함사용안함