Groobee 스크립트 설치 가이드 - 행동 이력 수집¶

이 문서는 웹 환경에서 Groobee 스크립트를 실제 서비스에 맞게 설치하기 위한 가이드 중 행동 이력 수집 방법을 기술한 문서입니다.

행동 이력 수집¶

Groobee로 사용자별 맞춤 캠페인을 제공하기 위해서는 행동 이력 수집이 필요합니다.
Groobee에서 기본적으로 제공하는 행동이력 유형은 메인화면, 카테고리, 상품상세정보, 검색, 장바구니, 주문서 작성, 주문완료 페이지 방문 등이 있으며
만약, 추가로 수집하고자 하는 행동이력이 있는 경우에는 커스텀 이벤트 기능을 활용하시면 됩니다.
👉 현재 문서 내 행동 유형 목록에 각 행동유형에 대한 간단한 설명이 나와있습니다.

사전 요구 사항¶

(필수) 공통 스크립트가 설치 되어있어야 합니다.
👉 공통 스크립트 설치 가이드
(필수) 웹 페이지 URL이 등록 되어있어야 합니다.
👉 웹 페이지 경로 등록 가이드
커스텀 웹 사이트(Custom)는 현재 페이지 URL이 등록된 페이지 경로(상품상세, 검색, 장바구니 등)와 일치할 때만 groobee("행동코드", 값) 호출을 처리합니다.
URL이 등록되어 있지 않으면 호출한 행동 이력 대신 기타 페이지(LO)로 수집됩니다.

행동 유형 목록¶

행동 이름	행동 코드	설명
메인 페이지	MA	메인 페이지 방문 시 수집
상품 상세 페이지	VG	상품 상세 페이지 방문 시 수집
장바구니 페이지	VC	장바구니 페이지 방문 시 수집
검색 결과 페이지	SE	검색 결과 페이지 방문 시 수집
주문서 페이지	OR	주문서 페이지 방문 시 수집
주문 완료 페이지	PU	주문 완료 시 수집
카테고리 페이지	CA	카테고리 페이지 방문 시 수집
회원가입 완료 페이지	MJ	회원가입 완료 시 수집
기타 페이지	LO	이벤트 등 기타 페이지 방문 시 수집
커스텀 이벤트	CE	개발자가 정의한 특정 행동
장바구니 담기 이벤트	AC	상품을 장바구니에 담았을 때 수집
장바구니 제거 이벤트	DC	장바구니에서 상품을 제거했을 때 수집

행동 유형별 상세한 설명은 👉 행동 유형 문서를 참고해주세요.
행동 유형에서 사용되는 데이터 스키마에 대한 설명은 👉 Schema 문서를 참고해주세요.

커스텀 웹 사이트 (Custom)¶

페이지 내에 공통 스크립트가 custom 유형으로 정상 설치 되어 있다면,
아래와 같은 자바스크립트 함수를 사용 할 수 있습니다.
아래 함수를 타입에 맞는 데이터를 넣어 호출하면 해당 행동 이력이 Groobee로 전송되어 수집됩니다.

groobee("행동코드", 값);

참고

groobee("행동코드", 값) 형태의 페이지 방문 이력(SE, VG, VC, OR, PU, CA)은 페이지당 1회, 공통 스크립트가 로드되기 전 또는 로드 직후에 호출해주세요.
스크립트는 페이지 로드 시점에 한 번만 호출 내역을 확인하며, 그 이후에 호출하거나 여러 번 호출한 내역은 수집되지 않습니다.

장바구니 담기(AC) / 장바구니 제거(DC)처럼 버튼 클릭 등 사용자 동작 시점에 발생하는 이벤트는 groobee("행동코드", 값) 형태로 호출하면 수집되지 않습니다.
아래 장바구니 담기 (AC), 장바구니 제거 (DC) 항목의 전용 함수를 사용해주세요.

커스텀 웹 사이트 행동 이력 수집 방법 보기

메인 페이지 (MA)¶

메인 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

검색 결과 페이지 (SE)¶

검색 결과 페이지 방문 이력은 검색어(keyword)와 함께 호출해주어야 됩니다.
```
groobee( "SE", { keyword : "겨울옷" } );
```

상품 상세 페이지 (VG)¶

상품 상세 페이지 방문 이력은 상품 정보 목록과 함께 호출해주어야 됩니다.
상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.
상품 상세 페이지는 상품 1개 기준으로 수집되므로, goods 배열에는 현재 페이지의 상품 1개만 전달해주세요. (첫 번째 상품만 상세 조회 상품으로 처리됩니다.)
상품 상태(status) 필드는 품절이거나 상품이 판매상태가 아닐 경우에만 "SS" 값을 넣어주시면 됩니다.
정상 판매중인 상품의 경우에는 빈 문자열("") 또는 "FS"로 전달해주세요.
상품 확장 속성은 상품 정보의 attribute 필드(객체)에, 행동 확장 데이터는 extraData 필드(객체)에 담아 전달할 수 있습니다.
👉 확장 필드 (attribute / extraData) 항목을 참고해주세요.

groobee( "VG", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0011",
      amt: 20000,
      prc: 25000,
      salePrc: 20000,
      status : "FS", // 품절이거나 상품이 판매상태가 아닐 경우 "SS"
      img: "상품 이미지 전체 URL",
      cat: "1234",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1234",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티",
      plan: ['A1', 'A2', 'B1'],
      attribute: {           // (선택) 상품 확장 속성
        color: "blue",
        season: "SS26"
      }
    }
  ],
  extraData: {               // (선택) 행동 확장 데이터
    referrer: "event_banner"
  }
});

