Analyser votre tunnel de conversion

Analysez votre tunnel de conversion Stripe Checkout avec Google Analytics 4.

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éez 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ée une session Checkout et sert les pages :

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}!`));

Créez une page de confirmation :

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éez une page annulée :

canceled.html
<html>
  <head>
    <title>Order Canceled!</title>
  </head>
  <body>
    <p>
      <a href="/product">Start another order</a>.
    </p>
  </body>
</html>

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 à la page `product`	Enregistrer l’événement avant de le rediriger vers Stripe Checkout	Ajouter une balise Google Analytics à la page `success`
Côté serveur	S.O.	Enregistrer l’événement avant de le rediriger vers Stripe Checkout	Enregistrer l’événement lorsque vous recevez le webhook `checkout.session.completed`
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

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éclenchez un événement juste avant 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 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.

FacultatifEnregistrement 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 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 :

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}!`));

FacultatifLiaison des événements côté client et côté serveur

Dans l’enregistrement des événements côté serveur, 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 :

Choisissez un ID unique pour le visiteur (par exemple, son ID client Google Analytics) et envoyez-le au serveur :

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>

Lisez l’ID depuis la demande.
Enregistrez l’ID dans les métadonnées de la session Checkout.

Récupérez l’ID et envoyez-le avec la demande d’enregistrement de l’événement.

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}!`));

FacultatifRedirections 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 :

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>