콘텐츠로 이동

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

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


행동 이력 수집

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

사전 요구 사항


행동 유형 목록

행동 이름 행동 코드 설명
메인 페이지 MA 메인 페이지 방문 시 수집
상품 상세 페이지 VG 상품 상세 페이지 방문 시 수집
장바구니 페이지 VC 장바구니 페이지 방문 시 수집
검색 결과 페이지 SE 검색 결과 페이지 방문 시 수집
주문서 페이지 OR 주문서 페이지 방문 시 수집
주문 완료 페이지 PU 주문 완료 시 수집
카테고리 페이지 CA 카테고리 페이지 방문 시 수집
회원가입 완료 페이지 MJ 회원가입 완료 시 수집
기타 페이지 LO 이벤트 등 기타 페이지 방문 시 수집
커스텀 이벤트 CE 개발자가 정의한 특정 행동
장바구니 담기 이벤트 AC 상품을 장바구니에 담았을 때 수집
장바구니 제거 이벤트 DC 장바구니에서 상품을 제거했을 때 수집
  • 행동 유형별 상세한 설명은 👉 행동 유형 문서를 참고해주세요.
  • 행동 유형에서 사용되는 데이터 스키마에 대한 설명은 👉 Schema 문서를 참고해주세요.

목차


커스텀 웹 사이트 (Custom)

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

groobee("행동코드", );
커스텀 웹 사이트 행동 이력 수집 방법 보기 ### 메인 페이지 (MA) - 메인 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 검색 결과 페이지 (SE) - 검색 결과 페이지 방문 이력은 검색어(keyword)와 함께 호출해주어야 됩니다.
groobee( "SE", { keyword : "겨울옷" } );
### 상품 상세 페이지 (VG) - 상품 상세 페이지 방문 이력은 상품 정보 목록과 함께 호출해주어야 됩니다. - 상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 Goods 섹션를 참고해주세요. - 상품 상태(status) 필드는 품절이거나 상품이 판매상태가 아닐 경우에만 "SS" 값을 넣어주시면 됩니다. 정상 판매중인 상품의 경우에는 빈 문자열("")로 전달해주세요.
groobee( "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[] 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 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[] 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 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[] 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 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 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 Category 섹션를 참고해주세요.
groobee( "CA", {
  category : {
    cateCd: "1234",
    cateNm: "티셔츠",
    catL: "1",
    cateLNm: "의류",
    catM: "12",
    cateMNm: "남성",
    catS: "123",
    cateSNm: "남성상의",
    catD: "1234",
    cateDNm: "티셔츠"
  }
});
### 장바구니 담기 (AC) - 장바구니 담기 이벤트는 장바구니에 담긴 상품 정보와 함께 호출해주어야 됩니다. - 상품 정보(goods)의 타입은 Goods 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 Goods 섹션를 참고해주세요.
groobee( "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 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 Goods 섹션를 참고해주세요. - 상품수(cnt) 필드는 장바구니에서 제거된 수량을 의미합니다. - 예) 장바구니에 3개 담긴 상품을 모두 제거한 경우 cnt: 3 으로 전달
groobee( "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: "플래티" 
    }
  ]
});

SPA 환경 (React, Vue 등)

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

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

중요

SPA 모드로 공통 스크립트를 설치한 경우,
groobee.start()가 호출되지 않으면, groobee.action() 함수를 사용할 수 없습니다.
groobee.start() 함수를 호출하여 초기화 후 사용해야 합니다.
공통 스크립트 설치의 SPA 환경 섹션 문서를 참고해주세요.

SPA 웹 사이트 행동 이력 수집 방법 보기 ### 메인 페이지 (MA) - 메인 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 검색 결과 페이지 (SE) - 검색 결과 페이지 방문 이력은 검색어(keyword)와 함께 호출해주어야 됩니다.
groobee.action( "SE", { keyword : "겨울옷" } );
### 상품 상세 페이지 (VG) - 상품 상세 페이지 방문 이력은 상품 정보 목록과 함께 호출해주어야 됩니다. - 상품 정보 목록(goods)의 타입은 Goods[] 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 Goods 섹션를 참고해주세요. - 상품 상태(status) 필드는 품절이거나 상품이 판매상태가 아닐 경우에만 "SS" 값을 넣어주시면 됩니다. 정상 판매중인 상품의 경우에는 빈 문자열("")로 전달해주세요.
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[] 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 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[] 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 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[] 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 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 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 Category 섹션를 참고해주세요.
groobee.action( "CA", {
  category : {
    cateCd: "1234",
    cateNm: "티셔츠",
    catL: "1",
    cateLNm: "의류",
    catM: "12",
    cateMNm: "남성",
    catS: "123",
    cateSNm: "남성상의",
    catD: "1234",
    cateDNm: "티셔츠"
  }
});
### 장바구니 담기 (AC) - 장바구니 담기 이벤트는 장바구니에 담긴 상품 정보와 함께 호출해주어야 됩니다. - 상품 정보(goods)의 타입은 Goods 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 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 이며, 상세한 필드별 설명은 [스키마 문서](../specs/action/schema.md)의 Goods 섹션를 참고해주세요. - 상품수(cnt) 필드는 장바구니에서 제거된 수량을 의미합니다. - 예) 장바구니에 3개 담긴 상품을 모두 제거한 경우 cnt: 3 으로 전달
groobee( "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: "플래티" 
    }
  ]
});