장바구니 페이지 (VC)¶

장바구니 페이지 방문 이력은 장바구니 상품 정보 목록과 함께 호출해주어야 됩니다.
상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.

groobee( "VC", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    },
    {
      name: "흰 줄무늬 티셔츠",
      code: "0001",
      amt: 45000,
      prc: 20000,
      salePrc: 15000,
      cnt: 3,
      cat: "1235",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1235",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티"
    }
  ]
});

주문서 작성 페이지 (OR)¶

주문서 작성 페이지 방문 이력은 장바구니 상품 정보 목록과 함께 호출해주어야 됩니다.
상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.

groobee( "OR", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    },
    {
      name: "흰 줄무늬 티셔츠",
      code: "0001",
      amt: 45000,
      prc: 20000,
      salePrc: 15000,
      cnt: 3,
      cat: "1235",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1235",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티"
    }
  ]
});

주문완료 페이지 (PU)¶

주문완료 페이지 방문 이력은 주문번호와 함께 호출해주어야 됩니다.
주문번호(orderNo)는 반드시 문자열(String) 타입으로 전달해야 합니다.
상품 정보가 있는 경우에는 상품 정보 목록 값을 추가로 전달 할 수 있습니다.
상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.
상품 정보가 없는 경우 orderNo만 전달하는 예시

groobee( "PU", { orderNo : "PU1234567890" } );

상품 정보가 있는 경우 orderNo와 Goods[]를 함께 전달하는 예시

groobee( "PU", { 
  orderNo : "PU0102030405",
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    },
    {
      name: "흰 줄무늬 티셔츠",
      code: "0001",
      amt: 45000,
      prc: 20000,
      salePrc: 15000,
      cnt: 3,
      cat: "1235",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1235",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티"
    }
  ]
});

카테고리 페이지 (CA)¶

카테고리 페이지 방문 이력은 카테고리 정보와 함께 호출해주어야 됩니다.
카테고리 정보(category)의 타입은 Category 이며, 상세한 필드별 설명은 스키마 문서의 Category 섹션를 참고해주세요.

groobee( "CA", {
  category : {
    cateCd: "1234",
    cateNm: "티셔츠",
    catL: "1",
    cateLNm: "의류",
    catM: "12",
    cateMNm: "남성",
    catS: "123",
    cateSNm: "남성상의",
    catD: "1234",
    cateDNm: "티셔츠"
  }
});

장바구니 담기 (AC)¶

장바구니 담기 이벤트는 장바구니에 담긴 상품 정보와 함께 호출해주어야 됩니다.
상품 정보(goods)의 타입은 Goods 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.
커스텀 웹 사이트에서는 groobee("AC", 값) 형태가 아닌 groobee.addToCart(값) 함수로 호출해주세요.
이 함수는 공통 스크립트 로드 이후에 사용할 수 있으므로, 장바구니 담기 버튼 클릭 시점 등에 호출하면 됩니다.
상품코드(code), 판매가(prc), 수량(cnt)은 필수 값입니다. 셋 중 하나라도 비어 있거나 0인 상품은 전송에서 제외되며, 전송할 상품이 없으면 이벤트가 수집되지 않습니다.

groobee.addToCart({
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    },
    {
      name: "흰 줄무늬 티셔츠",
      code: "0001",
      amt: 45000,
      prc: 20000,
      salePrc: 15000,
      cnt: 3,
      cat: "1235",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1235",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티"
    }
  ]
});

장바구니 제거 (DC)¶

장바구니 제거 이벤트는 장바구니에서 제거된 상품 정보와 함께 호출해주어야 됩니다.
상품 정보(goods)의 타입은 Goods 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.
커스텀 웹 사이트에서는 groobee("DC", 값) 형태가 아닌 groobee.deleteFromCart(값) 함수로 호출해주세요.
이 함수는 공통 스크립트 로드 이후에 사용할 수 있으므로, 장바구니 삭제 버튼 클릭 시점 등에 호출하면 됩니다.
상품코드(code), 판매가(prc), 수량(cnt)은 필수 값입니다. 셋 중 하나라도 비어 있거나 0인 상품은 전송에서 제외되며, 전송할 상품이 없으면 이벤트가 수집되지 않습니다.
상품수(cnt) 필드는 장바구니에서 제거된 수량을 의미합니다.
예) 장바구니에 3개 담긴 상품을 모두 제거한 경우 cnt: 3 으로 전달

groobee.deleteFromCart({
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    }
  ]
});

SPA 환경 (React, Vue 등)¶

페이지 내에 공통 스크립트가 custom spa유형으로 정상 설치 되어 있다면,
아래와 같은 자바스크립트 함수를 사용 할 수 있습니다.
아래 함수를 타입에 맞는 데이터를 넣어 호출하면 해당 행동 이력이 Groobee로 전송되어 수집됩니다.

groobee.action("행동코드", 값);

중요

SPA 모드로 공통 스크립트를 설치한 경우, 페이지(라우트) 전환마다 아래 중 하나를 호출해주세요.

전달할 행동 이력이 있는 페이지(SE, VG, VC, OR, PU, CA 등): groobee.action("행동코드", 값)만 호출하면 됩니다. (groobee.start()를 먼저 호출할 필요는 없습니다.)

그 외 페이지(메인 MA, 기타 LO): groobee.start()를 호출하면 등록된 웹 페이지 URL을 기준으로 메인 / 기타 페이지를 판별해 수집합니다.

공통 스크립트 설치의 SPA 환경 섹션 문서를 참고해주세요.

