# 방문자 통계 스크립트 설치 가이드

{% hint style="info" %}
**방문자 통계 스크립트 설치 안내**

* 쇼핑몰 방문자에 대한 데이터 수집을 위해서는 방문자 통계 스크립트 설치가 필요합니다.
* 샵바이 기본 스킨을 사용하시는 경우 방문자 통계 스크립트가 기본적으로 추가되어있으나,\
  **커스텀 스킨을 적용한 쇼핑몰** 또는 **헤드리스**의 경우 아래 가이드에 따라 스크립트를 직접 설치하셔야 방문자 통계 앱 서비스를 이용하실 수 있습니다.
  {% endhint %}

## 1. 방문자 통계 스크립트 확인 <a href="#eb-b0-a9-eb-ac-b8-ec-9e-90-ed-86-b5-ea-b3-84-ec-8a-a4-ed-81-ac-eb-a6-bd-ed-8a-b8-ec-84-a4-ec-b9-98-e" id="eb-b0-a9-eb-ac-b8-ec-9e-90-ed-86-b5-ea-b3-84-ec-8a-a4-ed-81-ac-eb-a6-bd-ed-8a-b8-ec-84-a4-ec-b9-98-e"></a>

* 방문자 통계 앱 실행 후 서비스 관리 화면에서 방문자 통계 스크립트를 확인할 수 있습니다.

{% code overflow="wrap" %}

```javascript
setStatisticsLogging() {
      const SCRIPT_URL = 'https://rl3flznkr.toastcdn.net/shopby-statistics-recorder.js';
      const scriptElement = document.createElement('script');
      scriptElement.async = true;
      scriptElement.src = SCRIPT_URL;
      document.head.append(scriptElement);

      scriptElement.addEventListener('load', () => {
        if (typeof window.shopbyStatistics === 'function') {
          window.shopbyStatistics({
            clientId : ${클라이언트 아이디},
            memberNo : ${로그인 한 고객의 memberNo},
          });
        }
      });
    },
```

{% endcode %}

* 클라이언트 아이디
  * 스크립트 내 자동으로 삽입되어 있습니다.
* 로그인한 고객의 memberNo
  * 커스텀 스킨이나 헤드리스의 경우 회원 번호에 대해 사용하는 변수가 다를 수 있습니다. 사용 중인 변수를 이용해 로그인 한 회원 정보가 입력되도록 세팅해 주세요.
    * 로그인한 쇼핑몰 회원의 `memberNo`를 설정해 주세요.
    * 로그인하지 않은 회원의 경우 빈 문자열(`''`)로 설정해 주세요.

***

## 2. 방문자  통계 스크립트 복사

* 방문자 통계 스크립트를 복사해 주세요.

***

## 3. **복사한 스크립트 설치 및 통계 데이터를 쌓기 위한 함수 호출**

* 복사한 스크립트는 쇼핑몰 페이지를 초기화(initialize)할 때, 스크립트를 문서(document) 내 head 요소에 추가해 주세요.
* 방문자 통계를 위한 스크립트가 모두 로드되면 `shopbyStatistics` 메서드가 글로벌에 등록되어 있어, 호출 가능한 상태가 됩니다.
* 방문자 통계에 필요한 페이지에서 아래 메서드를 호출해주시면 방문자 통계 데이터가 쌓입니다.

{% code overflow="wrap" %}

```javascript
  window.shopbyStatistics({
    clientId : ${클라이언트 아이디},
    memberNo : ${로그인 한 고객의 memberNo},
  });
```

{% endcode %}

* SPA(단일 페이지 애플리케이션)에서는 필요한 스크립트를 한 번만 불러오면 됩니다.
* MPA(다중 페이지 애플리케이션)에서는 각 페이지, 즉 문서마다 방문자 통계에 필요한 스크립트를 불러와야 합니다. 문서마다 페이지를 초기화할 때 `setStatisticsLogging` 함수를 호출해 주세요.

***

## 4. **스크립트 설치 확인**

* 크롬 > 개발자 도구 > 네트워크 탭
  * 통계 데이터를 쌓기 위한 스크립트(`shopby-statistics-recorder.js`)를 불러오고 특정 URL(`http.msg`)로 통계 데이터를 잘 전달하고 있는지 확인할 수 있습니다.

<figure><img src="/files/zspjEIHHVfq1reIQ4bJI" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/emPqiiI9zhKx7bru9I4J" alt=""><figcaption></figcaption></figure>

***

## 5. 방문자 통계 데이터 확인

* 스크립트 최초 설치 후 쇼핑몰에 접속한 방문자가 있어야 스크립트가 활성화 처리되어 쇼핑몰 방문자에 대한 데이터 수집이 가능합니다.
* 스크립트 설치를 완료하신 후 쇼핑몰에 1번 접속하시는 것을 권장합니다.
* 스크립트가 활성화되어 수집 된 방문자 데이터는 익일 방문자 통계 앱에서 확인하실 수 있습니다. (당일 조회 불가)

***

방문자 통계 스크립트 설치 관련 추가 문의사항은 NHN 커머스 > [1:1문의](https://support.nhn-commerce.com/inquiry/contact)로 문의 부탁 드립니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://store-help.nhn-commerce.com/app/statistics/visitor_script.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
