# 購入完了ファネルを分析する
Analytics 4 で、Stripe Checkout の購入完了ファネルを分析します。
# ホスト型ページ
> This is a ホスト型ページ for when payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/checkout/analyze-conversion-funnel?payment-ui=stripe-hosted.
Google Analytics 4 (GA4) を使用して、顧客が Stripe Checkout の購入ファネルを進む状況を追跡します。始める前に、[GA4 のアカウント](https://support.google.com/analytics/answer/9304153)を設定して、[GA4 プロパティー](https://support.google.com/analytics/answer/9744165?hl=en#zippy=%2Cin-this-article)を追加します。
## サイトを設定する
1. **購入**ボタンのある商品ページを作成します。
```html
Buy cool new product
```
1. Checkout セッションを作成してページを提供するサーバー側エンドポイントを作成します。
```javascript
// This example sets up endpoints using the Express framework.
const express = require("express");
require("dotenv").config();
const app = express();
// Set your secret key. Remember to switch to your live key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('<>');
const request = require("request");
app.post(
"/create-checkout-session",
express.urlencoded({ extended: false }),
async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [
{
price_data: {
currency: "usd",
product_data: {
name: "T-shirt"
},
unit_amount: 2000
},
quantity: 1
}
],
mode: "payment",
success_url: req.get("origin") + "/success",
});
res.json({ url: session.url });
}
);
app.get("/product", function (req, res) {
res.sendFile(__dirname + "/product.html");
});
app.get("/success", function (req, res) {
res.sendFile(__dirname + "/success.html");
});
app.get("/cancel", function (req, res) {
res.sendFile(__dirname + "/cancel.html");
});
app.listen(4242, () => console.log(`Listening on port ${4242}!`));
```
1. 成功ページを作成します。
```html
Thanks for your order!
Thanks for your order!
We appreciate your business! If you have any questions, please email
orders@example.com.
```
1. キャンセル後のページを作成します。
```html
Order Canceled!
Start another order.
```
## インストルメンテーションの説明
次の例では、顧客が次の状況であると想定しています。
- 商品ページを閲覧した。
- **購入**ボタンをクリックし、Stripe Checkout にリダイレクトされた。
- 支払いを完了し、成功ページにリダイレクトされた。
### 簡単な要約
| 方法 | 商品を閲覧 | **購入**ボタンをクリック | 購入を完了 |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| クライアント側 | `product` ページに [Google Analytics のタグを追加する](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#record-pageview-metrics) | [Stripe Checkout にリダイレクトする前にイベントを記録する](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#client-side-event-before-redirect) | `success` ページに [Google Analytics のタグを追加する](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#record-pageview-metrics) |
| サーバー側 | 該当なし | [Stripe Checkout にリダイレクトする前にイベントを記録する](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-redirect) | [`checkout.session.completed` Webhook を受信したときにイベントを記録する](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-event-recording) |
| クライアント ID が保存されているサーバー側 | 該当なし | 該当なし | `checkout.session.completed` Webhook を受信したときにイベントを記録し、[クライアント側イベントに関連付ける](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#link-client-and-server-side-events) |
### インストルメンテーションを追加する
1. 参照元除外リストに `checkout.stripe.com` を追加します。
1. 商品ページ、成功ページ、キャンセルページに Google アナリティクスのタグを追加します。タグによって、ページの読み込み時に自動的にイベントが発生します。
```html
Buy cool new product
```
```html
Thanks for your order!
Thanks for your order!
We appreciate your business! If you have any questions, please email
orders@example.com.
```
```html
Order Canceled!
Start another order.
```
1. Stripe Checkout にリダイレクトする直前にイベントを発生させます。
```html
Buy cool new product
```
### 購入完了ファネルのメトリクスを分析する
適切なインストルメンテーションを追加すると、購入完了ファネルで定義された各ステップに対応するメトリクスを確認できます。
- **商品ページの閲覧数:** 商品ページを閲覧したページ訪問者の数。
- **begin\_checkout イベント数:** **購入**ボタンをクリックして Stripe Checkout にリダイレクトされたページ訪問者の数。
- **成功ページの閲覧数:** 購入を完了し、成功ページにリダイレクトされたページ訪問者の数。
これらの数値を使用して、訪問者が購入完了ファネルのどこで離脱しているのか確認できます。
## Optional: サーバー側のイベント記録
この例では、購入の完了を追跡するために、ユーザーが成功ページに到達するシナリオを想定しています。これはおおむねほとんどのユースケースに適していますが、次のような状況では包括的な解決策にならない可能性があります。
- 成功ページが指定されていない決済フロー。
- 成功ページへのリダイレクトが失敗した場合でも、購入完了メトリクスをログに記録することが重要な場合。
- 成功 URL に有用な情報 (配送の進捗状況や確認番号など) が記載されているために、顧客がこの URL を頻繁に更新している状況。
> #### イベントハンドラー
>
> 成功ページを使用せずに購入の完了メトリクスを記録するには、[イベントハンドラーを設定](https://docs.stripe.com/checkout/fulfillment.md)して `checkout.session.completed` イベントを取得するたびにメトリクスを記録します。
次の強調表示されたコードを追加した後は、成功ページの閲覧数の代わりに、`purchase` メトリクスを使用して、購入を完了した訪問者数を分析できます。
```javascript
// This example sets up endpoints using the Express framework.
const express = require("express");
require("dotenv").config();
const app = express();
// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('<>');
const request = require("request");
app.post(
"/create-checkout-session",
express.urlencoded({ extended: false }),
async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [
{
price_data: {
currency: "usd",
product_data: {
name: "T-shirt"
},
unit_amount: 2000
},
quantity: 1
}
],
mode: "payment",
success_url: req.get("origin") + "/success",
});
res.json({ url: session.url });
}
);
app.get("/product", function (req, res) {
res.sendFile(__dirname + "/product.html");
});
app.get("/success", function (req, res) {
res.sendFile(__dirname + "/success.html");
});
app.get("/cancel", function (req, res) {
res.sendFile(__dirname + "/cancel.html");
});
app.post("/webhook", express.raw({ type: "application/json" }), (req, res) => {
const payload = req.body;
const sig = req.headers["stripe-signature"];
let event;
try {
event = stripe.webhooks.constructEvent(
payload,
sig,
process.env.STRIPE_WEBHOOK_SECRET
);
} catch (err) {
return res.status(400).send(`Webhook Error: ${err.message}`);
}
if (event.type === "checkout.session.completed") {
// Record metrics using the Google Analytics Measurement Protocol
// See https://developers.google.com/analytics/devguides/collection/protocol/ga4
const MEASUREMENT_ID = ; // GA4 Measurement ID
const API_SECRET = ; // GA4 Measurement Protocol API secret
fetch("https://www.google-analytics.com/mp/collect?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}", {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY', // Client ID
events: [{
name: "purchase",
params: {}
}]
})
});
}
res.status(200);
});
app.listen(4242, () => console.log(`Listening on port ${4242}!`));
```
## Optional: クライアント側とサーバー側のイベントを関連付ける
[サーバー側のイベント記録](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-event-recording)では、匿名のクライアント ID に対するサーバー側のメトリクスを記録しました。この ID はページ閲覧数のメトリクスとは異なるため、Google Analytics にはページ閲覧数と購入メトリクスを関連付ける手段がありません。クライアント側とサーバー側のメトリクスの関連付けを維持するには、次のようにします。
1. 訪問者に固有の ID (Google アナリティクスのクライアント ID など) を選択し、サーバーに送信します。
```html
Buy cool new product
```
1. リクエストから ID を読み取ります。
1. Checkout セッションのメタデータに ID を格納します。
1. ID を取得し、イベントを記録するリクエストとともに送信します。
```javascript
// This example sets up endpoints using the Express framework.
const express = require("express");
require("dotenv").config();
const app = express();
// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('<>');
const request = require("request");
app.post(
"/create-checkout-session",
express.urlencoded({ extended: false }),
async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [
{
price_data: {
currency: "usd",
product_data: {
name: "T-shirt"
},
unit_amount: 2000
},
quantity: 1
}
],
mode: "payment",
success_url: req.get("origin") + "/success",metadata: {
analyticsClientId: req.body.analyticsClientId
},
});
res.json({ url: session.url });
}
);
app.get("/product", function (req, res) {
res.sendFile(__dirname + "/product.html");
});
app.get("/success", function (req, res) {
res.sendFile(__dirname + "/success.html");
});
app.get("/cancel", function (req, res) {
res.sendFile(__dirname + "/cancel.html");
});
app.post("/webhook", express.raw({ type: "application/json" }), (req, res) => {
const payload = req.body;
const sig = req.headers["stripe-signature"];
let event;
try {
event = stripe.webhooks.constructEvent(
payload,
sig,
process.env.STRIPE_WEBHOOK_SECRET
);
} catch (err) {
return res.status(400).send(`Webhook Error: ${err.message}`);
}
if (event.type === "checkout.session.completed") {
// Record metrics using the Google Analytics Measurement Protocol
// See https://developers.google.com/analytics/devguides/collection/protocol/ga4
const params = new URLSearchParams({
v: "1", // Version
tid: , // Tracking ID / Property ID.cid: event.data.object.metadata.analyticsClientId, // Client ID
t: "event", // Event hit type
ec: "ecommerce", // Event Category
ea: "purchase", // Event Action
});
request(`https://www.google-analytics.com/batch?${params.toString()}`, {
method: "POST"
});
}
res.status(200);
});
app.listen(4242, () => console.log(`Listening on port ${4242}!`));
```
## Optional: サーバー側のリダイレクト
この例では、Stripe へのリダイレクトがクライアント側で発生すると想定しています。サーバー側から Stripe にリダイレクトする必要がある場合は、Stripe Checkout へのリダイレクトの直前に、サーバーで `'begin_checkout'` メトリクスを記録します。
```javascript
// This example sets up endpoints using the Express framework.
const express = require("express");
require("dotenv").config();
const app = express();
// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('<>');
const request = require("request");
app.post(
"/create-checkout-session",
express.urlencoded({ extended: false }),
async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [
{
price_data: {
currency: "usd",
product_data: {
name: "T-shirt"
},
unit_amount: 2000
},
quantity: 1
}
],
mode: "payment",
success_url: req.get("origin") + "/success",
});
// Record metrics using the Google Analytics Measurement Protocol
// See https://developers.google.com/analytics/devguides/collection/protocol/ga4
const MEASUREMENT_ID = ; // GA4 Measurement ID
const API_SECRET = ; // GA4 Measurement Protocol API secret
fetch("https://www.google-analytics.com/mp/collect?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}", {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY', // Client ID
events: [{
name: "begin_checkout",
params: {}
}]
})
});
res.redirect(303, session.url);
}
);
app.get("/product", function (req, res) {
res.sendFile(__dirname + "/product.html");
});
app.get("/success", function (req, res) {
res.sendFile(__dirname + "/success.html");
});
app.get("/cancel", function (req, res) {
res.sendFile(__dirname + "/cancel.html");
});
app.listen(4242, () => console.log(`Listening on port ${4242}!`));
```
```html
Buy cool new product
```
# 埋め込みページ
> This is a 埋め込みページ for when payment-ui is embedded-form. View the full page at https://docs.stripe.com/payments/checkout/analyze-conversion-funnel?payment-ui=embedded-form.
埋め込み型決済ではコンバージョンと決済動作をリアルタイムの分析イベントで追跡できます。[埋め込み型決済における分析イベントの追跡](https://docs.stripe.com/payments/checkout/embedded-analytics.md) をご覧ください。