Custom 그루비 스크립트 가이드

1. 개요

웹 / 웹뷰를 기준으로 스크립트가 구동이 되는 기준으로 작성되었습니다.
임대몰 / Custom SPA 사이트를 제외한 설정 방법에 대한 내용입니다.

2. 주요 목적

그루비에서 데이터 수집을 위한 목적으로 사용됩니다.
groobee("타입", "타입에 맞는 데이터")

3. 페이지 정의

데이터가 수집되는 페이지 종류를 설명합니다.

MA : 메인
VG : 상품 상세
CA : 카테고리
VC : 장바구니
SE : 검색 결과 페이지
OR : 주문서 작성
PU : 주문 완료
MJ : 회원가입

** MA와 MJ는 스크립트 설치가 되어있고 어드민에 주소가 제대로 설정되어 있다면 자동 수집됩니다.

4. 기본 설정

어드민 설정 방법
- 기본 사항 : 어드민 설정에 작성한 주소와 현재 고객사에 존재하는 주소가 일치해야 합니다.
- 설정 경로 : 설정 > 사이트 > 사이트 설정 탭, URL 등록 탭

참고사항
- 모든 URL은 여러 개 등록 가능합니다.
  - 등록법 : ', (콤마)'를 구분자로 URL을 여러 개 입력 ex) shop20.grooshop.com,shop20.grooshop.com/main.html
- URI, URN 어떠한 방식으로든 등록 가능합니다.
  - ex1) shop20.grooshop.com/detail/
  - ex2) /detail/

※ 입력 시 주의사항
- 설정 > 사이트 > 사이트 설정 탭 > 사이트 관리의 PC/웹 사이트 URL or 모바일 사이트 URL에 잘못된 주소가 입력 되었을 경우 서비스키 인증이 제대로 이루어지지 않을 수 있습니다.
- 설정 > 사이트 > URL 등록 탭에 주소가 설정되어 있지 않다면 타입에 맞는 데이터 수집이 이루어지지 않을 수 있습니다.
- 주소가 철자가 틀렸을 경우 수집이 제대로 이루어지지 않을 수 있습니다.
- '/ (슬래시)'에 따라서 수집이 될 수 있고, 되지 않을 수 있습니다.

5. URL 입력 방식

어드민 설정 > 사이트 > URL 등록 탭에서 데이터 수집을 위한 페이지별 URL을 입력합니다.
온사이트 캠페인의 미리보기는 PC/웹 사이트 URL or 모바일 사이트 URL에 입력된 첫 번째 주소 값을 가지고 실행합니다.
페이지별 설정
- 메인 페이지
  - 사이트 메인 페이지를 입력합니다.(리다이렉트가 되지 않는 URL을 입력하여야 합니다.)
  - 가장 첫번째로 작성된 URL이 온사이트 캠페인 미리보기 페이지가 됩니다.
  - 예시 ∙ PC : shop20.groobee.com ∙ 모바일 : shop20.groobee.com/m
- 상품 상세 페이지
  - 사이트 상품 상세 페이지를 입력합니다.
  - 상품 상세 페이지의 URL은 규칙성 또는 패턴을 가지고 있습니다. 규칙이 있는 URL을 입력합니다.
  - 예시 ∙ PC : /product/ ∙ 모바일 : /product/detail.html
- 장바구니 페이지
  - 사이트 장바구니 페이지를 입력합니다.
  - 예시 ∙ PC : /order/basket.html ∙ 모바일 : /order/basket.html
- 검색 결과 페이지
  - 사이트 검색 결과 페이지를 입력합니다.
  - 검색이 완료된 후 상품 목록 또은 결과를 보여주는 화면을 등록해야 합니다.
  - 예시 ∙ PC : /product/search_result.html ∙ 모바일 : /product/search_result.html
- 주문서 페이지
  - 주문서 작성 페이지를 입력합니다.
  - 예시 ∙ PC : /order/orderform.html ∙ 모바일 : /order/orderform.html