SPA 웹 사이트 행동 이력 수집 방법 보기

메인 페이지 (MA)¶

메인 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

검색 결과 페이지 (SE)¶

검색 결과 페이지 방문 이력은 검색어(keyword)와 함께 호출해주어야 됩니다.
```
groobee.action( "SE", { keyword : "겨울옷" } );
```

상품 상세 페이지 (VG)¶

상품 상세 페이지 방문 이력은 상품 정보 목록과 함께 호출해주어야 됩니다.
상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.
상품 상세 페이지는 상품 1개 기준으로 수집되므로, goods 배열에는 현재 페이지의 상품 1개만 전달해주세요. (첫 번째 상품만 상세 조회 상품으로 처리됩니다.)
상품 상태(status) 필드는 품절이거나 상품이 판매상태가 아닐 경우에만 "SS" 값을 넣어주시면 됩니다.
정상 판매중인 상품의 경우에는 빈 문자열("")로 전달해주세요.
상품 확장 속성(attribute), 행동 확장 데이터(extraData)는 👉 확장 필드 (attribute / extraData) 항목을 참고해주세요.

groobee.action( "VG", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0011",
      amt: 20000,
      prc: 25000,
      salePrc: 20000,
      status : "", // 품절이거나 상품이 판매상태가 아닐 경우 "SS"
      img: "상품 이미지 전체 URL",
      cat: "1234",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1234",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티",
      plan: ['A1', 'A2', 'B1']
    }
  ]
});

장바구니 페이지 (VC)¶

장바구니 페이지 방문 이력은 장바구니 상품 정보 목록과 함께 호출해주어야 됩니다.
상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.

groobee.action( "VC", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    },
    {
      name: "흰 줄무늬 티셔츠",
      code: "0001",
      amt: 45000,
      prc: 20000,
      salePrc: 15000,
      cnt: 3,
      cat: "1235",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1235",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티"
    }
  ]
});

주문서 작성 페이지 (OR)¶

주문서 작성 페이지 방문 이력은 장바구니 상품 정보 목록과 함께 호출해주어야 됩니다.
상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.

groobee.action( "OR", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    },
    {
      name: "흰 줄무늬 티셔츠",
      code: "0001",
      amt: 45000,
      prc: 20000,
      salePrc: 15000,
      cnt: 3,
      cat: "1235",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1235",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티"
    }
  ]
});

주문완료 페이지 (PU)¶

주문완료 페이지 방문 이력은 주문번호와 함께 호출해주어야 됩니다.
주문번호(orderNo)는 반드시 문자열(String) 타입으로 전달해야 합니다.
상품 정보가 있는 경우에는 상품 정보 목록 값을 추가로 전달 할 수 있습니다.
상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.
상품 정보가 없는 경우 orderNo만 전달하는 예시

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

상품 정보가 있는 경우 orderNo와 Goods[]를 함께 전달하는 예시

groobee.action( "PU", { 
  orderNo : "PU0102030405",
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    },
    {
      name: "흰 줄무늬 티셔츠",
      code: "0001",
      amt: 45000,
      prc: 20000,
      salePrc: 15000,
      cnt: 3,
      cat: "1235",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1235",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티"
    }
  ]
});

카테고리 페이지 (CA)¶

카테고리 페이지 방문 이력은 카테고리 정보와 함께 호출해주어야 됩니다.
카테고리 정보(category)의 타입은 Category 이며, 상세한 필드별 설명은 스키마 문서의 Category 섹션를 참고해주세요.

groobee.action( "CA", {
  category : {
    cateCd: "1234",
    cateNm: "티셔츠",
    catL: "1",
    cateLNm: "의류",
    catM: "12",
    cateMNm: "남성",
    catS: "123",
    cateSNm: "남성상의",
    catD: "1234",
    cateDNm: "티셔츠"
  }
});

장바구니 담기 (AC)¶

장바구니 담기 이벤트는 장바구니에 담긴 상품 정보와 함께 호출해주어야 됩니다.
상품 정보(goods)의 타입은 Goods 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.

groobee.action( "AC", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    },
    {
      name: "흰 줄무늬 티셔츠",
      code: "0001",
      amt: 45000,
      prc: 20000,
      salePrc: 15000,
      cnt: 3,
      cat: "1235",
      cateNm: "티셔츠",
      catL: "1",
      cateLNm: "의류",
      catM: "12",
      cateMNm: "남성",
      catS: "123",
      cateSNm: "남성상의",
      catD: "1235",
      cateDNm: "티셔츠",
      brand: "P1",
      brandNm: "플래티"
    }
  ]
});

장바구니 제거 (DC)¶

장바구니 제거 이벤트는 장바구니에서 제거된 상품 정보와 함께 호출해주어야 됩니다.
상품 정보(goods)의 타입은 Goods 이며, 상세한 필드별 설명은 스키마 문서의 Goods 섹션를 참고해주세요.
상품수(cnt) 필드는 장바구니에서 제거된 수량을 의미합니다.
예) 장바구니에 3개 담긴 상품을 모두 제거한 경우 cnt: 3 으로 전달

groobee.action( "DC", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0001",
      amt: 10000,
      prc: 15000,
      salePrc: 10000,
      cnt: 1,
      cat: "1234", 
      cateNm: "티셔츠", 
      catL: "1", 
      cateLNm: "의류", 
      catM: "12", 
      cateMNm: "남성", 
      catS: "123", 
      cateSNm: "남성상의", 
      catD: "1234", 
      cateDNm: "티셔츠", 
      brand: "P1", 
      brandNm: "플래티" 
    }
  ]
});

