# Analyser votre tunnel de conversion
Analysez votre tunnel de conversion Stripe Checkout avec Google Analytics 4.
# Page hébergée
> This is a Page hébergée 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.
Utilisez Google Analytics 4 (GA4) pour suivre la progression des utilisateurs dans votre tunnel d’achat Stripe Checkout. Avant de commencer, configurez un [compte GA4](https://support.google.com/analytics/answer/9304153) et ajoutez une [propriété GA4](https://support.google.com/analytics/answer/9744165?hl=en#zippy=%2Cin-this-article).
## Configurer votre site
1. Créez une page produit avec un bouton **Checkout** :
```html
Buy cool new product
```
1. Créez un endpoint côté serveur qui crée une session Checkout et sert les pages :
```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. Créez une page de confirmation :
```html
Thanks for your order!
Thanks for your order!
We appreciate your business! If you have any questions, please email
orders@example.com.
```
1. Créez une page annulée :
```html
Order Canceled!
Start another order.
```
## Utilisation d’une instrumentation
Dans l’exemple suivant, nous supposons que votre client a :
- Consulté la page de votre produit.
- Cliqué sur le bouton **Acheter** et été redirigé vers Stripe Checkout.
- Effectué le paiement et été redirigé vers la page de confirmation.
### Résumé rapide
| Méthode | Consulté un produit | Cliqué sur le bouton **Acheter** | Achat finalisé |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Côté client | [Ajouter une balise Google Analytics](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#record-pageview-metrics) à la page `product` | [Enregistrer l’événement avant de le rediriger vers Stripe Checkout](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#client-side-event-before-redirect) | [Ajouter une balise Google Analytics](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#record-pageview-metrics) à la page `success` |
| Côté serveur | S.O. | [Enregistrer l’événement avant de le rediriger vers Stripe Checkout](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-redirect) | [Enregistrer l’événement lorsque vous recevez le webhook `checkout.session.completed`](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-event-recording) |
| Côté serveur avec ID client stocké | S.O. | S.O. | Enregistrer l’événement lorsque vous recevez le webhook `checkout.session.completed`, et [créer un lien vers les événements côté client](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#link-client-and-server-side-events) |
### Ajouter une instrumentation
1. Ajoutez `checkout.stripe.com` à votre liste d’exclusion des parrainages.
1. Ajoutez des balises Google Analytics à vos pages produit, votre page de confirmation et votre page d’annulation. Les balises déclencheront automatiquement un événement lors du chargement de la page.
```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. Déclenchez un événement juste avant la redirection vers Stripe Checkout :
```html
Buy cool new product
```
### Analyser les mesures de votre tunnel de conversion
Après avoir ajouté l’instrumentation appropriée, vous pouvez consulter les mesures qui correspondent à chaque étape définie dans votre tunnel de conversion :
- **Vues de la page produit :** nombre de visiteurs de la page qui ont consulté la page produit.
- **Nombre d’événements begin\_checkout :** nombre de visiteurs de la page qui ont cliqué sur le bouton **Acheter** et ont été redirigés vers Stripe Checkout.
- **Vues de la page de confirmation :** nombre de visiteurs de la page qui ont finalisé leur achat et ont été redirigés vers la page de confirmation.
À l’aide de ces chiffres, vous pouvez voir à quelle étape du processus les visiteurs abandonnent dans votre tunnel de conversion.
## Optional: Enregistrement des événements côté serveur
Dans cet exemple, pour suivre la finalisation d’un achat, nous examinons le scénario dans lequel votre utilisateur atteint la page de confirmation. Bien que cette solution convienne la plupart du temps, il se peut qu’elle ne suffise pas dans certains cas, par exemple :
- Flux de paiement sans page de confirmation désignée.
- Cas où il est important de consigner la mesure de finalisation des achats, même lorsque la redirection vers la page de confirmation échoue.
- Situations dans lesquelles les clients actualisent fréquemment une URL de confirmation parce qu’elle contient des informations utiles (par exemple, l’état d’avancement de l’expédition ou un numéro de confirmation).
> #### Gestionnaire d’événements
>
> Pour enregistrer la mesure de finalisation d’un achat sans page de confirmation de paiement, [installez un gestionnaire d’événements](https://docs.stripe.com/checkout/fulfillment.md) qui vous permettra d’enregistrer une mesure à chaque événement `checkout.session.completed`.
Après avoir ajouté le code suivant en surbrillance, vous pouvez utiliser la mesure `purchase` pour analyser le nombre de visiteurs ayant effectué un achat, au lieu du nombre de pages vues :
```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: Liaison des événements côté client et côté serveur
Dans l’[enregistrement des événements côté serveur](https://docs.stripe.com/payments/checkout/analyze-conversion-funnel.md#server-side-event-recording), vous avez enregistré les mesures côté serveur via un ID client anonyme. Cet ID est différent de celui qui est associé aux mesures de vues de la page, de manière à ce que Google Analytics ne puisse pas lier les mesures de vues de la page et d’achats. Pour conserver un lien entre les mesures côté client et côté serveur, procédez comme suit :
1. Choisissez un ID unique pour le visiteur (par exemple, son ID client Google Analytics) et envoyez-le au serveur :
```html
Buy cool new product
```
1. Lisez l’ID depuis la demande.
1. Enregistrez l’ID dans les métadonnées de la session Checkout.
1. Récupérez l’ID et envoyez-le avec la demande d’enregistrement de l’événement.
```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: Redirections côté serveur
Dans cet exemple, nous supposons que les redirections vers Stripe s’effectuent sur le client. Si vous avez besoin de redirections vers Stripe depuis votre serveur, enregistrez la mesure `'begin_checkout'` sur le serveur, juste avant la redirection vers Stripe Checkout :
```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
```
# Page intégrée
> This is a Page intégrée 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.
Le Checkout intégré prend en charge le suivi des conversions et du comportement de paiement via des événements d’analyse en temps réel. Voir [Suivre les événements d’analyse dans le Checkout intégré](https://docs.stripe.com/payments/checkout/embedded-analytics.md).