# 🎵 틱톡

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

{% hint style="warning" %}
고도몰의 경우 아직 틱톡 카탈로그 광고를 위한 피드가 개발되어 있지 않습니다.
{% endhint %}

## 관련 문서

* **픽셀 개발 가이드:** <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>

## 틱톡 픽셀 코드 예시

{% hint style="info" %}
디자인 및 모바일샵, 즉 PC 및 모바일 모두 작업해주셔야 합니다.
{% endhint %}

### 상단 공통

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

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

<figure><img src="/files/7p6rmMS2zU5PsqutzpnU" alt=""><figcaption></figcaption></figure>

```javascript
<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>
```

### 장바구니 추가

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

<figure><img src="/files/6xaufwDWuKwQffzrpGt2" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

<pre class="language-javascript"><code class="lang-javascript"><strong>&#x3C;script>
</strong>  if (tiktokCartItems.length > 0) {
    ttq.track("AddToCart", {
      contents: tiktokCartItems,
      content_type: "product",
      value: Number("{=totalSettlePrice}".replace(/,/g, "")),
      currency: "KRW",
    });
  }
&#x3C;/script>
</code></pre>

### 주문 완료

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

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

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


---

# 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/godomall-tiktok-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.