ウェブサイトで購入イベントを設定して Merchant Center にリンクすると、すべての購入をトラッキングできます。この記事では、ウェブサイトで購入イベントを設定する方法について説明します。
始める前に
購入を追跡するには、貴社のウェブサイトに Google タグが追加されている必要があります。Google タグがまだ追加されていない場合は、新たに作成して貴社のウェブサイトで使用してください。詳しくは、Google タグ（gtag.js）のインストール方法をご覧ください。
仕組み
購入データを収集するには、ウェブサイトで購入イベントをトラッキングする必要があります。イベントをトラッキングするには、ウェブサイトでイベントを定義します。
以下では、ウェブサイトから購入イベントを送信する方法の例を 2 つ紹介します。
例 1: ページが開いたときに購入イベントを送信する
ウェブサイトの、購入が発生するページに購入イベントを配置する方法です。たとえば、購入時に表示される確認ページなどに、このイベントを追加します。このチュートリアルでは、ユーザーが [Purchase]（購入）ボタンをクリックするページにイベントを追加する方法を説明します。
イベントを、<body> タグの末尾の <script> タグ内に配置してください。イベントを <script> タグ内に直接配置することで、ページ読み込み時にイベントがトリガーされます。
サンプルコード
<!--
注: 次のコードサンプルでは、
「TAG_ID」を実際のタグ IDに置き換えてください。
詳細: https://googlesupport.serverhump.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google タグ（gtag.js）をインストールする -->
<!-- Google タグ（gtag.js） -->
<script async src="https://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> This is where your purchase confirmation would go </div>
<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: [
// 複数の商品が購入される場合、
// 商品を商品の配列に追加します
{
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: ボタンがクリックされたときに購入イベントを送信する
[Purchase] ボタンのクリック時に購入イベントがトリガーされるように設定するには、いくつかの方法があります。1 つは、[Purchase] ボタンに ID を追加し、イベントコードをイベント リスナーに配置する方法です。以下の例では、ID が追加された購入ボタンがクリックされた場合にのみイベントが送信されます。
サンプルコード
<!--
注: 次のコードサンプルでは、
「TAG_ID」を実際のタグ IDに置き換えてください。
詳細: https://googlesupport.serverhump.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google タグ（gtag.js）をインストールする -->
<!-- Google タグ（gtag.js） -->
<script async src="https://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>This is where the purchase form would go</div>
<button id="purchase">Purchase</button>
<script>
document.getElementById("purchase").addEventListener("click", function () {
gtag("event", "purchase", {
// この購入イベントでは前の購入イベントとは異なる
// トランザクション ID を使用するため、アナリティクスでは
// イベントの重複除去を行いません。
// 詳細: https://googlesupport.serverhump.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>
購入イベントを Merchant Center にリンクする
キーイベントの発生元を使用すると、購入イベントを Merchant Center にリンクできます。
詳しくは、Merchant Center でキーイベントの発生元を追加する方法をご覧ください。