# 타불라 픽셀

{% hint style="info" %}
예시 코드들은 스크립트 동작을 보장하지 않습니다.
{% endhint %}

{% hint style="info" %}
해당 문서는 타불라 purchase(구매) 이벤트만 기입합니다.
{% endhint %}

## 관련 문서

* **타불라 픽셀 문서** 
  * <https://help.taboola.com/hc/en-us/articles/360003469854-Taboola-Pixel-Overview>
* **타불라 픽셀 고도몰 가이드:** 전환 스크립트 발급 방법 등은 동일하니 해당 문서를 참조해주세요.
  * <https://www.nhn-commerce.com/image_view.php?image=s58iq11lmxzs10rv.pdf>

## 공통 스크립트 발급 방법

{% hint style="info" %}
자세한 사항은 타불라 가이드를 참조해주세요.
{% endhint %}

① 타불라 관리자 페이지 접속 후, 단 트래킹 메뉴 클릭 하여 이동

② 타불라 스크립트 발급을 위해 \[계정 추적 설정] 버튼을 클릭 합니다.

<figure><img src="https://896676439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKzKiYueTu9AEajpTmGg%2Fuploads%2Fkvy32FQ45tGGb4YuEAcP%2Fimage.avif?alt=media&#x26;token=0d77dcd3-7bd8-4d4c-b697-ef1ef52b8300" alt=""><figcaption></figcaption></figure>

③ 원하는 스크립트 설치 방식을 선택 합니다.

④ 계속 버튼을 눌러 이동 합니다.

⑤ 해당 코드를 클릭하여 복사합니다.

<figure><img src="https://896676439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKzKiYueTu9AEajpTmGg%2Fuploads%2F26QXOcoiGtWYpp9kJRK0%2Fimage.png?alt=media&#x26;token=9cfc30a9-bf3d-46b3-b026-15e5da74304e" alt=""><figcaption></figcaption></figure>

## 전환 스크립트 발급 방법

① 타불라 관리자페이지에서최상단 트래킹 메뉴 클릭 하여 이동합니다.

② \[+ 새로운 전환] 버튼을 클릭하여 전환을 생성합니다.

<figure><img src="https://896676439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKzKiYueTu9AEajpTmGg%2Fuploads%2FkOXzgxPGXeuj3YMbFaC4%2Fimage%20(1).png?alt=media&#x26;token=8f7da2e6-403f-4e24-8021-8c3f483cd97b" alt=""><figcaption></figcaption></figure>

③ 생성할 전환 이름을 기입합니다.

④ 전환 유형을 선택 합니다.

⑤ 전환 조건을 선택합니다. (자세한 사항은 광고주의 상황에 따라 달라집니다.)

⑥고정값: 전환을 동적인 가치가 아닌 고정 가치로 인식하게 하려면 기입합니다.

⑦카테고리: 검색, 등록완료, 구매 등 생성하고자 하는 전환의 카테고리를 선택합니다.

⑧이벤트 이름: 고유 이벤트 이름을 입력 합니다.

⑨클릭 후 전환 기간: 전환 기여 기간을 입력합니다.

⑩조회 후 전환 기간: 조회 후 전환 기여 기간을 입력 합니다.

<figure><img src="https://896676439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKzKiYueTu9AEajpTmGg%2Fuploads%2F9Q2LB3SHKJjoOCThuOkn%2Fimage%20(2).png?alt=media&#x26;token=b528692b-48cd-46bd-9e60-85ce9af3bda3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://896676439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKzKiYueTu9AEajpTmGg%2Fuploads%2FMuxqUCsdkWnINoUqA8q4%2Fimage%20(3).png?alt=media&#x26;token=cf57c942-e462-4fe2-aba3-0c9135f78d36" alt=""><figcaption></figcaption></figure>

① 총 전환수: 총 전환 수에 포함을 클릭할 경우

해당 전환이 타불라의 입찰가 최적화, 머신 러닝 등에 사용 됩니다.

② 합계: 해당 전환의 가치를 보고서에 포함할지 여부를 선택 합니다.

③ 잠재고객 속성: 해당 전환을 통해 잠재 고객을 생성합니다.

제외를 선택하면 해당 전환을 바탕으로 잠재 고객이 생성 되지 않습니다.

④ 집계 유형: 마지막 전환 기여만 포함할지,

균등 전환 기여를 부여할지 선택합니다.

<figure><img src="https://896676439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKzKiYueTu9AEajpTmGg%2Fuploads%2Fd4d9hdl4nCSHShASqZNx%2Fimage%20(4).png?alt=media&#x26;token=99e000a9-4634-47b3-a83a-4d885dc85c69" alt=""><figcaption></figcaption></figure>

Final. 하기와 같이 이벤트 코드 스니펫을 발급 받으실 수 있습니다.

<figure><img src="https://896676439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKzKiYueTu9AEajpTmGg%2Fuploads%2FGUwobnT9rO0ei8ocaU2n%2Fimage%20(5).png?alt=media&#x26;token=9651c19c-5927-4668-8eb5-e88470aa7471" alt=""><figcaption></figcaption></figure>

***

## 타불라 픽셀 예시

### 상단 공통

{{광고주아이디}} 부분은 타불라에서 발급 받은 광고주 아이디로 변경 (type: int)

```javascript
<!-- 예시코드 -->
<script type="text/javascript">
  globalThis._tfa = globalThis._tfa || [];
  globalThis._tfa.push({ notify: "event", name: "page_view", id: {{광고주아이디});
  !(function (t, f, a, x) {
    if (!document.getElementById(x)) {
      t.async = 1;
      t.src = a;
      t.id = x;
      f.parentNode.insertBefore(t, f);
    }
  })(
    document.createElement("script"),
    document.getElementsByTagName("script")[0],
    "//cdn.taboola.com/libtrc/unip/{{광고주아이디}/tfa.js",
    "tb_tfa_script"
  );
</script>
```

### 주문 완료 페이지

{{광고주아이디}} 부분은 타불라에서 발급 받은 광고주 아이디로 변경 (type: int)

```javascript
<!-- 예시 코드 -->
<script>
    try {
      const { orderOptionsGroupByPartner = [] } = sb.order;
  
      const orderProducts = orderOptionsGroupByPartner.flatMap(
        ({ orderOptionsGroupByDelivery }) =>
          orderOptionsGroupByDelivery.flatMap(({ orderOptions }) => orderOptions)
      );
  
      const orderid = sb.order.orderNo;
  
      const productNos = orderProducts.map(({ productNo }) => String(productNo));
  
      const revenue = orderProducts.reduce((accumulator, product) => {
        return accumulator + (product.orderCnt * product.price.buyPrice);
      }, 0);
  
      const quantity = orderProducts.reduce((acc, product) => {
        acc += product.orderCnt ? product.orderCnt : 0;
        return acc;
      }, 0);
  
      _tfa.push({
        notify: "event",
        name: "purchase",
        id: "{{광고주아이디}}", // 광고주 아이디로 변경해주세요(type:int)
        orderid,
        quantity,
        revenue,
        currency: "KRW",
      });
    } catch (error) {
      console.error("An error occurred:", error);
    }
</script>
```