購入完了ファネルを分析する

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')('sk_test_BQokikJOvBiI2HlWgH4olfQ2'
);

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}!`));

成功ページを作成します。

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 アナリティクスのタグを追加します。タグによって、ページの読み込み時に自動的にイベントが発生します。

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 イベント数: 購入ボタンをクリックして Stripe Checkout にリダイレクトされたページ訪問者の数。
成功ページの閲覧数: 購入を完了し、成功ページにリダイレクトされたページ訪問者の数。

これらの数値を使用して、訪問者が購入完了ファネルのどこで離脱しているのか確認できます。