구글 애널리틱스
gtag(=global tag)를 이용한 샵바이 구글애널리틱스, 전자상거래 스크립트 적용 방법
샵바이예시 코드들은 스크립트 동작을 보장하지 않습니다.
본 문서에서는 구글 태그매니저 적용 방법에 대해서 기입하지 않습니다.
관련 문서
구글 애널리틱스 개발자 문서: https://developers.google.com/analytics/devguides/collection/ga4
샵바이 변수 조회 가이드: https://admin-remote.shopby.co.kr/popup/variable-guide
구글 애널리틱스 추천 이벤트: https://support.google.com/analytics/answer/9267735
구글 애널리틱스 스크스립트 예시
상단 공통
상단 공통 스크립트는 샵바이 관리자페이지에서 아이디 값을 입력할 경우 자동으로 삽입 됩니다.
따라서, 샵바이 어드민에 아이디를 입력하여 저장한 경우에는 상단 공통 스크립트는 생략 하시면 됩니다.
<!-- 예시 코드 -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id={{GA4 ID}}"
></script>
<script>
globalThis.dataLayer = globalThis.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "{{GA4 ID}}"); // GA4, Stream ID로 변경해주세요
</script>
상품 상세 페이지
<!-- 예시 코드 -->
<script>
try {
if (sb.product) {
const {
baseInfo: { productNo, productName },
price: { salePrice, immediateDiscountAmt },
} = sb.product;
const gaViewItem = {
item_id: String(productNo),
item_name: productName,
price: salePrice - immediateDiscountAmt,
quantity: 1,
};
gtag('event', 'view_item', {
currency: 'KRW',
value: gaViewItem.price,
items: [gaViewItem],
});
}
} catch (error) {
console.error("An error occurred:", error);
}
</script>
회원가입 완료 페이지
<!-- 예시 코드 -->
<script>
try {
gtag("event", "sign_up", {
currency: "KRW",
value: 1,
});
} catch (error) {
console.error("An error occurred:", error);
}
</script>
장바구니 페이지
<!-- 예시 코드 -->
<script>
try {
if (sb.cart?.deliveryGroups?.length > 0) {
function getGAViewCartInfo() {
const gaOrderProducts = sb.cart.deliveryGroups.flatMap(({ orderProducts }) =>
orderProducts.map((product) => {
const { productNo, productName, buyAmt, orderProductOptions } = product;
const quantity = orderProductOptions.reduce((sum, { orderCnt }) => {
sum += orderCnt;
return sum;
}, 0);
return {
item_id: productNo,
item_name: productName,
currency: 'KRW',
price: buyAmt,
quantity,
};
}),
);
const gaOrderPrice = gaOrderProducts.reduce((sum, cur) => {
sum += cur.price;
return sum;
}, 0);
return { gaOrderProducts, gaOrderPrice };
}
const { gaOrderPrice, gaOrderProducts } = getGAViewCartInfo();
if(gaOrderProducts.length > 0){
gtag('event', 'view_cart', {
currency: 'KRW',
value: gaOrderPrice,
items: gaOrderProducts,
});
}
}
} catch (error) {
console.error("An error occurred:", error);
}
</script>
주문 완료 페이지
<!-- 예시 코드 -->
<script>
try {
if (sb.order) {
const {
orderNo,
payInfo: { payAmt },
orderOptionsGroupByPartner,
} = sb.order;
const gaOrderItems = orderOptionsGroupByPartner.flatMap(({ orderOptionsGroupByDelivery }) =>
orderOptionsGroupByDelivery.flatMap(({ orderOptions }) =>
orderOptions.map((options) => {
const {
productNo: item_id,
productName: item_name,
price: { immediateDiscountAmt: discount, buyPrice: price },
orderCnt: quantity,
} = options;
return {
item_id:String(item_id),
item_name,
currency: 'KRW',
discount,
price,
quantity,
};
}),
),
);
gtag('event', 'purchase', {
transaction_id: orderNo,
value: payAmt,
currency: 'KRW',
items: gaOrderItems,
});
}
} catch (error) {
console.error("An error occurred:", error);
}
</script>
Last updated