- 주문 완료 페이지
  - 주문 완료 후 주문 번호가 발급된 상태의 페이지를 입력합니다.
  - 예시 ∙ PC : /order/order_result ∙ 모바일 : /m/order/order_result
- 카테고리 페이지
  - 카테고리가 선택된 후 수집이 가능한 상태의 페이지 주소를 입력합니다.
  - 카테고리 목록 페이지가 아닌 카테고리 선택 후 나오는 카테고리 페이지의 URL을 입력합니다.
  - 예시 ∙ PC : /product/list ∙ 모바일 : /m/product/list
- 회원가입 완료 페이지
  - 회원가입 페이지가 아닌 회원가입 완료가 된 페이지 URL을 입력합니다.
  - 예시 ∙ PC : /member/join_result ∙ 모바일 : /m/member/join_result

설정 > 사이트 문서를 참고해 주세요.

6. 데이터 수집 함수 정의

기본 설치 방법

• serviceKey 위치에 발급받은 서비스키를 넣습니다.

        <script type="text/javascript"> 
              (function(a,i,u,e,o) { 
                a[u]=a[u]||function(){(a[u].q=a[u].q||[]).push(arguments)};
                })(window, document, "groobee");
              groobee("serviceKey", "발급 받은 서비스키");
              groobee("siteType", "custom");
        </script>

• 해당 소스의 위치는 공통 헤더쪽에 위치하거나 페이지마다 실행될 수 있도록 하는게 기본입니다.

    <html>
        <head>
        <!-- Groobee -->
        <script type="text/javascript">
                (function(a,i,u,e,o) {
                a[u]=a[u]||function(){(a[u].q=a[u].q||[]).push(arguments)};
                })(window, document, "groobee");
                
                groobee("serviceKey", "발급 받은 서비스키");
                groobee("siteType", "custom");
                </script>
                
                <script charset="utf-8" src=" //static.groobee.io/dist/g2/groobee.init.min.js"></script>
                <!-- End of Groobee -->
        </head>
        <body>
        </body>
    </html>

7. 수집 케이스별 정리

・ VG

상품 상세 페이지

타입

적용 대상 페이지

필요한 정보

상품 상세 페이지

goods: [ { name 상품명 code URL에 표시되는 상품코드 amt 상품금액 (할인판매가 X 수량) prc 판매가 (또는 원가) salePrc 할인 판매가 (실제 판매가) img 상품 이미지 전체 URL status 상품 판매 상태 (품절 이거나 판매중이 아닌경우 SS 입력) cat 상품의 카테고리코드 cateNm 상품의 카테고리명 catL 상품의 대분류 카테고리코드 cateLNm 상품의 대분류 카테고리명 catM 상품의 중분류 카테고리코드 cateMNm 상품의 중분류 카테고리명 catS 상품의 소분류 카테고리코드 cateSNm 상품의 소분류 카테고리명 catD 상품의 세분류 카테고리코드 cateDNm 상품의 세분류 카테고리명 brand 상품의 브랜드코드 brandNm 상품의 브랜드명 plan[] 상품이 속한 기획전(관련 컨텐츠) 코드 }, … ]

* 장바구니 상품정보 중 cnt가 제외되고 img, status, plan이 추가

상품 상세 페이지에 진입했을 때 실행
예시(상품 상세 페이지)

