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.
// 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')('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

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.