Analyze your conversion funnel

Analyze your Stripe Checkout conversion funnel with Google Analytics 4.

Use Google Analytics 4 (GA4) to track users as they progress through your Stripe Checkout purchase funnel. Before you begin, set up a GA4 account and add a GA4 property.

Set up your site

Create a product page with a Checkout button:

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>

Create a server-side endpoint that creates a Checkout Session and serves the 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}!`));

Create a success page:

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>

Create a canceled page:

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

Instrumentation walkthrough

In the following example, we assume your customer has:

Viewed your product page.
Clicked the Buy button and was redirected to Stripe Checkout.
Completed the payment and was redirected to the success page.

Quick summary

Method	Viewed product	Clicked Buy button	Completed purchase
Client-side	Add Google Analytics tag to `product` page	Record event before redirecting to Stripe Checkout	Add Google Analytics tag to `success` page
Server-side	NA	Record event before redirecting to Stripe Checkout	Record event when you receive the `checkout.session.completed` webhook
Server-side with stored client ID	NA	NA	Record event when you receive the `checkout.session.completed` webhook, and link to client side events

Add instrumentation

Add checkout.stripe.com to your referral exclusion list.

Add Google Analytics tags to your product, success, and canceled pages. Tags automatically fire an event on page load.

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>

Fire an event just before redirecting to 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>

Analyze your conversion funnel metrics

After you add the proper instrumentation, you can see the metrics corresponding to each step defined in your conversion funnel:

product page views: The number of page visitors who viewed the product page.
begin_checkout event count: The number of page visitors who clicked the Buy button and were redirected to Stripe Checkout.
success page views: The number of page visitors who completed the purchase and were redirected to the success page.

Using these numbers, you can see where visitors are dropping off in your conversion funnel.

OptionalServer-side event recording

In this example, to track the completion of a purchase, we consider the scenario where your user reaches the success page. While this is generally suitable for most use cases, it might not offer a comprehensive solution for some, such as:

Checkout flows without a designated success page.
Instances where it’s important to log the purchase completion metric, even when the redirection to the success page fails.
Situations in which customers frequently refresh a success URL due to it containing useful information (for example, shipping progress or a confirmation number).

Event handler

To record the purchase completion metric without a success page, set up an event handler and record a metric whenever you get the checkout.session.completed event.

After you add the highlighted following code, you can use the purchase metric to analyze the number of visitors that completed a purchase, instead of the number of success page views:

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

OptionalLinking client and server-side events

In Server-side event recording, you recorded the server-side metrics against an anonymous client ID. That ID is different from the one associated with the page view metrics, so Google Analytics has no way to link the page view and purchase metrics. To maintain a link between the client-side and server side metrics:

Choose an ID unique to the visitor (for example, the Google Analytics client ID) and send it to the server:

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>

Read the ID from the request.
Store the ID in the Checkout Session’s metadata.

Retrieve the ID and send it with the request to record the event.

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

OptionalServer-side redirects

In this example, we assume that redirects to Stripe happen on the client. If you need to redirect to Stripe from your server, record the 'begin_checkout' metric on the server, just before redirecting to 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>