# 웹사이트 연동 가이드

{% stepper %}
{% step %}

### 전환 추적 코드 생성

\[전문가모드] → \[광고 도구] → \[전환 추적 관리]에서 전환 추적 코드를 생성해 주세요. 생성된 공통 스크립트와 전환 추적 코드 ID를 이후 단계에서 사용해요.

> 생성 후에도 \[전환 추적 관리] → 해당 코드 선택 → \[연동 코드 보기]에서 스크립트를 다시 확인할 수 있어요.
> {% endstep %}

{% step %}

### 공통 스크립트 설치

공통 스크립트는 웹사이트 모든 페이지에서 방문 이벤트를 수집하는 기본 코드예요. 모든 웹페이지의 `<head>` 와 `</head>` 태그 사이에 삽입해 주세요.

```html
<!-- Danggeun Market Code -->
<script src="https://karrot-pixel.business.daangn.com/karrot-pixel.js"></script>
<script>
  window.karrotPixel.init('전환 추적 코드 ID');
  window.karrotPixel.track('ViewPage');
</script>
<!-- End Danggeun Market Code -->
```

설치 후 \[전환 추적 관리]에서 방문 이벤트가 **수집중** 상태로 바뀌는지 확인해 주세요.

**설치 후 체크리스트**

* 전환 추적 코드에 등록한 도메인과 웹사이트 도메인이 일치하는지 확인해 주세요.
  * 도메인이 정확히 일치해야 수집이 가능해요. (예: 대소문자 오기입, 오타 → 수집 불가)
* PC·모바일 도메인이 다르다면 각각 모두 등록해야 해요.
* 서브도메인이 여러 개인 경우 `*`를 포함해 등록할 수 있어요. (예: `https://*.daangn.com`)
* 한글 도메인은 퓨니코드로 변환해 입력해야 해요. (예: `당근.com` → `xn--6i0bp8g.com`)
* 하나의 웹사이트에는 전환 추적 코드를 하나만 설치하는 것을 권장해요.

{% hint style="info" %}
당근 픽셀 헬퍼(크롬 확장 프로그램)를 활용하면 스크립트가 정상 설치되었는지 쉽게 확인할 수 있어요.&#x20;

[**당근 픽셀 헬퍼 사용 가이드**](/business.daangn/ads-pro/tools/tracking/pixel.md)
{% endhint %}
{% endstep %}

{% step %}

### 이벤트 스크립트 설치

{% hint style="info" %}
코드 작성이 어려운 경우, 화면 위에서 버튼·URL을 직접 선택해 이벤트를 추가할 수 있어요.

자세한 내용은 [**이벤트 매핑 도구 사용 가이드**](/business.daangn/ads-pro/tools/tracking/event-mapping.md)를 참고해 주세요.
{% endhint %}

방문 이벤트 외에 추가 전환 이벤트를 수집하려면 각 이벤트가 발생하는 지점에 아래 스크립트를 삽입해야 해요.

| 이벤트       | 스크립트                                                |
| --------- | --------------------------------------------------- |
| 로그인       | `window.karrotPixel.track('Login');`                |
| 회원가입      | `window.karrotPixel.track('CompleteRegistration');` |
| 상세 페이지 조회 | `window.karrotPixel.track('ViewContent');`          |
| 장바구니 담기   | `window.karrotPixel.track('AddToCart');`            |
| 구매        | `window.karrotPixel.track('Purchase');`             |
| 설치        | `window.karrotPixel.track('Install');`              |
| 잠재고객 수집   | `window.karrotPixel.track('Lead');`                 |
| 서비스 신청    | `window.karrotPixel.track('SubmitApplication');`    |

각 스크립트는 아래 형식으로 삽입해요.

```html
<!-- Danggeun Market Code -->
<script>
  window.karrotPixel.track('이벤트명');
</script>
<!-- End Danggeun Market Code -->
```

설치 후 \[전환 추적 관리]에서 해당 이벤트가 **수집중** 상태인지 확인해 주세요.

> 상품 판매 늘리기 캠페인을 집행하는 경우, 상세 페이지 조회·장바구니 담기·구매 이벤트와 함께 상품 ID·수량·구매 금액 등 파라미터도 함께 설정하는 것을 권장해요.

{% hint style="info" %}
각 이벤트별 파라미터 설정 방법은 이벤트 스크립트 설치 가이드를 참고해 주세요.

[**이벤트 스크립트 설치 가이드**](/business.daangn/ads-pro/tools/tracking/event.md)

구글 태그 매니저(GTM)를 사용하는 경우, GTM 연동 가이드를 참고해 주세요.&#x20;

[**구글 태그 매니저(GTM) 연동 가이드**](/business.daangn/ads-pro/tools/tracking/gtm.md)

호스팅 업체(카페24, 메이크샵, 플렉스지 등)를 사용하는 경우, 호스팅 업체별 연동 가이드를 참고해 주세요.

[**호스팅 업체별 스크립트 설치 방법**](/business.daangn/ads-pro/tools/tracking/hosting.md)
{% endhint %}
{% endstep %}
{% endstepper %}


---

# 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://businessdaangn.gitbook.io/business.daangn/ads-pro/tools/tracking/website.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.
