Analyser votre tunnel de conversion
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 et ajoutez une propriété GA4.
Configurer votre site
Créer une page produit avec un bouton ** 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>
Créez un endpoint côté serveur qui créera une session Checkout et servira les pages :
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'Créer une page de confirmation de paiement :
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>
Créer une page d’annulation de paiement :
canceled.html<html> <head> <title>Order Canceled!</title> </head> <body> <p> <a href="/product">Start another order</a>. </p> </body> </html>
Guide pas à pas pour l'instrumentation
Dans l’exemple suivant, nous partons du principe que votre client a :
- Consulté votre page produit.
- Cliqué sur le bouton Acheter et a été redirigé vers Stripe Checkout.
- Effectué le paiement et a été redirigé vers la page de confirmation.
Récapitulatif rapide
Ajouter une instrumentation
Ajoutez
checkout.stripe.com
à votre liste d’exclusion des parrainages.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.
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>
Déclencher un événement juste avant de procéder à la redirection vers Stripe Checkout :
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>
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 ayant consulté la page produit.
- Nombre d’événéments begin_checkout : nombre de visiteurs de la page ayant cliqué sur le bouton Acheter et qui ont été redirigés vers Stripe Checkout.
- Vues sur la page de confirmation : nombre de visiteurs de la page ayant finalisé leur achat et ayant été redirigés vers la page de confirmation de paiement.
À l’aide de ces chiffres, vous pouvez voir à quelle étape du tunnel de conversion les visiteurs abandonnent le processus.