只要在自家網站設定購買事件,並將這些事件連結至 Merchant Center,就能追蹤所有購買。本文將說明如何在網站設定購買事件。
事前準備
如要追蹤購買,請務必在網站新增 Google 代碼。如果尚未新增代碼,可以建立新代碼並在網站上使用。瞭解如何安插 Google 代碼 (gtag.js)。
運作方式
如要收集購買資料,你必須追蹤網站的購買事件。你可以在網站定義這些事件以便進行追蹤。
以下是透過網站傳送購買事件的 2 個範例。
範例 1:在網頁開啟時傳送購買事件
建議你將購買事件放入使用者購物的網頁上。舉例來說,你可以將事件加入使用者完成購買時顯示的確認頁面中。本教學課程將示範如何將事件加入使用者點擊「購買」按鈕的頁面。
將事件放進 <body> 代碼結尾處的 <script> 代碼中。只要將事件直接加入 <script> 代碼內,系統就會在載入網頁時觸發事件。
程式碼範例
<!--
注意:在下列程式碼範例中,請務必
將「TAG_ID」換成你的代碼 ID。
瞭解詳情:https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<!-- 安插 Google 代碼 (gtag.js) -->
<!-- Google 代碼 (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>
<script>
gtag("event", "purchase", {
transaction_id: "T_12345_1",
affiliation: "Google 商品網路商店",
value: 25.42,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
// 如果消費者購買多件商品,
// 可以將那些商品新增至 items 陣列
{
item_id: "SKU_12345",
item_name: "Stan and Friends T 恤",
affiliation: "Google 商品網路商店",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "服飾",
item_category2: "成人",
item_category3: "上衣",
item_category4: "圓領",
item_category5: "短袖",
item_list_id: "related_products",
item_list_name: "相關產品",
item_variant: "綠色",
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="zh-Hant-TW">
<head>
<!-- 安插 Google 代碼 (gtag.js)-->
<!-- Google 代碼 (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
// 與之前的購買事件不同,因此 Analytics
// 不複製這些事件。
// 瞭解詳情:https://support.google.com/analytics/answer/12313109
transaction_id: "T_12345_2",
affiliation: "Google 商品網路商店",
value: 25.42,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends T 恤",
affiliation: "Google 商品網路商店",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "服飾",
item_category2: "成人",
item_category3: "上衣",
item_category4: "圓領",
item_category5: "短袖",
item_list_id: "related_products",
item_list_name: "相關產品",
item_variant: "綠色",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 9.99,
quantity: 1
}]
});
});
</script>
</body>
</html>
將購買事件連結至 Merchant Center
你可以使用重要事件來源將購買事件連結至 Merchant Center。
瞭解如何在 Merchant Center 新增重要事件來源。