購入完了ファネルを分析する
Analytics 4 で、Stripe Checkout の購入完了ファネルを分析します。
Google Analytics 4 (GA4) を使用して、顧客が Stripe Checkout の購入ファネルを進む状況を追跡します。始める前に、GA4 のアカウントを設定して、GA4 プロパティーを追加します。
サイトを設定する
購入 ボタンのある商品ページを作成します。
product.html<html> <head> <title>Buy cool new product</title> </head> <body> <script> window.addEventListener("load", function () { document .getElementById("submit") .addEventListener("click", function (event) { event.preventDefault(); fetch("/create-checkout-session", { method: "POST", }) .then((response) => response.json()) .then((checkoutSession) => { window.location.href = checkoutSession.url; }); }); }); </script> <form> <button id="submit">Checkout</button> </form> </body> </html>
サーバー側で、Checkout セッションを作成してページを表示するエンドポイントを作成します。
index.js// This example sets up endpoints using the Express framework. // Watch this video to get started: https://youtu.be/rPR2aJ6XnAc. 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", cancel_url: req.get("origin") + "/cancel", }); 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}!`));'sk_test_4eC39HqLyjWDarjtT1zdp7dc'成功ページを作成します。
success.html<html> <head> <title>Thanks for your order!</title> </head> <body> <h1>Thanks for your order!</h1> <p> We appreciate your business! If you have any questions, please email <a href="mailto:orders@example.com">orders@example.com</a>. </p> </body> </html>
キャンセル後のページを作成します。
canceled.html<html> <head> <title>Order Canceled!</title> </head> <body> <p> <a href="/product">Start another order</a>. </p> </body> </html>
測定の説明
以下の例では、顧客が次の状況にあったと想定しています。
- 商品ページ を閲覧した。
- 購入 ボタンをクリックし、Stripe Checkout にリダイレクトされた。
- 支払いを完了し、成功ページにリダイレクトされた。
クイックサマリー
測定を追加する
参照元除外リストに
checkout.stripe.com
を追加します。商品、成功、キャンセルのページに Google Analytics タグを追加します。タグによってページの読み込み時にイベントが自動的に発生します。
product.html<html> <head> <!-- START GOOGLE ANALYTICS --> <script async src="https://www.googletagmanager.com/gtag/js?id=<GOOGLE_ANALYTICS_CLIENT_ID>" ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { window.dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "<GOOGLE_ANALYTICS_CLIENT_ID>"); </script> <!-- END GOOGLE ANALYTICS --> <title>Buy cool new product</title> </head> <body> <script> window.addEventListener("load", function () { document .getElementById("submit") .addEventListener("click", function (event) { event.preventDefault(); fetch("/create-checkout-session", { method: "POST", }) .then((response) => response.json()) .then((checkoutSession) => { window.location.href = checkoutSession.url; }); }); }); </script> <form> <button id="submit">Checkout</button> </form> </body> </html>
success.html<html> <head> <!-- START GOOGLE ANALYTICS --> <script async src="https://www.googletagmanager.com/gtag/js?id=<GOOGLE_ANALYTICS_CLIENT_ID>" ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { window.dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "<GOOGLE_ANALYTICS_CLIENT_ID>"); </script> <!-- END GOOGLE ANALYTICS --> <title>Thanks for your order!</title> </head> <body> <h1>Thanks for your order!</h1> <p> We appreciate your business! If you have any questions, please email <a href="mailto:orders@example.com">orders@example.com</a>. </p> </body> </html>
canceled.html<html> <head> <!-- START GOOGLE ANALYTICS --> <script async src="https://www.googletagmanager.com/gtag/js?id=<GOOGLE_ANALYTICS_CLIENT_ID>" ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { window.dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "<GOOGLE_ANALYTICS_CLIENT_ID>"); </script> <!-- END GOOGLE ANALYTICS --> <title>Order Canceled!</title> </head> <body> <p> <a href="/product">Start another order</a>. </p> </body> </html>
Stripe Checkout へのリダイレクトの直前に、イベントを起動します。
product.html<html> <head> <!-- START GOOGLE ANALYTICS --> <script async src="https://www.googletagmanager.com/gtag/js?id=<GOOGLE_ANALYTICS_CLIENT_ID>" ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { window.dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "<GOOGLE_ANALYTICS_CLIENT_ID>"); </script> <!-- END GOOGLE ANALYTICS --> <title>Buy cool new product</title> </head> <body> <script> window.addEventListener("load", function () { document .getElementById("submit") .addEventListener("click", function (event) { event.preventDefault(); fetch("/create-checkout-session", { method: "POST", }) .then((response) => response.json()) .then((checkoutSession) => { window.location.href = checkoutSession.url; gtag("event", "begin_checkout", { event_callback: function () { window.location.href = checkoutSession.url; }, }); }); }); }); </script> <form> <button id="submit">Checkout</button> </form> </body> </html>
購入完了ファネルのメトリクスを分析する
適切な測定を追加すると、購入完了ファネルで定義された各ステップに対応するメトリクスを表示できます。
- 商品ページの閲覧数: 商品ページを閲覧したページ訪問者数。
- begin_checkout event count: 購入 ボタンをクリックして Stripe Checkout にリダイレクトされたページ訪問者数。
- 成功ページの閲覧数: 購入を完了し、成功ページにリダイレクトされたページ訪問者の数。
これらの数値を使用することで、訪問者が購入完了ファネルを去った場所を認識できます。