메타 픽셀
샵바이 변수를 이용한 메타 픽셀 '수동' 적용 가이드
관련 문서
메타 픽셀 코드 예시
상단 공통
메타에서 발급 받은 '공통' 픽셀을 적용합니다. (쿠키 생성, 광고의 클릭 아이디 등 생성)
{{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>
Last updated
