🎵 틱톡

틱톡 픽셀 적용 가이드

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

고도몰의 경우 아직 틱톡 카탈로그 광고를 위한 피드가 개발되어 있지 않습니다.

관련 문서

• 픽셀 개발 가이드: https://business-api.tiktok.com/portal/docs?id=1739585702922241

• 틱톡 광고 성과 측정 가이드: https://shorturl.at/uzCP2

• 샵바이 변수 조회 가이드: https://admin-remote.shopby.co.kr/popup/variable-guide

• 틱톡 픽셀 헬퍼: https://chromewebstore.google.com/detail/tiktok-픽셀-도우미/aelgobmabdmlfmiblddjfnjodalhidnn?pli=10

틱톡 픽셀 코드 예시

디자인 및 모바일샵, 즉 PC 및 모바일 모두 작업해주셔야 합니다.

상단 공통

공통레이아웃 혹은 외부스크립트를 이용해 적용. (픽셀 아이디를 변경해주시기 바랍니다.)

PC 쇼핑몰 및 모바일 쇼핑몰에 모두 적용해주셔야 합니다.

<script>
  !(function (w, d, t) {
    w.TiktokAnalyticsObject = t;
    var ttq = (w[t] = w[t] || []);
    (ttq.methods = [
      "page",
      "track",
      "identify",
      "instances",
      "debug",
      "on",
      "off",
      "once",
      "ready",
      "alias",
      "group",
      "enableCookie",
      "disableCookie",
    ]),
      (ttq.setAndDefer = function (t, e) {
        t[e] = function () {
          t.push([e].concat(Array.prototype.slice.call(arguments, 0)));
        };
      });
    for (var i = 0; i < ttq.methods.length; i++)
      ttq.setAndDefer(ttq, ttq.methods[i]);
    (ttq.instance = function (t) {
      for (var e = ttq._i[t] || [], n = 0; n < ttq.methods.length; n++)
        ttq.setAndDefer(e, ttq.methods[n]);
      return e;
    }),
      (ttq.load = function (e, n) {
        var i = "https://analytics.tiktok.com/i18n/pixel/events.js";
        (ttq._i = ttq._i || {}),
          (ttq._i[e] = []),
          (ttq._i[e]._u = i),
          (ttq._t = ttq._t || {}),
          (ttq._t[e] = +new Date()),
          (ttq._o = ttq._o || {}),
          (ttq._o[e] = n || {});
        var o = document.createElement("script");
        (o.type = "text/javascript"),
          (o.async = !0),
          (o.src = i + "?sdkid=" + e + "&lib=" + t);
        var a = document.getElementsByTagName("script")[0];
        a.parentNode.insertBefore(o, a);
      });

    ttq.load("{{픽셀아이디를 입력해주세요}}"); // 틱톡에서 발급 받은 픽셀 아이디 입력
    ttq.page();
  })(window, document, "ttq");
</script>

장바구니 추가

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

1. 상기와 같이 하기 코드 추가

<script>
  const tiktokCartItems = [];
</script>

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

<script>
   tiktokCartItems.push({
    content_id: "{=...goodsNo}",
    content_name: "{=gd_remove_only_tag(...goodsNm)}",
    quantity: {=...goodsCnt},
    price:  Number("{=...price['goodsPriceSubtotal']}".replace(/,/g,'')),
  });
</script>

1. 위와같이페이지 최하단에 하기 코드 추가

<script>
  if (tiktokCartItems.length > 0) {
    ttq.track("AddToCart", {
      contents: tiktokCartItems,
      content_type: "product",
      value: Number("{=totalSettlePrice}".replace(/,/g, "")),
      currency: "KRW",
    });
  }
</script>

주문 완료

주문완료페이지 최하단에 하기 픽셀 코드 적용

<!-- 예시 코드 -->
<script>
  let tiktokGoodsInfo = [
      <!--{ @ orderInfo.goods }-->
        {
        content_id: '{=.goodsNo}',
        content_name: '{=.goodsNm}',
        quantity: {=.goodsCnt},
        price: {=.goodsPrice}
        },
      <!--{ / }-->
  ];

    ttq.track("CompletePayment", {
      contents: tiktokGoodsInfo,
      content_type: "product",
      value: {=orderInfo.settlePrice},
      currency: "KRW",
    });
</script>