확장 필드 (attribute / extraData)¶

커스텀 웹 사이트(Custom)와 SPA 환경에서 행동 이력을 전달할 때, 정해진 필드 외에 고객사에서 정의한 데이터를 함께 전달할 수 있습니다.

확장 필드는 개별 행동 이력에 함께 실려 전송되는 값이며, 회원·페이지 단위로 설정하는 커스텀 데이터(customData) 와는 다른 기능입니다.

필드	위치	타입	설명
attribute	goods 배열의 각 상품 정보	Object	상품 확장 속성 (예: 색상, 시즌, 소재 등)
extraData	행동 이력 값의 최상위	Object	행동 확장 데이터 (예: 유입 경로, 노출 영역 등)

두 필드 모두 키-값 형태의 객체({ ... }) 로만 전달해야 합니다.
배열, 문자열, 숫자 등 객체가 아닌 값은 정상 처리되지 않습니다. (extraData와 VG 외 행동의 attribute는 객체가 아니면 전송에서 제외됩니다.)
객체 내부의 키 이름과 값은 고객사에서 자유롭게 정의할 수 있으며, 입력한 그대로 전송됩니다.
extraData는 SE, VG, VC, OR, PU, CA, AC, DC 행동 이력에 함께 전달할 수 있습니다.
attribute는 상품 정보(goods)를 전달하는 행동 이력(VG, VC, OR, PU, AC, DC)에 사용할 수 있습니다.

// 커스텀 웹 사이트 : groobee("VG", {...}) / SPA : groobee.action("VG", {...})
groobee( "VG", {
  goods : [
    {
      name: "파란색 줄무늬 티셔츠",
      code: "0011",
      prc: 25000,
      salePrc: 20000,
      status : "",
      cat: "1234",
      attribute: {
        color: "blue",
        season: "SS26",
        material: "cotton"
      }
    }
  ],
  extraData: {
    referrer: "event_banner",
    abGroup: "B"
  }
});

Cafe24¶

페이지 내에 공통 스크립트가 cafe24유형으로 정상 설치 되어 있다면, 스마트 디자인 편집기에서 아래 스크립트들을 삽입하여 행동 이력을 수집할 수 있습니다.

CAFE24 웹 사이트 행동 이력 수집 방법 보기

메인 페이지 (MA)¶

메인 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

검색 결과 페이지 (SE)¶

검색 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

상품 상세 페이지 (VG)¶

상품 > 상품 상세 페이지 <div module="product_detail"> 바로 하단에 아래 스크립트를 삽입합니다.

PC¶

상품 상세 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Selector Script -->
<div class="groobeeProductDetail" style="display: none;">
<span class="groobeeProductName">{$name}</span>
<span class="groobeeProductPrice">{$product_price}</span>
<span class="groobeeProductSalePrice">{$product_sale_price}</span>
<span class="groobeeProductCode">{$product_no}</span>
<span class="groobeeProductImage">{$medium_img}</span>
<span class="groobeeProductCategory"></span>
<span class="groobeeProductCategoryName"></span>
<span class="groobeeProductStatus">{$soldout_icon}</span>
</div>
<!-- End of Groobee Selector Script -->

모바일¶

상품 상세 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Selector Script -->
<div class="groobeeProductDetail" style="display: none;">
<span class="groobeeProductName">{$name}</span>
<span class="groobeeProductPrice">{$product_price}</span>
<span class="groobeeProductSalePrice">{$txt_product_price_mobile}</span>
<span class="groobeeProductCode">{$product_no}</span>
<span class="groobeeProductImage">{$medium_img}</span>
<span class="groobeeProductCategory"></span>
<span class="groobeeProductCategoryName"></span>
<span class="groobeeProductStatus">{$soldout_icon}</span>
</div>
<!-- End of Groobee Selector Script -->

장바구니 페이지 (VC)¶

주문 > 장바구니 페이지 <div module="Order_BasketPackage"> 바로 하단에 아래 스크립트를 삽입합니다.
장바구니 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Cart Selector Script -->
<div module="Order_NormNormal" style="display: none;">
<div class="groobeeCartList" module="Order_list">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$name}</span>
<span class="groobeeProductAmount">{$sum_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$quantity}</span>
<span class="groobeeProductImage">{$img}</span>
</div>
</div>
<div module="Order_SuppNormal" style="display: none;">
<div class="groobeeCartList" module="Order_list">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$name}</span>
<span class="groobeeProductAmount">{$sum_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$quantity}</span>
<span class="groobeeProductImage">{$img}</span>
</div>
</div>
<div module="Order_NormIndividual" style="display: none;">
<div class="groobeeCartList" module="Order_list">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$name}</span>
<span class="groobeeProductAmount">{$sum_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$quantity}</span>
<span class="groobeeProductImage">{$img}</span>
</div>
</div>
<div module="Order_InstNormal" style="display: none;">
<div class="groobeeCartList" module="Order_list">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$name}</span>
<span class="groobeeProductAmount">{$sum_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$quantity}</span>
<span class="groobeeProductImage">{$img}</span>
</div>
</div>
<!-- End of Groobee Cart Selector Script -->
<!-- 해외배송을 사용하는 사이트만 삽입 -->
<div module="Order_NormOversea" style="display: none;">
<div class="groobeeCartList" module="Order_list">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$name}</span>
<span class="groobeeProductAmount">{$sum_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$quantity}</span>
<span class="groobeeProductImage">{$img}</span>
</div>
</div>
<!-- End of Groobee Cart Selector Script -->

주문서 작성 페이지 (OR)¶

