# Zahlungskonversion analysieren
Analysieren Sie Ihre Zahlungskonversion von Stripe Checkout mit Google Analytics 4.
# Gehostete Seite
> This is a Gehostete Seite for when payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/checkout/analyze-conversion-funnel?payment-ui=stripe-hosted.
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](https://support.google.com/analytics/answer/9304153) ein und fügen Sie eine [GA4-Eigenschaft](https://support.google.com/analytics/answer/9744165?hl=en#zippy=%2Cin-this-article) hinzu.
## Ihre Seite einrichten
1. Erstellen Sie eine Produktseite mit der Schaltfläche **Bezahlen**:
```html
Buy cool new product
```
1. Erstellen Sie einen serverseitigen Endpoint, der eine Checkout-Sitzung erstellt und die Seiten bereitstellt:
```javascript
// 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')('<>');
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",
});
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}!`));
```
1. Eine Bestätigungsseite erstellen:
```html
Thanks for your order!
Thanks for your order!
We appreciate your business! If you have any questions, please email
orders@example.com.
```
1. Eine Abbruchseiteerstellen:
```html
Order Canceled!
Start another order.
```
## 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](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#record-pageview-metrics) zur `product`-Seite hinzufügen | [Ereignis vor der Weiterleitung an Stripe Checkout aufzeichnen](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#client-side-event-before-redirect) | [Google Analytics-Tag](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#record-pageview-metrics) zur `success`-Seite hinzufügen |
| Serverseitig | NA | [Ereignis vor der Weiterleitung an Stripe Checkout aufzeichnen](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-redirect) | [Ereignis aufzeichnen, wenn Sie den Webhook `checkout.session.completed` webhook](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-event-recording) empfangen |
| Serverseitig mit gespeicherter Client-ID | NA | NA | Ereignis aufzeichnen, wenn Sie den Webhook `checkout.session.completed` empfangen, und [mit clientseitigen Ereignissen verknüpfen](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#link-client-and-server-side-events) |
### Instrumentierung hinzufügen
1. Fügen Sie `checkout.stripe.com` zu Ihrer Ausschlussliste für Verweise hinzu.
1. Fügen Sie Google Analytics-Tags zu Ihren Produkt-, Erfolgs- und Abbruchseiten hinzu. Tags lösen beim Laden der Seite automatisch ein Ereignis aus.
```html
Buy cool new product
```
```html
Thanks for your order!
Thanks for your order!
We appreciate your business! If you have any questions, please email
orders@example.com.
```
```html
Order Canceled!
Start another order.
```
1. Lösen Sie ein Ereignis unmittelbar vor der Weiterleitung an Stripe Checkout aus:
```html
Buy cool new product
```
### 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.
## Optional: Aufzeichnung 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](https://docs.stripe.com/checkout/fulfillment.md) 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.
```javascript
// 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')('<>');
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",
});
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 = ; // GA4 Measurement ID
const 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}!`));
```
## Optional: Client- und serverseitige Ereignisse verknüpfen
In der [serverseitigen Ereignisaufzeichnung](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-event-recording) 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:
1. 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:
```html
Buy cool new product
```
1. Lesen Sie die ID aus der Anfrage.
1. Speichern Sie die ID in den Metadaten der Checkout-Sitzung.
1. Rufen Sie die ID ab und senden Sie sie mit der Anfrage, um das Ereignis aufzuzeichnen.
```javascript
// 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')('<>');
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",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: , // Tracking ID / Property 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}!`));
```
## Optional: Serverseitige 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:
```javascript
// 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')('<>');
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",
});
// Record metrics using the Google Analytics Measurement Protocol
// See https://developers.google.com/analytics/devguides/collection/protocol/ga4
const MEASUREMENT_ID = ; // GA4 Measurement ID
const 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}!`));
```
```html
Buy cool new product
```
# Eingebettete Seite
> This is a Eingebettete Seite for when payment-ui is embedded-form. View the full page at https://docs.stripe.com/payments/checkout/analyze-conversion-funnel?payment-ui=embedded-form.
Embedded Checkout unterstützt die Nachverfolgung von Conversions und Checkout-Verhalten mit Echtzeit-Analyseereignissen. Weitere Informationen finden Sie unter [Nachverfolgen von Analyseereignissen in Embedded Checkout](https://docs.stripe.com/payments/checkout/embedded-analytics.md).