# 🥕당근 전환 추적 코드

{% embed url="<https://youtu.be/yWUea1Peh2w>" %}

* 전환 추적 코드란?: [바로가기>](https://business.daangn.com/edu/vod/81155703-4194-4d45-ae26-55655817d43a/%EB%8B%B9%EA%B7%BC-%EC%A0%84%EB%AC%B8%EA%B0%80%EB%AA%A8%EB%93%9C-%EC%A0%84%ED%99%98%EC%B6%94%EC%A0%81%EC%BD%94%EB%93%9C)
* 전환 추적 코드 연동 가이드: [바로가기>](https://bizschool.daangn.com/tracking-guide)
* 전환 추적 코드 생성 방법: [바로가기>](https://bizschool.daangn.com/19128c3a-9f8f-8154-b217-d03d2f6ddf5c)
* 전환 추적 코드 헬퍼: [바로가기>](https://bizschool.daangn.com/18f28c3a-9f8f-80c6-b5ca-f5df6fea74eb)

## 당근 전환 추적 코드 예시

{% hint style="warning" %}
예시 코드이며 동작을 보장하지 않습니다.
{% endhint %}

{% hint style="success" %}
모바일 페이지가 있다면, 디자인 및 모바일 쇼핑몰 모두 작업해주셔야 합니다.
{% endhint %}

### 공통 스크립트 (ViewPage and Config)

* 기본설정 > 기본정책 > 외부스크립트 등록을 클릭 후, PC쇼핑몰 및 모바일 쇼핑몰에 적용합니다.
* 전환 추적 코드 ID는 당근에서 발급한 코드로 변경해주셔야 합니다.

<figure><img src="/files/8ALhLk8C6E2CJyMN3m0U" alt=""><figcaption></figcaption></figure>

```html
<!-- Danggeun Market Common Code -->
<script src="https://karrot-pixel.business.daangn.com/0.2/karrot-pixel.umd.js">
</script>
<script>
  window.karrotPixel.init("전환 추적 코드 ID"); // 당근에서 발급 받은 전환추적 코드 ID 입력.
  window.karrotPixel.track("ViewPage");
</script>
<!-- Danggeun Market Common Code -->
```

### 상품상세페이지 (ViewContent)

* 하기와  같이 상품상세화면에적용합니다.&#x20;

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

```html
<!-- Danggeun Market ViewContent Code -->
<script>
  window.karrotPixel.track("ViewContent", {
    id: "{=goodsView['goodsNo']}",
  });
</script>
<!-- Danggeun Market ViewContent Code -->
```

### 장바구니 페이지 (AddToCart)

```
장바구니 버튼 클릭 또는 폼 데이터 전송 시 스크립트가 실행되어야 하지만, 
쇼핑몰의 커스텀 설정에 따라 선택자(selector)나 위치가 변경될 수 있습니다. 
따라서, 장바구니에 상품이 존재할 경우에만 스크립트가 동작하도록 설정하는 
간단한 예시는 다음과 같습니다.
```

1. 하기와 같이 코드 추가

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

```html
<!-- Danggeun Market AddToCart Code -->
<script>
  const karrotPixelAddToCartItems = [];
</script>
<!-- Danggeun Market AddToCart Code -->
```

2. \<!--{@ ..value\_}--> 하단에 하기와 같이  코드 추가

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

```html
<!-- Danggeun Market AddToCart Code -->
<script>
  karrotPixelAddToCartItems.push({
    id: "{=...goodsNo}",
    name: "{=gd_remove_only_tag(...goodsNm)}",
    quantity: "{=...goodsCnt}",
    price: "{=...price['goodsPriceSubtotal']}".replace(/,/g, ""),
  });
</script>
<!-- Danggeun Market AddToCart Code -->
```

3. 페이지 하단에 하기 코드 추가

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

```html
<!-- Danggeun Market AddToCart Code -->
<script>
  if (karrotPixelAddToCartItems.length > 0) {
    window.karrotPixel.track("AddToCart", {
      products: karrotPixelAddToCartItems,
    });
  }
</script>
<!-- Danggeun Market AddToCart Code -->
```

### 회원가입완료(CompleteRegistration)

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

```html
<!-- Danggeun Market CompleteRegistration Code -->
<script>
  window.karrotPixel.track("CompleteRegistration");
</script>
<!-- End Danggeun CompleteRegistration Market Code -->
```

### 주문완료(Purchase)

* 하기와 같이 주문완료페이지에 코드를 적용합니다.

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

```html
<!-- Danggeun Market Purchase Code -->
<script>
  let karrotPixelPurchaseItemsQty = 0;
  
  <!--{ @ orderInfo.goods }-->
    karrotPixelPurchaseItemsQty += {=.goodsCnt};
  <!--{ / }-->

  let karrotPixelPurchaseItems = [
        <!--{ @ orderInfo.goods }-->
        {
            'id': "{=.goodsNo}",
            'name': "{=.goodsNm}",
            'quantity': "{=.goodsCnt}",
            'price': "{=.goodsPrice}".replace(/\.00$/, ''),
        },
        <!--{ / }-->
    ];

    window.karrotPixel.track("Purchase", {
      total_price: "{=orderInfo.settlePrice}".replace(/\.00$/, ''),
      total_quantity: String(karrotPixelPurchaseItemsQty),
      products: karrotPixelPurchaseItems,
    });
</script>
<!-- End Danggeun Market Purchase Code -->
```


---

# 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://marketing-help.nhn-commerce.com/conversion-tracking-setup/godomall-script-setup/karrot-pixel.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.