Cafe24

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

CAFE24 웹 사이트 행동 이력 수집 방법 보기 ### 메인 페이지 (MA) - 메인 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 검색 결과 페이지 (SE) - 검색 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 상품 상세 페이지 (VG) - 상품 > 상품 상세 페이지 <div module="product_detail"> 바로 하단에 아래 스크립트를 삽입합니다. ##### PC [상품 상세 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/cafe24/cafe24-detail-pos-pc.png)
<!-- 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 -->
##### 모바일 [상품 상세 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/cafe24/cafe24-detail-pos-mo.png)
<!-- 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"> 바로 하단에 아래 스크립트를 삽입합니다. [장바구니 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/cafe24/cafe24-cart-pos.png)
<!-- 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"> 바로 하단에 아래 스크립트를 삽입합니다. [주문서 작성 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/cafe24/cafe24-order-pos.png)
<!-- 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 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. > **특이사항** > 모바일 간편(원터치) 주문 이력은 수집 할 수 없습니다. ### 카테고리 페이지 (CA) - 상품 > 상품 분류 페이지 <div module="product_headcategory"> 하단에 아래 스크립트를 삽입합니다. cafe24 유형은 현재 대카테고리 정보만 수집이 가능하며, 중/소/세부 카테고리 정보는 수집이 불가능합니다. [카테고리 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/cafe24/cafe24-category-pos.png)
<div class="groobeeCategory" style="display:none">
  <span class="groobeeCategoryName">{$name_1}</span>
  <span class="groobeeCategoryCode">{$param_1}</span>
</div>

고도몰

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

고도몰 웹 사이트 행동 이력 수집 방법 보기 ### 메인 페이지 (MA) - 메인 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 검색 결과 페이지 (SE) - 검색 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 상품 상세 페이지 (VG) - 상품 > 상품상세 페이지 > { # header } 하단에 아래 스크립트를 삽입합니다. [상품 상세 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/godo5/godo5-detail-pos.png)
<!-- 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) - 주문 > 장바구니 > <!--{ @ ..value_ }--> 하단에 아래 스크립트를 삽입합니다. [장바구니 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/godo5/godo5-cart-pos.png)
<!-- 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) - 주문 > 주문서 작성 > <!--{ @ ..value_ }--> 하단에 아래 스크립트를 삽입합니다. [주문서 작성 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/godo5/godo5-order-pos.png)
<!-- 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 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 카테고리 페이지 (CA) - 상품 > 상품 리스트 페이지 > { # header } 하단에 아래 스크립트를 삽입합니다. [카테고리 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/godo5/godo5-category-pos.png)
<!-- 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 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 검색 결과 페이지 (SE) - 검색 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 상품 상세 페이지 (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) - 기타페이지 > 장바구니 상품목록 > <!--{ @ cart->item }--> 하단에 아래 스크립트를 삽입합니다.
<!-- 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) - 기타/추가페이지 > 주문상품 > <!--{ @ cart->item }--> 하단에 삽입 아래 스크립트를 삽입합니다.
<!-- 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 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 카테고리 페이지 (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 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 검색 결과 페이지 (SE) - 중앙디자인 > 상품관련 > 상품 검색 결과 화면에 아래 스크립트를 삽입합니다. [검색 결과 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/makeshop/makeshop-search-pos.png)
<meta property="groobee:search_word" content="<!--/keyword/-->"/>
### 상품 상세 페이지 (VG) - 상품관련 > 상품상세페이지 > (PC) <div id="productDetail"> / (모바일) <main class=”shopdetail” id="productDetail"> 하단에 아래 스크립트를 삽입합니다. [상품 상세 이력 수집을 위한 스크립트 설치 위치 및 예시 (PC)](../images/installation/makeshop/makeshop-detail-pos-pc.png) [상품 상세 이력 수집을 위한 스크립트 설치 위치 및 예시 (모바일)](../images/installation/makeshop/makeshop-detail-pos-mo.png)
<!-- 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 화면에 스크립트를 삽입해줘야합니다. 아래 스크립트 삽입 방법들을 참고해주세요. - 주문관련 > 장바구니 화면에 아래 스크립트들을 삽입합니다. [장바구니 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/makeshop/makeshop-cart-pos.png)
<!-- 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 화면에 아래 스크립트들을 삽입합니다. [통합장바구니 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/makeshop/makeshop-cart-sum-pos.png)
<!-- 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 -->
> - **<!--/basket@input_quantity/-->** 는 Ctrl+F로 검색하여 기존에 있는 치환태그와 동일하게 입력해야합니다. > 예) 기존에 사용 중인 치환태그가 **<!--/basket@input_quantity(txt-span)/-->** 라면 Selector 스크립트도 이와 일치시켜야 합니다. > 일치시키지 않는다면 수량 변경 부분의 UI가 깨질 수 있습니다. > - 장바구니 설치 후 상품 수 인풋 박스 수량 테스트 > 만약 상품 수 인풋 박스가 정상적으로 바뀌지 않는다면 추가된 Groobee 스크립트로 인해 문제가 발생한 것입니다. > **<input name=”amount”>** 가 겹치면서 생기는 오류일 가능성이 높으므로. Groobee 장바구니 스크립트를 하단으로 이동시키면 됩니다. ### 주문서 작성 페이지 (OR) - 주문관련 > (고급형) 주문서 작성 (현재 사용하는 주문서 페이지)에 삽입합니다. [주문서 작성 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/makeshop/makeshop-order-pos.png)
<!-- 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 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 카테고리 페이지 (CA) - **상품 > 상품 분류 페이지** > 상품 분류 페이지에 아래 스크립트를 삽입합니다. [카테고리 이력 수집을 위한 스크립트 설치 위치 및 예시](../images/installation/makeshop/makeshop-category-pos.png)
<!-- 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)으로 정상 설치 되어 있다면, 아래 스크립트들을 삽입하여 행동 이력을 수집할 수 있습니다.

