웹사이트에서 구매 이벤트를 설정하고 판매자 센터에 연결하여 모든 전환을 추적할 수 있습니다. 이 도움말에서는 웹사이트에서 구매 이벤트를 설정하는 방법을 설명합니다.
작동 방식
전환 데이터를 수집하려면 웹사이트에서 구매 이벤트를 추적해야 합니다. 이 이벤트를 추적하려면 웹사이트에서 이벤트를 정의합니다.
다음은 웹사이트에서 구매 이벤트를 전송하는 방법의 두 가지 예입니다.
예 1: 페이지가 열리면 구매 이벤트 전송
사용자가 구매하는 웹사이트 페이지에 구매 이벤트를 배치해야 합니다. 예를 들어 사용자가 구매할 때 표시되는 확인 페이지에 구매 이벤트를 추가할 수 있습니다. 이 튜토리얼에서는 사용자가 '구매' 버튼을 클릭하는 페이지에 이벤트를 추가하는 방법을 보여줍니다.
<body> 태그 끝에 있는 <script> 태그에 이벤트를 배치합니다. 이벤트를 <script> 태그에 직접 배치하면 페이지가 로드될 때 이벤트가 트리거됩니다.
샘플 코드
<!--
참고: 다음 코드 샘플에서
'TAG_ID'를 태그 ID로 바꿔야 합니다.
자세히 알아보기: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<div>구매 양식이 표시되는 위치입니다</div>
<button>제출</button>
<script>
gtag("event", "purchase", {
transaction_id: "T_12345_1",
affiliation: "Google Merchandise Store",
value: 25.42,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
// 사용자가 2개 이상의 항목을 구매하면
// 해당 항목을 items 배열에 추가할 수 있습니다
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 9.99,
quantity: 1
}]
});
</script>
</body>
</html>
예 2: 버튼 클릭 시 구매 이벤트 전송
사용자가 '구매' 버튼을 클릭할 때 트리거되도록 몇 가지 방법으로 구매 이벤트를 설정할 수 있습니다. 한 가지 방법은 '구매' 버튼에 ID를 추가한 후 이벤트 리스너에 이벤트 코드를 배치하는 것입니다. 아래 예에서는 사용자가 ID 구매 버튼을 클릭할 때만 이벤트가 전송됩니다.
샘플 코드
<!--
참고: 다음 코드 샘플에서
'TAG_ID'를 태그 ID로 바꿔야 합니다.
자세히 알아보기: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<div>구매 양식이 표시되는 위치</div>
<button id="purchase">구매</button>
<script>
document.getElementById("purchase").addEventListener("click", function () {
gtag("event", "purchase", {
// 이 구매 이벤트는 이전 구매 이벤트와는
// 다른 거래 ID를 사용하므로
// 애널리틱스에서 이벤트를 중복 삭제하지 않습니다
// 자세히 알아보기: https://support.google.com/analytics/answer/12313109
transaction_id: "T_12345_2",
affiliation: "Google Merchandise Store",
value: 25.42,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 9.99,
quantity: 1
}]
});
});
</script>
</body>
</html>
판매자 센터에 구매 이벤트 연결하기
전환 소스를 사용하여 구매 이벤트를 판매자 센터에 연결할 수 있습니다.