주문 > 주문서 작성 페이지 <div module="Order_form"> 바로 하단에 아래 스크립트를 삽입합니다.
주문서 작성 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Order Selector Script -->
<div class="groobeeOrderList" module="Order_normallist" style="display: none;">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$product_name_link}</span>
<span class="groobeeProductAmount">{$product_total_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$product_quantity_text}</span>
<span class="groobeeProductImage">{$product_image}</span>
</div>
<div class="groobeeOrderList" module="Order_supplierlist" style="display: none;">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$product_name_link}</span>
<span class="groobeeProductAmount">{$product_total_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$product_quantity_text}</span>
<span class="groobeeProductImage">{$product_image}</span>
</div>
<div class="groobeeOrderList" module="Order_individuallist" style="display: none;">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$product_name_link}</span>
<span class="groobeeProductAmount">{$product_total_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$product_quantity_text}</span>
<span class="groobeeProductImage">{$product_image}</span>
</div>
<!-- End of Groobee Order Selector Script -->
<!-- 해외배송을 사용하는 사이트만 삽입 -->
<div class="groobeeOrderList" module="Order_oversealist" style="display: none;">
<a class="groobeeProductA" href="/product/detail.html{$param}"></a>
<span class="groobeeProductName">{$product_name_link}</span>
<span class="groobeeProductAmount">{$product_total_price_front}</span>
<span class="groobeeProductPrice">{$product_price_front}</span>
<span class="groobeeProductSalePrice">{$product_sale_price_front}</span>
<span class="groobeeProductCount">{$product_quantity_text}</span>
<span class="groobeeProductImage">{$product_image}</span>
</div>
<!-- End of Groobee Order Selector Script -->

특이사항
모바일 간편(원터치) 주문서 이력은 수집 할 수 없습니다.

주문완료 페이지 (PU)¶

주문 완료 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

특이사항
모바일 간편(원터치) 주문 이력은 수집 할 수 없습니다.

카테고리 페이지 (CA)¶

상품 > 상품 분류 페이지 <div module="product_headcategory"> 하단에 아래 스크립트를 삽입합니다.
cafe24 유형은 현재 대카테고리 정보만 수집이 가능하며, 중/소/세부 카테고리 정보는 수집이 불가능합니다.
카테고리 이력 수집을 위한 스크립트 설치 위치 및 예시

<div class="groobeeCategory" style="display:none">
  <span class="groobeeCategoryName">{$name_1}</span>
  <span class="groobeeCategoryCode">{$param_1}</span>
</div>

고도몰¶

페이지 내에 공통 스크립트가 고도몰 유형 (godo5, godo5_m)으로 정상 설치 되어 있다면, 아래 스크립트들을 삽입하여 행동 이력을 수집할 수 있습니다.

고도몰 웹 사이트 행동 이력 수집 방법 보기

메인 페이지 (MA)¶

메인 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

검색 결과 페이지 (SE)¶

검색 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

상품 상세 페이지 (VG)¶