<html> 
  <head>
    <!-- Groobee -->
    <script type="text/javascript">
      (function(a,i,u,e,o) {
      a[u]=a[u]||function(){(a[u].q=a[u].q||[]).push(arguments)};
      })(window, document, "groobee");
      groobee("serviceKey", "발급 받은 서비스키");
      groobee("siteType", "custom");
    </script>
    <script charset="utf-8" src=" //static.groobee.io/dist/g2/groobee.init.min.js">    <!-- End of Groobee -->
  </head>
  <body>
    .......
    <script type="test/javascript">
      //폴로 티셔츠 상세 페이지에 접속
      const obj = {
        goods: [
          {
               name: "폴로 티셔츠",	// 상품명
			   code: "0001",		// URL에 표시되는 상품코드
  			   amt: 20000,			    // 상품 금액 (할인 판매가 * 수량)
			   prc: 11000,				// 판매가 (또는 원가)
			   salePrc: 10000,			// 할인 판매가 (실제 판매가)
			   img: "상품 이미지 전체 URL"
			   status: ""			// 품절이거나 상품이 판매상태가 아닐 경우 "SS"
			   cat: "1234",			// 상품의 카테고리 코드 (가장 하위 카테고리 코드와 동일하도록 작성합니다.)
			   cateNm: "티셔츠",		// 상품의 카테고리명 (가장 하위 카테고과 동일하도록 작성합니다.)
			   catL: "1",			// 상품의 대분류 카테고리 코드
			   cateLNm: "의류",		// 상품의 대분류 카테고리명
			   catM: "12",			// 상품의 중분류 카테고리 코드
			   cateMNm: "남성",		// 상품의 중분류 카테고리명
			   catS: "123",			// 상품의 소분류 카테고리 코드
			   cateSNm: "남성상의",	// 상품의 소분류 카테고리명
			   catD: "1234",        // 상품의 세분류 카테고리 코드
  			   cateDNm: "티셔츠",	    // 상품의 세분류 카테고리명
			   brand: "P1",			// 상품의 브랜드 코드
			   brandNm: "폴로",		// 상품의 브랜드명
			   plan: ['A1','A2','B1'] //상품이 속한 기획전(관련 콘텐츠) 코드
          }
        ]
      }
      groobee("VG", obj);
    </script>
  </body>
</html>

・ CA

카테고리 페이지 = 상품 리스트 페이지

타입

적용 대상 페이지

필요한 정보

카테고리 페이지 (상품 리스트 페이지)

