# 메타(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>


---

# 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/facebook-and-instagram.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.