자체 제작 쇼핑몰 - SPA

SPA(Single Page Application) 방식으로 제작된 자체 제작 쇼핑몰을 이용하시는 고객님을 위한 스크립트 설치 가이드입니다. SPA방식이 아닌 자체 제작 쇼핑몰의 경우 여기 를 확인해주세요.

개요

그루비 서치를 이용하기 위해 쇼핑몰 데스크탑(PC), 모바일(Mobile) 페이지에 스크립트 설치가 필요합니다. 이는 구글 애널리틱스 추적 코드 설치와 동일한 방식입니다.
독립형 쇼핑몰의 경우 개발 담당자의 도움을 받아 스크립트를 설치하는 것을 추천드립니다.
스크립트 설치는 1. 기본 스크립트 설치 (PC/모바일), 2. 로그 수집 함수(Function) 호출 순으로 진행됩니다.

1. 기본 스크립트 설치 (PC/모바일)

◾ 그루비 서비스키 복사

그루비 어드민 로그인 > 설정 클릭
서비스키 드래그 하여 복사 ㅤ

◾ 기본 스크립트 삽입

모든 페이지에 공통으로 적용할 수 있는 공통 레이아웃에 아래 그루비 기본 스크립트를 삽입합니다. HTML의 head 영역의 종료 태그 직전의 위치에 삽입해야 합니다.

※ 공통 레이아웃이 적용이 되지 않는 페이지가 있을 경우 해당 페이지에도 삽입을 해야 합니다. 기본 스크립트


<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>

'발급 받은 서비스키'부분을 반드시 서비스키로 대체해주셔야 합니다.

기본 스크립트가 삽입되고 최초 페이지 로드 이후 실행되는 액션 뒤에는 아래 함수가 별도로 추가 호출되어야 합니다.

<script type="text/javascript">
groobee.start();
</script>

[기본 스크립트 삽입 예시]

<html>
<head>

<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>

</head>
<body>

</body>
</html>

2. 로그 수집 함수(Function) 호출

기본 스크립트가 모든 페이지에 삽입되어 있다는 가정 하에 해당 페이지 내에서 아래와 같은 자바스크립트 함수를 사용할 수 있습니다.

아래의 함수에 타입에 맞는 데이터를 넣어 호출하면 행동 데이터를 추가로 수집합니다.

groobee.action("타입", 값);

1) 타입

번호

타입

설명

검색어를 수집하는 함수에서 사용되는 타입으로 검색 결과 페이지에서 호출합니다

주문서 진입 시 구매 정보를 수집하는 함수에서 사용되는 타입으로 주문서 작성 페이지에서 호출합니다.

(주문서 작성 페이지 진입 이후 상품 수량 변경과 같은 상품 정보 변동사항은 수집 되지 않습니다)

주문 완료 페이지 진입 시 주문 번호와 상품데이터를 수집하는 함수에서 사용되는 타입으로 주문 완료 페이지에서 호출합니다.

상품 상세 페이지 진입 시 상품 데이터를 수집하는 함수에서 사용되는 타입으로 상품 상세 페이지에서 호출합니다.

2) 값(value)

자바스크립트 객체로 오브젝트 { } 형태로 입력합니다.

상품 정보는 배열의 형태 [ ] 로 여러 상품 정보를 담아서 입력합니다.

※ 함수(function) 사용법은 아래의 예시를 참고하세요.

◾ 스크립트(함수) 사용 예시

“원피스” 검색 후 검색 결과 페이지에서 검색어를 수집하는 함수 사용 예시 (검색 결과 페이지)

groobee.action( "SE", { keyword : "원피스" } );

바지 상품(2개)와 양말 상품(1개)를 구매하기 위하여 주문서 작성 페이지에 진입 시 구매 정보를 수집하는 함수 사용 예시 (주문서 작성 페이지)

groobee.action( "OR", {
    goods : [
        {
            name: "바지",
            code: "0011",
            cat: "99",
            cateNm: "남성하의 ",
            amt: 140000,
            prc:70000,
            salePrc:70000,
            cnt: 2
        },
        {
            name : "양말",
            code : "0485" ,
            cat : "72" ,
            cateNm: "기타",
            amt : 120000,
            prc:70000,
            salePrc:60000,
            cnt : 1
        }
    ]
});

결제 후 주문 완료 페이지에 진입 시 주문 번호를 수집하는 함수 사용 예시 (주문 완료 페이지 – 구매 상품 정보가 없는 경우)

 groobee.action( "PU", { orderNo : "1111111111111" } );

결제 후 주문 완료 페이지에 진입 시 주문 번호와 상품데이터를 수집하는 함수 사용 예시 (주문 완료 페이지 – 구매 상품 정보가 있는 경우)

groobee.action( "PU", {
    orderNo : "1111111111111",
    goods : [
        {
            name: "바지",
            code: "0011",
            cat: "99",
            cateNm: "남성하의 ",
            amt: 140000,
            prc:70000,
            salePrc:70000,
            cnt: 2
        },
        {
            name : "양말",
            code : "0485" ,
            cat : "72" ,
            cateNm: "기타",
            amt : 120000,
            prc:70000,
            salePrc:60000,
            cnt : 1
        }
]});

상품 상세 페이지에 진입 시 상품 데이터를 수집하는 함수 사용법 예시 (상품 상세 페이지)

groobee.action( "VG", {
    goods : [
        {
            name: "티셔츠",
            code: "0001",
            cat: "118",
            cateNm: "남성상의",
            amt: 20000,
            prc: 25000,
            salePrc: 20000,
            img: "상품 이미지 URL"
            status : “”     // 품절이거나 상품이 판매상태가 아닐 경우 "SS"
        }
    ]
});

◾ 스크립트(함수) 작성 예시 - 주문서 페이지

<body>

<script type="text/javascript">
var groobeeGoods = [];
</script>
……
<script type="text/javascript">
var groobeeItem = {
    name: "티셔츠", // 상품명
    code: "0001", // 상품 코드
    cat: "118", // 해당 상품이 속한 카테고리 코드
    cateNm: "남성상의 ", // 해당 상품이 속한 카테고리명
    amt: 20000, // 상품 금액 (할인 판매가 * 수량)
    prc: 11000, // 판매가
    salePrc:10000, // 할인 판매가
    cnt: 2 // 수량
};                                
groobeeGoods.push(groobeeItem);
</script>
……

<script type="text/javascript">
groobee.action("OR", {goods : groobeeGoods});
</script>

</body>