상품 > 상품상세 페이지 > { # header } 하단에 아래 스크립트를 삽입합니다.
상품 상세 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Selector Script -->
<div class="groobeeProductDetail" style="display: none;">
    <span class="groobeeProductName">{=goodsView['goodsNmDetail']}</span>
    <span class="groobeeProductPrice"><!--{ ? gd_isset(goodsView['fixedPrice']) > 0 }-->{=gd_isset(goodsView['fixedPrice'],0)}<!--{ : }-->{=gd_isset(goodsView['goodsPrice'],0)}<!--{ / }--></span>
    <span class="groobeeProductSalePrice">{=goodsView['goodsDcPricePrint']}</span>
    <span class="groobeeProductCode">{goodsView.goodsNo}</span>
    <span class="groobeeProductImage">{=goodsView['image']['detail']['img'][0]}</span>
    <span class="groobeeProductCategory">{=goodsView['cateCd']}</span>
    <!--{ @ goodsCategoryList }-->
    <span class="groobeeProductCategoryName">{=.cateNm}</span>
    <!--{ / }-->
    <span class="groobeeProductStatus"><!--{ ? goodsView['orderPossible'] == 'n' || goodsView['soldOut'] == 'y' }-->y<!--{ : }-->n<!--{ / }--></span>
</div>
<!-- End of Groobee Selector Script -->

장바구니 페이지 (VC)¶

주문 > 장바구니 >  하단에 아래 스크립트를 삽입합니다.
장바구니 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Cart Selector Script -->
<div class="groobeeCartList" style="display: none;">
  <a href="../goods/goods_view.php?goodsNo={=...goodsNo}" class="groobeeProductA"></a>
  <span class="groobeeProductName">{=...goodsNm}</span>
  <span class="groobeeProductCategory">{=...cateCd}</span>
  <span class="groobeeProductCount">{=...goodsCnt}</span>
  <span class="groobeeProductAmount">{=gd_global_currency_display(...price['goodsPriceSubtotal'])}</span>
  <span class="groobeeProductPrice"></span>
  <span class="groobeeProductSalePrice"></span>
  <span class="groobeeProductImage">{=...goodsImage}</span>
</div>
<!-- End of Groobee Cart Selector Script -->

주문서 작성 페이지 (OR)¶

주문 > 주문서 작성 >  하단에 아래 스크립트를 삽입합니다.
주문서 작성 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Order Selector Script -->
<div class="groobeeOrderList" style="display: none;">
  <a href="../goods/goods_view.php?goodsNo={=...goodsNo}" class="groobeeProductA"></a>
  <span class="groobeeProductName">{=...goodsNm}</span>
  <span class="groobeeProductCategory">{=...cateCd}</span>
  <span class="groobeeProductCount">{=...goodsCnt}</span>
  <span class="groobeeProductAmount">{=gd_global_currency_display(...price['goodsPriceSubtotal'])}</span>
  <span class="groobeeProductPrice"></span>
  <span class="groobeeProductSalePrice"></span>
  <span class="groobeeProductImage">{=...goodsImage}</span>
</div>
<!-- End of Groobee Order Selector Script -->

주문완료 페이지 (PU)¶

주문 완료 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

카테고리 페이지 (CA)¶

상품 > 상품 리스트 페이지 > { # header } 하단에 아래 스크립트를 삽입합니다.
카테고리 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Selector Script -->
<div class="groobeeCategory" style="display:none">
    <span class="groobeeCategoryName">{=goodsCategoryList[cateCd]['cateNm']}</span>
    <span class="groobeeCategoryCode">{=cateCd}</span>
</div>
<!-- End of Groobee Selector Script -->

고도몰 (e나무)¶

페이지 내에 공통 스크립트가 고도몰(e나무) 유형 (godomall, godomall_m)으로 정상 설치 되어 있다면, 아래 스크립트들을 삽입하여 행동 이력을 수집할 수 있습니다.

고도몰(e나무) 웹 사이트 행동 이력 수집 방법 보기

메인 페이지 (MA)¶

메인 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

검색 결과 페이지 (SE)¶

검색 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

상품 상세 페이지 (VG)¶

상품 > 상품 상세 페이지에 아래 스크립트를 삽입합니다.

<!-- Groobee Selector Script -->
<div class="groobeeProductDetail" style="display: none;">
  <span class="groobeeProductName">{goodsnm}</span>
  <span class="groobeeProductPrice">{price}</span>
  <span class="groobeeProductSalePrice">{realprice}</span>
  <span class="groobeeProductCode">{goodsno}</span>
  <span class="groobeeProductImage">{=goodsimg(t_img[0],0,'id=objImg')}</span>
  <span class="groobeeProductCategory">{category}</span>
  <span class="groobeeProductCategoryName"></span>
  <span class="groobeeProductStatus"> {runout} </span>
</div> <!-- End of Groobee Selector Script -->

장바구니 페이지 (VC)¶

기타페이지 > 장바구니 상품목록 >  하단에 아래 스크립트를 삽입합니다.

<!-- Groobee Cart & Order Selector Script -->
<div class="groobeeProductList" style="display: none;">
  <a href="../goods/goods_view.php?goodsno={.goodsno}" class="groobeeProductA"></a>
  <span class="groobeeProductName">{.goodsnm}</span>
  <span class="groobeeProductCount">{.ea}</span>
  <span class="groobeeProductAmount">{=number_format((.price + .addprice)*.ea)}</span>
  <span class="groobeeProductPrice">{=number_format(.price + .addprice)}</span>
  <span class="groobeeProductSalePrice">{=number_format(.price - .special_discount_amount)}</span>
  <span class="groobeeProductImage">{=goodsimgTS(.img,100)}</span>
  <span class="groobeeProductCategory"></span>
</div>
<!-- End of Groobee Cart & Order Selector Script -->

주문서 작성 페이지 (OR)¶

기타/추가페이지 > 주문상품 >  하단에 삽입 아래 스크립트를 삽입합니다.

<!-- Groobee Cart & Order Selector Script -->
<div class="groobeeProductList" style="display: none;">
    <a href="../goods/goods_view.php?goodsno={.goodsno}" class="groobeeProductA"></a>
    <span class="groobeeProductName">{.goodsnm}</span>
    <span class="groobeeProductCount">{.ea}</span>
    <span class="groobeeProductAmount">{=number_format((.price + .addprice)*.ea)}</span>
    <span class="groobeeProductPrice">{=number_format(.price + .addprice)}</span>
    <span class="groobeeProductSalePrice">{=number_format(.price - .special_discount_amount)}</span>
    <span class="groobeeProductImage">{=goodsimgTS(.img,100)}</span>
    <span class="groobeeProductCategory"></span>
</div>
<!-- End of Groobee Cart & Order Selector Script -->

주문완료 페이지 (PU)¶

주문 완료 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

카테고리 페이지 (CA)¶

PC의 경우 상품 > 분류화면 페이지, 모바일의 경우 상품 > 분류/검색 상품리스트 페이지에 아래 스크립트를 삽입합니다.

<!-- Groobee Selector Script -->
<div class="groobeeCategory" style="display:none">
  <span class="groobeeCategoryName">{=currPosition(substr(_category,0,3))}</span>
  <span class="groobeeCategoryCode">{_category}</span>
</div>
<!-- End of Groobee Selector Script -->

메이크샵¶

페이지 내에 공통 스크립트가 메이크샵 유형 (makeshop, makeshop_m)으로 정상 설치 되어 있다면, 아래 스크립트들을 삽입하여 행동 이력을 수집할 수 있습니다.

각 스크립트의 사이트주소 부분에는 https://myshop.make.shop 처럼 사이트 주소를 입력하면 됩니다.

메이크샵의 경우 스킨에 따라 스크립트 삽입 위치가 다를 수 있습니다. 아래 가이드는 참고용으로 제공되는 예시이므로, 실제 사용하시는 스킨에서 유사한 위치를 찾아 삽입해주시면 됩니다.

메이크샵 웹 사이트 행동 이력 수집 방법 보기

메인 페이지 (MA)¶

메인 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

검색 결과 페이지 (SE)¶

중앙디자인 > 상품관련 > 상품 검색 결과 화면에 아래 스크립트를 삽입합니다.
검색 결과 이력 수집을 위한 스크립트 설치 위치 및 예시

<meta property="groobee:search_word" content="<!--/keyword/-->"/>

상품 상세 페이지 (VG)¶

상품관련 > 상품상세페이지 > (PC) <div id="productDetail"> / (모바일) <main class=”shopdetail” id="productDetail"> 하단에 아래 스크립트를 삽입합니다.
상품 상세 이력 수집을 위한 스크립트 설치 위치 및 예시 (PC)
상품 상세 이력 수집을 위한 스크립트 설치 위치 및 예시 (모바일)

<!-- Groobee Goods Selector -->
<div class="groobeeProductDetail" style="display: none;">
<span class="groobeeProductName"><!--/name/--></span>
<span class="groobeeProductPrice"><!--/price_sell/--></span>
<span class="groobeeProductSalePrice"><!--/dc_price_sell/--></span>
<span class="groobeeProductCode"><!--/number/--></span>
<span class="groobeeProductImage">사이트주소<!--/image_l/--></span>
<span class="groobeeProductCategory"><!--/link_cate1/--></span>
<span class="groobeeProductCategoryName"><!--/cate1_name/--></span>
    <span class="groobeeProductStatus"><!--/if_soldout/--> y <!--/end_if/--> </span>
</div>
<!-- End of Groobee Goods Selector -->

장바구니 페이지 (VC)¶

사용하시는 장바구니 / 통합장바구니2 화면에 스크립트를 삽입해줘야합니다.
아래 스크립트 삽입 방법들을 참고해주세요.
주문관련 > 장바구니 화면에 아래 스크립트들을 삽입합니다.
장바구니 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Cart Selector -->
<!--/loop_basket/-->
<div class="groobeeCartList" style="display: none;">
    <a href="<!--/basket@link/-->" class="groobeeProductA"></a>
    <span class="groobeeProductName"><!--/basket@name/--></span>
    <span class="groobeeProductCount"><!--/basket@input_quantity/--></span>
    <span class="groobeeProductAmount"><!--/number/basket@price_sell/--></span>
    <span class="groobeeProductPrice"></span>
    <span class="groobeeProductSalePrice"><!--/basket@discount_info/--></span>
    <span class="groobeeProductImage">사이트주소<!--/basket@image_l/--></span>
</div>
<!--/end_loop/-->
<!-- End of Groobee Cart Selector -->

주문관련 > 통합장바구니2 화면에 아래 스크립트들을 삽입합니다.
통합장바구니 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Cart Selector -->
<!--/loop_provider/-->
    <!--/loop_provider@basket/-->
    <div class="groobeeCartList" style="display: none;">
        <a href="<!--/provider@basket@link/-->" class="groobeeProductA"></a>
        <span class="groobeeProductName"><!--/provider@basket@name/--></span>
        <span class="groobeeProductCount"><!--/provider@basket@input_quantity/--></span>
        <span class="groobeeProductAmount"><!--/provider@basket@price_sell/--></span>
        <span class="groobeeProductPrice"></span>
        <span class="groobeeProductSalePrice"><!--/provider@basket@discount_info/--></span>
        <span class="groobeeProductImage">사이트주소<!--/provider@basket@image_l/--></span>
    </div>
    <!--/end_loop/-->
<!--/end_loop/-->
<!-- End of Groobee Cart Selector -->

 는 Ctrl+F로 검색하여 기존에 있는 치환태그와 동일하게 입력해야합니다. 예) 기존에 사용 중인 치환태그가  라면 Selector 스크립트도 이와 일치시켜야 합니다.
일치시키지 않는다면 수량 변경 부분의 UI가 깨질 수 있습니다.

장바구니 설치 후 상품 수 인풋 박스 수량 테스트
만약 상품 수 인풋 박스가 정상적으로 바뀌지 않는다면 추가된 Groobee 스크립트로 인해 문제가 발생한 것입니다.
<input name=”amount”> 가 겹치면서 생기는 오류일 가능성이 높으므로. Groobee 장바구니 스크립트를 하단으로 이동시키면 됩니다.

주문서 작성 페이지 (OR)¶

주문관련 > (고급형) 주문서 작성 (현재 사용하는 주문서 페이지)에 삽입합니다.
주문서 작성 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Order Selector -->
<!--/loop_provider_product/-->
    <!--/loop_provider_product@list/-->
    <div class="groobeeOrderList" style="display: none;">
        <a href="<!--/provider_product@list@link/-->" class="groobeeProductA"></a>
        <span class="groobeeProductName"><!--/provider_product@list@name/--></span>
        <span class="groobeeProductCount"><!--/number/provider_product@list@amount/--></span>
        <span class="groobeeProductAmount"><!--/number/provider_product@list@total_price_sell/--></span>
        <span class="groobeeProductPrice"></span>
        <span class="groobeeProductSalePrice"></span>
        <span class="groobeeProductImage">사이트주소<!--/provider_product@list@image_l/--></span>
    </div>                                      
    <!--/end_loop/-->                                    
<!--/end_loop/-->
<!-- End of Groobee Order Selector -->

주문완료 페이지 (PU)¶

주문 완료 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

카테고리 페이지 (CA)¶

상품 > 상품 분류 페이지 > 상품 분류 페이지에 아래 스크립트를 삽입합니다.
카테고리 이력 수집을 위한 스크립트 설치 위치 및 예시

<!-- Groobee Category Selector -->
<div class="groobeeCategory" style="display:none">
<span class="groobeeCategoryName"><!--/cate1_name/--></span>
<span class="groobeeCategoryCode"><!--/link_cate1/--></span>
</div><!-- End of Groobee Category Selector -->

위사 (스마트윙)¶

페이지 내에 공통 스크립트가 위사(스마트윙) 유형 (wisa, wisa_m)으로 정상 설치 되어 있다면, 아래 스크립트들을 삽입하여 행동 이력을 수집할 수 있습니다.

위사 (스마트윙) 웹 사이트 행동 이력 수집 방법 보기

메인 페이지 (MA)¶

메인 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

검색 결과 페이지 (SE)¶

검색 페이지 방문 이력은 웹 페이지 URL 등록이 되어 있다면 자동으로 수집됩니다.
별도의 코드 삽입이 필요하지 않습니다.

장바구니 페이지 (VC)¶

HTML 편집 > 페이지 편집 > 주문관련 > 장바구니로 이동합니다.
장바구니 에디터 하단의 페이지 코드 > 반복문 > {{$장바구니리스트}} 편집하기 > 리스트 반복 구문을 삽입합니다.

장바구니 편집 화면 위치
장바구니 > 반복문 > 장바구니리스트 편집기 위치
코드 삽입 예시

<!-- Groobee Cart Selector Script -->
<div class="groobeeCartList" style="display: none;">
    <span class="groobeeProductA">{{$상품명(링크포함)}}</span> 
    <span class="groobeeProductName">{{$상품명}}</span>
    <span class="groobeeProductCount">{{$구매수량}}</span>
    <span class="groobeeProductAmount">{{$상품판매가격}}</span>
    <span class="groobeeProductPrice">{{$상품가격}}</span>
    <span class="groobeeProductSalePrice">{{$상품가격}}</span>
    <span class="groobeeProductImage">{{$상품이미지경로}}</span>
</div>
<!-- End of Groobee Cart Selector Script -->

주문서 작성 페이지 (OR)¶

HTML 편집 > 페이지 편집 > 주문관련 > 주문서로 이동합니다.
주문서 에디터 하단의 페이지 코드 > 반복문 > {{$장바구니리스트}} 편집하기 > 리스트 반복 구문을 삽입합니다.

주문서 작성 편집 화면 위치
주문서 > 반복문 > 장바구니리스트 편집기 위치
코드 삽입 예시

<!-- Groobee Order Selector Script -->
<div class="groobeeOrderList" style="display: none;">
    <span class="groobeeProductA">{{$상품명(링크포함)}}</span> 
    <span class="groobeeProductName">{{$상품명}}</span>
    <span class="groobeeProductCount">{{$구매수량}}</span>
    <span class="groobeeProductAmount">{{$상품총가격}}</span>
    <span class="groobeeProductPrice">{{$상품가격}}</span>
    <span class="groobeeProductSalePrice">{{$상품가격}}</span>
    <span class="groobeeProductImage">{{$상품이미지경로}}</span>
</div>
<!-- End of Groobee Order Selector Script -->

카테고리 페이지 (CA)¶

카테고리 스크립트는 상품 리스트 페이지에 추가하면 됩니다.
HTML 편집 > 페이지 편집 > 상품관련 > 상품리스트로 이동해 아래 스크립트를 삽입합니다.

상품리스트 편집 화면 위치
코드 삽입 예시

<!-- Groobee Selector Script -->
<div class="groobeeCategory" style="display:none">
    <span class="groobeeCategoryName">{{$카테고리명}}</span>
    <span class="groobeeCategoryCode">{{$카테고리코드}}</span>
</div>
<!-- End of Groobee Selector Script -->

상품 상세 페이지 (VG)¶

위사 쇼핑몰 관리자 페이지에 로그인 한 후, 디자인 > 디자인관리 > 스크립트 매니저에 접속하여 상품상세 스크립트를 작성합니다.
공통 스크립트 설치 가이드를 참고하여 스크립트 매니저에 스크립트를 추가한 경우,
해당 스크립트 내에 아래 예시의 상품 상세 스크립트 부분을 추가로 작성해주시면 됩니다.

스크립트 매니저 위치
상품 상세 스크립트 예시

<!-- Groobee Selector Script -->
<div class="groobeeProductDetail" style="display: none;"> 
    <span class="groobeeProductName">{상품명}</span>
    <span class="groobeeProductPrice">{상품가격}</span>
    <span class="groobeeProductSalePrice">{상품가격}</span>
    <span class="groobeeProductCode">{시스템코드}</span>
    <span class="groobeeProductImage">{상품이미지}</span>
    <span class="groobeeProductCategory"></span>
    <span class="groobeeProductCategoryName">{카테고리명}</span>
</div>
<!-- End of Groobee Selector Script -->

주문완료 페이지 (PU)¶

위사 쇼핑몰 관리자 페이지에 로그인 한 후, 디자인 > 디자인관리 > 스크립트 매니저에 접속하여 주문완료 스크립트를 작성합니다.
공통 스크립트 설치 가이드를 참고하여 스크립트 매니저에 스크립트를 추가한 경우,
해당 스크립트 내에 아래 예시의 주문완료 스크립트 부분을 추가로 작성해주시면 됩니다.

스크립트 매니저 위치
주문완료 스크립트 예시

<!-- Groobee Selector Script -->
<meta property="groobee:order_no" content="{주문번호}">
<!-- End of Groobee Selector Script -->

다음 단계¶

추천 캠페인 사용법 가이드로 이동하여 추천 캠페인 사용법을 확인해주세요.