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

Methode	Produkt angesehen	Schaltfläche Kaufen angeklickt	Abgeschlossener Kauf
Clientseitig	Google Analytics-Tag zur `product`-Seite hinzufügen	Ereignis vor der Weiterleitung an Stripe Checkout aufzeichnen	Google Analytics-Tag zur `success`-Seite hinzufügen
Serverseitig	NA	Ereignis vor der Weiterleitung an Stripe Checkout aufzeichnen	Ereignis aufzeichnen, wenn Sie den Webhook `checkout.session.completed` webhook empfangen
Serverseitig mit gespeicherter Client-ID	NA	NA	Ereignis aufzeichnen, wenn Sie den Webhook `checkout.session.completed` empfangen, und mit clientseitigen Ereignissen verknüpfen

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.

OptionalAufzeichnung von Ereignissen auf Serverseite

Um den Abschluss eines Kaufs zu verfolgen, betrachten wir in diesem Beispiel ein Szenario, in dem Ihre Nutzer/innen die Bestätigungsseite erreichen. Während dies im Allgemeinen für die meisten Anwendungsfälle geeignet ist, bietet es für einige möglicherweise keine umfassende Lösung, wie z. B.:

Bezahlvorgänge ohne festgelegte Bestätigungsseite.
Fälle, in denen es wichtig ist, die Kaufabschlussmetriken zu protokollieren, auch wenn die Weiterleitung an die Bestätigungsseite fehlschlägt.
Situationen, in denen Kundinnen und Kunden eine Bestätigungs-URL häufig aktualisieren, weil sie nützliche Informationen enthält (z. B. den Versandfortschritt oder eine Bestätigungsnummer).

Ereignis-Handler

Um die Metrik des Kaufabschlusses ohne eine Bestätigungsseite aufzuzeichnen, richten Sie einen Ereignis-Handler ein und zeichnen immer dann eine Metrik auf, wenn Sie das Ereignis checkout.session.completed erhalten.

Nachdem Sie den folgenden hervorgehobenen Code hinzugefügt haben, können Sie die Metrik purchase verwenden. Mit dieser analysieren Sie die Anzahl der Besucher/innen, die einen Kauf abgeschlossen haben, statt der Anzahl der erfolgreichen Seitenaufrufe.

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 secret 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.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 = <GOOGLE_ANALYTICS_MEASUREMENT_ID>; // GA4 Measurement ID
     const API_SECRET = <GOOGLE_ANALYTICS_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}!`));

OptionalClient- und serverseitige Ereignisse verknüpfen

In der serverseitigen Ereignisaufzeichnung haben Sie die serverseitigen Metriken mit einer anonymen Client-ID aufgezeichnet. Diese ID unterscheidet sich von derjenigen, die mit den Metriken für die Seitenansicht verknüpft ist, sodass Google Analytics die Metriken für die Seitenansicht und den Kauf nicht verknüpfen kann. Gehen Sie wie folgt vor, um eine Verknüpfung zwischen den clientseitigen und den serverseitigen Metriken herzustellen:

Wählen Sie eine eindeutige ID für den/die Besucher/in aus (z. B. die Google Analytics-Client-ID) und senden Sie diese an den Server:

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) => {
                gtag("event", "begin_checkout", {
                  event_callback: function () {
                    window.location.href = checkoutSession.url;
                  },
                });
            // Get the analytics client id (https://developers.google.com/tag-platform/gtagjs/reference)
            // and send it to the server so it can be linked with the checkout session
            gtag("get", "<GOOGLE_ANALYTICS_CLIENT_ID>", "client_id", (clientID) => {
              fetch("/create-checkout-session", {
                method: "POST",
                body: new URLSearchParams({ analyticsClientId: clientID }),
              })
                .then((response) => response.json())
                .then((checkoutSession) => {
                  gtag("event", "begin_checkout", {
                    event_callback: function () {
                      gtag("event", "begin_checkout", {
                        event_callback: function () {
                          window.location.href = checkoutSession.url;
                        },
                      });
                    },
                  });
                });
            });
          });
      });
    </script>
    <form>
      <button id="submit">Checkout</button>
    </form>
  </body>
</html>

Lesen Sie die ID aus der Anfrage.
Speichern Sie die ID in den Metadaten der Checkout-Sitzung.

Rufen Sie die ID ab und senden Sie sie mit der Anfrage, um das Ereignis aufzuzeichnen.

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 secret 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",
      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: <GOOGLE_ANALYTICS_CLIENT_ID>, // Tracking ID / Property ID.
      cid: "555", // Anonymous Client 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}!`));

OptionalServerseitige Weiterleitungen

In diesem Beispiel gehen wir davon aus, dass Weiterleitungen an Stripe auf dem Client durchgeführt werden. Wenn Sie von Ihrem Server aus eine Weiterleitung an Stripe durchführen müssen, zeichnen Sie unmittelbar vor der Weiterleitung an Stripe Checkout die Metrik 'begin_checkout' auf dem Server auf:

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 secret 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 });
     // Record metrics using the Google Analytics Measurement Protocol
     // See https://developers.google.com/analytics/devguides/collection/protocol/ga4
     const MEASUREMENT_ID = <GOOGLE_ANALYTICS_MEASUREMENT_ID>; // GA4 Measurement ID
     const API_SECRET = <GOOGLE_ANALYTICS_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}!`));

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) => {
                 gtag("event", "begin_checkout", {
                   event_callback: function () {
                     window.location.href = checkoutSession.url;
                   },
                 });
               });
           });
       });
     </script>
     <form>
       <button id="submit">Checkout</button>
     <form action="/create-checkout-session" method="POST">
       <button type="submit">Checkout</button>
     </form>
   </body>
 </html>