위사 (스마트윙) 웹 사이트 행동 이력 수집 방법 보기 ### 메인 페이지 (MA) - 메인 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 검색 결과 페이지 (SE) - 검색 페이지 방문 이력은 [웹 페이지 URL 등록](../prerequisites/web-page-url-registration.md)이 되어 있다면 자동으로 수집됩니다. 별도의 코드 삽입이 필요하지 않습니다. ### 장바구니 페이지 (VC) - HTML 편집 > 페이지 편집 > 주문관련 > 장바구니로 이동합니다. - 장바구니 에디터 하단의 페이지 코드 > 반복문 > {{$장바구니리스트}} 편집하기 > 리스트 반복 구문을 삽입합니다. [장바구니 편집 화면 위치](../images/installation/wisa/wisa-cart-pos.png) [장바구니 > 반복문 > 장바구니리스트 편집기 위치](../images/installation/wisa/wisa-cart-edt.png) [코드 삽입 예시](../images/installation/wisa/wisa-cart-exm.png)
<!-- 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 편집 > 페이지 편집 > 주문관련 > 주문서로 이동합니다. - 주문서 에디터 하단의 페이지 코드 > 반복문 > {{$장바구니리스트}} 편집하기 > 리스트 반복 구문을 삽입합니다. [주문서 작성 편집 화면 위치](../images/installation/wisa/wisa-order-pos.png) [주문서 > 반복문 > 장바구니리스트 편집기 위치](../images/installation/wisa/wisa-order-edt.png) [코드 삽입 예시](../images/installation/wisa/wisa-order-exm.png)
<!-- 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 편집 > 페이지 편집 > 상품관련 > 상품리스트로 이동해 아래 스크립트를 삽입합니다. [상품리스트 편집 화면 위치](../images/installation/wisa/wisa-category-pos.png) [코드 삽입 예시](../images/installation/wisa/wisa-category-exm.png)
<!-- Groobee Selector Script -->
<div class="groobeeCategory" style="display:none">
    <span class="groobeeCategoryName">{{$카테고리명}}</span>
    <span class="groobeeCategoryCode">{{$카테고리코드}}</span>
</div>
<!-- End of Groobee Selector Script -->
### 상품 상세 페이지 (VG) - 위사 쇼핑몰 관리자 페이지에 로그인 한 후, **디자인 > 디자인관리 > 스크립트 매니저**에 접속하여 상품상세 스크립트를 작성합니다. [공통 스크립트 설치 가이드](../installation/installation-web-common-script.md)를 참고하여 스크립트 매니저에 스크립트를 추가한 경우, 해당 스크립트 내에 아래 예시의 상품 상세 스크립트 부분을 추가로 작성해주시면 됩니다. [스크립트 매니저 위치](../images/installation/wisa/wisa-script-mgr-pos-2.png) [상품 상세 스크립트 예시](../images/installation/wisa/wisa-detail.png)
<!-- 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) - 위사 쇼핑몰 관리자 페이지에 로그인 한 후, **디자인 > 디자인관리 > 스크립트 매니저**에 접속하여 주문완료 스크립트를 작성합니다. [공통 스크립트 설치 가이드](../installation/installation-web-common-script.md)를 참고하여 스크립트 매니저에 스크립트를 추가한 경우, 해당 스크립트 내에 아래 예시의 주문완료 스크립트 부분을 추가로 작성해주시면 됩니다. [스크립트 매니저 위치](../images/installation/wisa/wisa-script-mgr-pos-2.png) [주문완료 스크립트 예시](../images/installation/wisa/wisa-purchase.png)
<!-- Groobee Selector Script -->
<meta property="groobee:order_no" content="{주문번호}">
<!-- End of Groobee Selector Script -->

다음 단계