틱톡 픽셀

샵바이 변수를 이용한 틱톡 픽셀 수동 적용 가이드

관련 문서

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

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

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

틱톡 픽셀 예시

상단 공통

<!-- 예시 코드 -->
<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>

장바구니 페이지

<!-- 예시 코드 -->
<script>
  try {
    const {
      deliveryGroups = [],
      price: { buyAmt = 0 },
    } = sb.cart;

    const contents = [];

    if (deliveryGroups.length > 0) {
      deliveryGroups
        .flatMap(({ orderProducts }) =>
          orderProducts.flatMap((product) =>
            product.orderProductOptions.map(({ orderCnt }) => ({
              content_name: product.productName,
              content_id: product.productNo,
              quantity: orderCnt,
              price: product.buyAmt,
            }))
          )
        )
        .forEach((content) => contents.push(content));

      ttq.track("AddToCart", {
        contents,
        content_type: "product",
        value: buyAmt,
        currency: "KRW",
      });
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

주문 완료 페이지

<!-- 예시 코드 -->
<script>
  try {
    if (sb.order) {
      const {
        orderNo,
        payInfo: { payAmt },
        orderOptionsGroupByPartner,
      } = sb.order;

      const tikTokOrderItems = orderOptionsGroupByPartner.flatMap(
        ({ orderOptionsGroupByDelivery }) =>
          orderOptionsGroupByDelivery.flatMap(({ orderOptions }) =>
            orderOptions.map((options) => {
              const {
                productNo: content_id,
                productName: content_name,
                price: { immediateDiscountAmt: discount, buyPrice: price },
                orderCnt: quantity,
              } = options;

              return {
                content_id: String(content_id),
                content_name,
                price,
                quantity,
              };
            })
          )
      );

      ttq.track("CompletePayment", {
        contents: tikTokOrderItems,
        content_type: "product",
        value: payAmt,
        currency: "KRW",
      });
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

회원가입 완료 페이지

<!-- 예시 코드 -->
<script>
  ttq.track("CompleteRegistration");
</script>

주문서 작성/결제 페이지

<!-- 예시 코드 -->
<script>
  ttq.track("InitiateCheckout");
</script>