메타 픽셀

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

예시 코드들은 스크립트 동작을 보장하지 않습니다.

관련 문서

샵바이 메타 픽셀 코드 예시

상단 공통

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

{{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>
Previous네이버 광고 스크립트Next메타 카탈로그

Last updated