Zahlungskonversion analysieren
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.
Website einrichten
Erstellen Sie eine Produktseite mit der Schaltfläche Checkout:
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. // 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'So erstellen Sie die Bestätigungsseite:
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>
So erstellen Sie eine Stornoseite:
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:
- Ihre Produktseite angesehen hat.
- Auf die Schaltfläche Kaufen geklickt hat und zu Stripe Checkout weitergeleitet wurde.
- Die Zahlung abgeschlossen hat und zur Bestätigungsseite weitergeleitet wurde.
Übersicht
Instrumentierung hinzufügen
Fügen Sie
checkout.stripe.com
zu Ihrer Ausschlussliste für Verweise hinzu.Fügen Sie Ihren Produkt-, Bestätigungs- und Stornoseiten Google Analytics-Tags hinzu. Tags lösen beim Laden der Seite automatisch Ereignisse 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>
Metriken der Zahlungskonversion analysieren
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 an die Bestätigungsseite weitergeleitet wurden.
Diese Zahlen geben Ihnen Aufschluss darüber, zu welchem Zeitpunkt Ihre Besucher/innen den Zahlungsvorgang verlassen.