메타(Facebook&Instagram) 픽셀

디자인페이지 및 모바일쇼핑몰 메뉴를 이용한 메타 픽셀 삽입

단순 예시이며, 동작을 보장하지 않습니다.

공통(config), 상품상세, 장바구니추가, 결제완료, 회원가입 완료 코드만 제공합니다.

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

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

관련 문서

• 메타 픽셀헬퍼:https://chromewebstore.google.com/detail/meta-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?pli=1

• 메타 픽셀 문서:

  • https://developers.facebook.com/docs/meta-pixel/

공통(Config 및 PageView)

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

하기 코드에서 픽셀아이디 부분을 사용하실 픽셀아이디로 변경해주세요

// 픽셀아이디 입력 부분 변경 필수
<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>

외부 스크립트 등록 화면

상품상세페이지

• 고도몰 관리자페이지 > 디자인, 모바일샵에 각각 적용

• 현재 사용하고 있는 스킨을 선택 한 후, 상품 > 상품상세화면(good/goods_view.html)에 적용

// 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>

상품상세화면 적용예시

장바구니 추가

• 장바구니 페이지에 등록 하며, 상품이 있을 경우만 동작

• 고도몰 관리자페이지 > 디자인, 모바일샵에 각각 적용

• 현재 사용하고 있는 스킨을 선택 한 후, 주문 > 장바구니(order/cart.html)에 적용

장바구니 페이지 상단

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

치환코드 <!--{@..value_ }--> 하단

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

장바구니페이지 최하단

// 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>

회원가입 완료

• 고도몰 관리자페이지 > 디자인, 모바일샵에 각각 적용

• 현재 사용하고 있는 스킨을 선택 한 후, 회원 > 가입완료(member/join_ok.html)에 적용

// 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>

구매완료(주문완료)

• 고도몰 관리자페이지 > 디자인, 모바일샵에 각각 적용

• 현재 사용하고 있는 스킨을 선택 한 후, 주문 > 주문완료(order/order_end.html)에 적용

// 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>