> For the complete documentation index, see [llms.txt](https://marketing-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://marketing-help.nhn-commerce.com/conversion-tracking-setup/godomall-script-setup/karrot-pixel.md).

# 🥕당근 전환 추적 코드

{% 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 -->
```