> For the complete documentation index, see [llms.txt](https://marketing-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://marketing-help.nhn-commerce.com/conversion-tracking-setup/godomall-script-setup/facebook-and-instagram.md).

# 메타(Facebook\&Instagram) 픽셀

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

{% hint style="info" %}
공통(config), 상품상세, 장바구니추가, 결제완료, 회원가입 완료 코드만 제공합니다.

장바구니 추가 코드의 경우 상품상세페이지에서 버튼 클릭 하여 작동하게도 할 수 있습니다만 

본 문서는 최대한 복사 붙여넣기 편하게 하기위하여 작성 되었습니다.
{% endhint %}

## 관련 문서

* 메타 픽셀헬퍼:<https://chromewebstore.google.com/detail/meta-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?pli=1>
* 메타 픽셀 문서:
  * <https://developers.facebook.com/docs/meta-pixel/>

## 공통(Config 및 PageView)

* 고도몰 관리자페이지 > 기본설정 > 외부서비스 설정 > 외부스크립트 등록 버튼을 클릭 후, 상단 공통영역에 PC 쇼핑몰과 모바일 쇼핑몰에 적용해주세요

{% hint style="danger" %}
하기 코드에서 픽셀아이디 부분을 사용하실 픽셀아이디로 변경해주세요
{% endhint %}

```javascript
// 픽셀아이디 입력 부분 변경 필수
<script>
  !(function (f, b, e, v, n, t, s) {
    if (f.fbq) return;
    n = f.fbq = function () {
      n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
    };
    if (!f._fbq) f._fbq = n;
    n.push = n;
    n.loaded = !0;
    n.version = "2.0";
    n.queue = [];
    t = b.createElement(e);
    t.async = !0;
    t.src = v;
    s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s);
  })(
    window,
    document,
    "script",
    "https://connect.facebook.net/en_US/fbevents.js"
  );
  fbq("init", "픽셀아이디"); // ""(쌍따옴표)는 지우지 마세요.
  fbq("track", "PageView");
</script>
<noscript
  ><img
    height="1"
    width="1"
    style="display: none"
    src="https://www.facebook.com/tr?id=픽셀아이디&ev=PageView&noscript=1"
/></noscript>
```

<figure><img src="/files/6RN0iA9KiUPue2LNItEJ" alt=""><figcaption><p>외부 스크립트 등록 화면</p></figcaption></figure>

## 상품상세페이지

* 고도몰 관리자페이지 > 디자인, 모바일샵에 각각 적용
* 현재 사용하고 있는 스킨을 선택 한 후, 상품 > 상품상세화면(good/goods\_view\.html)에 적용

```javascript
// ViewContent Event
<!-- Facebook Pixel viewContent Code -->
<script>
  try {
    fbq("track", "ViewContent", {
        content_ids: ["{=goodsView['goodsNo']}"],
        content_type: "product",
        value: {=goodsView['goodsPrice']},
        currency: "KRW",
    });
  } catch (error) {
    console.error("FB Pixel ViewContent Error: ", error);
  }
</script>
```

<figure><img src="/files/CzHF1c0yPBCU9dbjdjvV" alt=""><figcaption><p>상품상세화면 적용예시</p></figcaption></figure>

## 장바구니 추가

* 장바구니 페이지에 등록 하며, 상품이 있을 경우만 동작
* 고도몰 관리자페이지 > 디자인, 모바일샵에 각각 적용
* 현재 사용하고 있는 스킨을 선택 한 후, 주문 > 장바구니(order/cart.html)에 적용

### 장바구니 페이지 상단

```javascript
// AddToCart
<!-- Facebook Pixel Add to Cart Code NHN Commerce -->
<script>
  const fbItems = [];
</script>
```

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

### 치환코드 \<!--{@..value\_ }--> 하단

```javascript
// AddToCart
<!-- Facebook Pixel Add to Cart Code NHN Commerce -->
<script>
  fbItems.push("{=...goodsNo}");
</script>
```

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

### 장바구니페이지 최하단

```javascript
// AddToCart
<!-- Facebook Pixel Add to Cart Code NHN Commerce -->
<script>
  try {
    if (fbItems.length > 0) {
      fbq("track", "AddToCart", {
        content_ids: fbItems,
        content_type: "product",
        value: Number("{=totalGoodsPrice}".replace(/['원', ',']/g, "")),
        currency: "KRW",
      });
    }
  } catch (error) {
    console.error("FB Pixel AddToCart Error: ", error);
  }
</script>
```

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

## 회원가입 완료

* 고도몰 관리자페이지 > 디자인, 모바일샵에 각각 적용
* 현재 사용하고 있는 스킨을 선택 한 후, 회원 > 가입완료(member/join\_ok.html)에 적용

```javascript
// CompleteRegistration
<!-- Facebook Pixel JoinOK Code -->
<script>
  try {
    fbq("track", "CompleteRegistration", {
      currency: "KRW",
      content_name: "JoinOK",
      value: "1",
    });
  } catch (error) {
    console.error("FB Pixel CompleteRegistration Error: ", error);
  }
</script>
```

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

## 구매완료(주문완료)

* 고도몰 관리자페이지 > 디자인, 모바일샵에 각각 적용
* 현재 사용하고 있는 스킨을 선택 한 후, 주문 > 주문완료(order/order\_end.html)에 적용

```javascript
// Purchase
<!-- Facebook Pixel Purchase Code NHN Commerce -->
<script>
  const goodsNo = [
      <!--{ @ orderInfo.goods }-->
          '{=.goodsNo}',
      <!--{ / }-->
    ];

    fbq("track", "Purchase", {
      content_ids: goodsNo,
      content_type: "product",
      value: {=orderInfo.settlePrice},
      currency: "KRW",
    });
</script>
```

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