🥕당근 전환 추적 코드

전환 추적을 위한 당근 전환 추적 코드 설치 방법

• 전환 추적 코드란?: 바로가기>

• 전환 추적 코드 연동 가이드: 바로가기>

• 전환 추적 코드 생성 방법: 바로가기>

• 전환 추적 코드 헬퍼: 바로가기>

당근 전환 추적 코드 예시

예시 코드이며 동작을 보장하지 않습니다.

모바일 페이지가 있다면, 디자인 및 모바일 쇼핑몰 모두 작업해주셔야 합니다.

공통 스크립트 (ViewPage and Config)

• 기본설정 > 기본정책 > 외부스크립트 등록을 클릭 후, PC쇼핑몰 및 모바일 쇼핑몰에 적용합니다.

• 전환 추적 코드 ID는 당근에서 발급한 코드로 변경해주셔야 합니다.

<!-- 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)

• 하기와 같이 상품상세화면에적용합니다.

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

장바구니 페이지 (AddToCart)

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

1. 하기와 같이 코드 추가

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

1. <!--{@ ..value_}--> 하단에 하기와 같이 코드 추가

<!-- 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 -->

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

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

회원가입완료(CompleteRegistration)

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

주문완료(Purchase)

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

<!-- 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 -->