Zahlungskonversion analysieren

Analysieren Sie Ihre Zahlungskonversion von Stripe Checkout mit Google Analytics 4.

Verwenden Sie Google Analytics 4 (GA4), um zu verfolgen, wie sich Nutzer/innen innerhalb Ihres Stripe Checkout-Bezahlvorgangs bewegen. Richten Sie zunächst ein GA4-Konto ein und fügen Sie eine GA4-Eigenschaft hinzu.

Ihre Seite einrichten

Erstellen Sie eine Produktseite mit der Schaltfläche Bezahlen:

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>

Erstellen Sie einen serverseitigen Endpoint, der eine Checkout-Sitzung erstellt und die Seiten bereitstellt:

index.js
// 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')('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}!`));

Eine Bestätigungsseite erstellen:

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>

Eine Abbruchseiteerstellen:

canceled.html
<html>
  <head>
    <title>Order Canceled!</title>
  </head>
  <body>
    <p>
      <a href="/product">Start another order</a>.
    </p>
  </body>
</html>

Anleitung zur Instrumentierung

Im folgenden Beispiel gehen wir davon aus, dass Ihre Kundin/Ihr Kunde:

Hat Ihre Produktseite angesehen.
Hat auf Kaufen geklickt und wurde zu Stripe Checkout weitergeleitet.
Hat die Zahlung abgeschlossen und wurde zur Bestätigungsseite weitergeleitet.

Kurzübersicht

Instrumentierung hinzufügen

Fügen Sie checkout.stripe.com zu Ihrer Ausschlussliste für Verweise hinzu.

Fügen Sie Google Analytics-Tags zu Ihren Produkt-, Erfolgs- und Abbruchseiten hinzu. Tags lösen beim Laden der Seite automatisch ein Ereignis aus.

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>

Lösen Sie ein Ereignis unmittelbar vor der Weiterleitung an Stripe Checkout aus:

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>

Analyse Ihrer Konversionsmetriken

Nachdem Sie die richtige Instrumentierung hinzugefügt haben, werden Ihnen die Metriken angezeigt, die für die jeweiligen Schritte Ihrer Zahlungskonversion definiert wurden:

Aufrufe der Produktseite: Die Anzahl der Seitenbesucher/innen, die die Produktseite angesehen haben.
begin_checkout-Ereignisanzahl: Die Anzahl der Seitenbesucher/innen, die auf die Schaltfläche Kaufen geklickt haben und zu Stripe Checkout weitergeleitet wurden.
Erfolgreiche Seitenaufrufe: Die Anzahl der Seitenbesucher/innen, die den Kauf abgeschlossen haben und auf die Bestätigungsseite weitergeleitet wurden.

Diese Zahlen geben Ihnen Aufschluss darüber, zu welchem Zeitpunkt Ihre Besucher/innen den Bezahlvorgang verlassen.