category: [ { cateCd 현재 페이지의 카테고리코드 cateNm 현재 페이지의 카테고리명 // cateCd와 cateNm은 카테고리의 마지막 분류와 같아야 합니다. catL 대분류 카테고리코드 cateLNm 대분류 카테고리명 catM 중분류 카테고리코드 cateMNm 중분류 카테고리명 catS 소분류 카테고리코드 cateSNm 소분류 카테고리명 catD 세분류 카테고리코드 cateDNm 세분류 카테고리명 } ]

* 장바구니 상품정보 중 cnt가 제외되고 img, status, plan이 추가

상품 목록 페이지에 진입했을 때 실행
예시

<html>
  <head>
    <!-- Groobee -->
    <script type="text/javascript">
      (function(a,i,u,e,o) {
      a[u]=a[u]||function(){(a[u].q=a[u].q||[]).push(arguments)};
      })(window, document, "groobee");
      groobee("serviceKey", "발급 받은 서비스키");
      groobee("siteType", "custom");
    </script>
    <script charset="utf-8" src=" //static.groobee.io/dist/g2/groobee.init.min.js"></script>
    <!-- End of Groobee -->
  </head>
  <body>
    .......
    <script type="test/javascript">
      const obj = {
        category: {
           cateCd: "1234",	    // 카테고리 코드 (가장 하위 카테고리 코드와 동일하도록 작성합니다.)
		   cateNm: "티셔츠",		// 카테고리명 (가장 하위 카테고리명과 동일하도록 작성합니다.)
		   catL: "1",			// 상품의 대분류 카테고리 코드
		   cateLNm: "의류",		// 상품의 대분류 카테고리명
		   catM: "12",			// 상품의 중분류 카테고리 코드
		   cateMNm: "남성",		// 상품의 중분류 카테고리명
		   catS: "123",			// 상품의 소분류 카테고리 코드
		   cateSNm: "남성상의",	// 상품의 소분류 카테고리명
		   catD: "1234",		// 상품의 세분류 카테고리 코드
		   cateDNm: "티셔츠",	    // 상품의 세분류 카테고리명
        }
      }
      groobee("CA", obj);
    </script>
  </body>
</html>

・ VC, OR

장바구니 페이지, 주문서 작성 페이지

타입

적용 대상 페이지

필요한 정보

VC OR

장바구니 페이지 주문서 작성 페이지

goods: [ { name 상품명 code URL에 표시되는 상품코드 amt 상품 금액 (할인 판매가 X 수량) prc 판매가 (또는 원가) salePrc 할인 판매가 (실제 판매가) cnt 수량 cat 상품의 카테고리코드 cateNm 상품의 카테고리명 catL 상품의 대분류 카테고리코드 cateLNm 상품의 대분류 카테고리명 catM 상품의 중분류 카테고리코드 cateMNm 상품의 중분류 카테고리명 catS 상품의 소분류 카테고리코드 cateSNm 상품의 소분류 카테고리명 catD 상품의 세분류 카테고리코드 cateDNm 상품의 세분류 카테고리명 brand 상품의 브랜드코드 brandNm 상품의 브랜드명 }, ] 상품정보

예시

<html>
  <head>
    <!-- Groobee -->
    <script type="text/javascript">
      (function(a,i,u,e,o) {
      a[u]=a[u]||function(){(a[u].q=a[u].q||[]).push(arguments)};
      })(window, document, "groobee");
      groobee("serviceKey", "발급 받은 서비스키");
      groobee("siteType", "custom");
    </script>
    <script charset="utf-8" src=" //static.groobee.io/dist/g2/groobee.init.min.js"></script>
    <!-- End of Groobee -->
  </head>
  <body>
    .......
    <script type="test/javascript">
      //상품은 [{},{}] 한 개이든 여러 개든 배열 형태로 입력합니다.
      //10,000원짜리 동일 상품 2개를 장바구니에 담고 장바구니 페이지에 접속
      const goods = [
        {
               name: "폴로 티셔츠",	// 상품명
		   code: "0001",		// URL에 표시되는 상품코드
		   amt: 20000,			// 상품 금액 (할인 판매가 * 수량)
		   prc: 11000,			// 판매가 (또는 원가)
		   salePrc: 10000,		// 할인 판매가 (실제 판매가)
		   cnt: 2,		            // 수량
		   cat: "1234",			// 상품의 카테고리 코드 (가장 하위 카테고리 코드와 동일하도록 작성합니다.)
		   cateNm: "티셔츠",		// 상품의 카테고리명 (가장 하위 카테고리명과 동일하도록 작성합니다.)
		   catL: "1",			// 상품의 대분류 카테고리 코드
		   cateLNm: "의류",		// 상품의 대분류 카테고리명
		   catM: "12",			// 상품의 중분류 카테고리 코드
		   cateMNm: "남성",		// 상품의 중분류 카테고리명
		   catS: "123",			// 상품의 소분류 카테고리 코드
		   cateSNm: "남성상의",	// 상품의 소분류 카테고리명
		   catD: "1234",		    // 상품의 세분류 카테고리 코드
		   cateDNm: "티셔츠",	    // 상품의 세분류 카테고리명
		   brand: "P1",			// 상품의 브랜드 코드
		   brandNm: "폴로"		// 상품의 브랜드명
        },
        ...
      ];
      //장바구니
      groobee("VC", {goods: goods});
      //주문서 작성
      groobee("OR", {goods: goods});
    </script>
  </body>
</html>

・ SE

검색 결과 페이지

타입

적용 대상 페이지

필요한 정보

검색 결과 페이지

keyword 검색어

예시(검색 완료 페이지)

<html>
  <head>
    <!-- Groobee -->
    <script type="text/javascript">
      (function(a,i,u,e,o) {
      a[u]=a[u]||function(){(a[u].q=a[u].q||[]).push(arguments)};
      })(window, document, "groobee");
      groobee("serviceKey", "발급 받은 서비스키");
      groobee("siteType", "custom");
    </script>
    <script charset="utf-8" src=" //static.groobee.io/dist/g2/groobee.init.min.js"></script>
    <!-- End of Groobee -->
  </head>
  <body>
    .....
    <script type="test/javascript">
      groobee("SE", "아이폰");
    </script>
  </body>
</html>

・ PU

주문 완료 페이지

타입

적용 대상 페이지

필요한 정보

주문 완료 페이지

orderNo 주문번호, goods: [ { name 상품명 code URL에 표시되는 상품코드 amt 상품금액 (할인판매가 X 수량) prc 판매가 (또는 원가) salePrc 할인 판매가 (실제 판매가) cnt 수량 cat 상품의 카테고리코드 cateNm 상품의 카테고리명 catL 상품의 대분류 카테고리코드 cateLNm 상품의 대분류 카테고리명 catM 상품의 중분류 카테고리코드 cateMNm 상품의 중분류 카테고리명 catS 상품의 소분류 카테고리코드 cateSNm 상품의 소분류 카테고리명 catD 상품의 세분류 카테고리코드 cateDNm 상품의 세분류 카테고리명 brand 상품의 브랜드코드 brandNm 상품의 브랜드명 }, … ]

* 장바구니 상품 정보와 동일

결제 후 구매 완료 페이지에 접속했을 때 실행
예시(장바구니 페이지)

<html>
  <head>
    <!-- Groobee -->
    <script type="text/javascript">
      (function(a,i,u,e,o) {
      a[u]=a[u]||function(){(a[u].q=a[u].q||[]).push(arguments)};
      })(window, document, "groobee");
      groobee("serviceKey", "발급 받은 서비스키");
      groobee("siteType", "custom");
    </script>
    <script charset="utf-8" src=" //static.groobee.io/dist/g2/groobee.init.min.js"></script>
    <!-- End of Groobee -->
  </head>
  <body>
    .......
    <script type="test/javascript">
      //주문번호(orderNo)는 무조건 필수입니다.
      //상품은 [{},{}] 한 개이든 여러 개이든 배열 형태로 입력합니다.
      const obj = {
        orderNo: "1111111111",
        goods: [
          {
               name: "폴로 티셔츠",	// 상품명
			   code: "0001",		// URL에 표시되는 상품코드
			   amt: 20000,			// 상품 금액 (할인 판매가 * 수량)
			   prc: 11000,			// 판매가 (또는 원가)
			   salePrc: 10000,		// 할인 판매가 (실제 판매가)
			   cnt: 2,		        // 수량
			   cat: "1234",			// 상품의 카테고리 코드 (가장 하위 카테고리 코드와 동일하도록 작성합니다.)
			   cateNm: "티셔츠",		// 상품의 카테고리명 (가장 하위 카테고리명과 동일하도록 작성합니다.)
			   catL: "1",			// 상품의 대분류 카테고리 코드
			   cateLNm: "의류",		// 상품의 대분류 카테고리명
			   catM: "12",			// 상품의 중분류 카테고리 코드
			   cateMNm: "남성",		// 상품의 중분류 카테고리명
			   catS: "123",			// 상품의 소분류 카테고리 코드
			   cateSNm: "남성상의",	// 상품의 소분류 카테고리명
			   catD: "1234",		// 상품의 세분류 카테고리 코드
			   cateDNm: "티셔츠",	    // 상품의 세분류 카테고리명
			   brand: "P1",			// 상품의 브랜드 코드
			   brandNm: "폴로"		// 상품의 브랜드명
          },
          ...
        ]
      }
      groobee("PU", obj);
    </script>
  </body>
</html>

8. 온사이트 캠페인 실행 중지

기본 스크립트가 적용되었지만 온사이트 배너 캠페인을 실행하고 싶지 않은 페이지에 스크립트를 추가하여 일시 중지할 수 있습니다.
groobee("grbDisabled", true);
- 기본 스크립트가 적용되어 있지 않는 페이지에는 따로 추가할 필요가 없습니다.
- 스크립트를 추가해도 데이터는 계속 수집됩니다.
- 온사이트 배너 캠페인에만 해당됩니다.

Last updated 7 months ago