메타 픽셀

샵바이 변수를 이용한 메타 픽셀 '수동' 적용 가이드

관련 문서

• 픽셀 개발자 문서: https://developers.facebook.com/docs/meta-pixel?locale=ko_KR

• 샵바이 변수 조회 가이드: https://admin-remote.shopby.co.kr/popup/variable-guide

---

메타 픽셀 코드 예시

상단 공통

메타에서 발급 받은 '공통' 픽셀을 적용합니다. (쿠키 생성, 광고의 클릭 아이디 등 생성)

{{pixelID}} 부분은 생성하신 픽셀의 아이디로 변경해주시면 됩니다. (쌍 따옴표는 지우시면 안됩니다.)

<!-- 예시 코드 -->
<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", "{{pixelID}}"); // ""(쌍따옴표)는 지우지 마세요.
  fbq("track", "PageView");
</script>
<noscript
  ><img
    height="1"
    width="1"
    style="display: none"
    src="https://www.facebook.com/tr?id={{pixelID}}&ev=PageView&noscript=1"
/></noscript>

상품 상세 페이지 (ViewContent 이벤트)

소비자들이 보았던 상품을, 소유한 메타 카탈로그 상품(데이터)과(와) 매칭 합니다.

<!-- 예시 코드 -->
<script>
  try {
    if (sb?.product) {
      const {
        baseInfo: { productNo },
        price: { salePrice, immediateDiscountAmt },
      } = sb.product;

      fbq("track", "ViewContent", {
        content_ids: String(productNo),
        content_type: "product",
        value: salePrice - immediateDiscountAmt,
        currency: "KRW",
      });
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

장바구니 페이지 (AddToCart)

장바구니 추가 시 작동해야 하는 이벤트 이나,

간단하게 장바구니 페이지에서, 상품이 있는 경우에만 체크하여 스크립트 동작

<!-- 예시 코드 -->
<script>
  try {
    const {
      deliveryGroups = [],
      price: { buyAmt = 0 },
    } = sb.cart;

    if (deliveryGroups.length > 0) {
      const productNos = deliveryGroups.flatMap(({ orderProducts }) =>
        orderProducts.map(({ productNo }) => String(productNo))
      );

      fbq("track", "AddToCart", {
        content_ids: productNos,
        content_type: "product",
        value: buyAmt,
        currency: "KRW",
      });
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

회원가입 완료 페이지 (CompleteRegistration)

value는 자유롭게 변경해주셔도 됩니다.

(다만 value key와 value를생략할 경우 페이스북 이벤트 관리자에서 경고 메시지가 발생할 수 있습니다.)

<!-- 예시 코드 -->
<script>
  try {
    fbq("track", "CompleteRegistration", {
      currency: "KRW",
      content_name: "JoinOK",
      value: "1",
    });
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

주문서 작성/결제 페이지 (InitiateCheckout)

<!-- 예시 코드 -->
<script>
  try {
    const { deliveryGroups = [] } = sb.orderSheet;

    if (deliveryGroups.length > 0) {
      const products = deliveryGroups.flatMap(
        ({ orderProducts }) => orderProducts
      );
      const productNos = products.map(({ productNo }) => String(productNo));
      const totalPrice = products.reduce((sum, cur) => {
        sum += cur.buyAmt;

        return sum;
      }, 0);

      fbq("track", "InitiateCheckout", {
        content_ids: productNos,
        value: totalPrice,
        currency: "KRW",
        content_type: "product",
      });
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

주문 완료 페이지 (Purchase)

<!-- 예시 코드 -->
<script>
    try {
      const { orderOptionsGroupByPartner = [] } = sb.order;
  
      const orderProducts = orderOptionsGroupByPartner.flatMap(
        ({ orderOptionsGroupByDelivery }) =>
          orderOptionsGroupByDelivery.flatMap(({ orderOptions }) => orderOptions)
      );
      const productNos = orderProducts.map(({ productNo }) => String(productNo));
      const totalPrice = orderProducts.reduce((accumulator, product) => {
        return accumulator + (product.orderCnt * product.price.buyPrice);
      }, 0);
  
      fbq("track", "Purchase", {
        content_ids: productNos,
        content_type: "product",
        value: totalPrice,
        currency: "KRW",
      });
    } catch (error) {
      console.error("An error occurred:", error);
    }
</script>