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(); // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. 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({ 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}!)); - 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:"></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
Add instrumentation
- Add
checkout.stripe.comto 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> <!-- the related setting the related setting the related setting --> <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", "<the related setting>"); </script> <!-- END the related setting the related setting --> <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> <!-- the related setting the related setting the related setting --> <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", "<the related setting>"); </script> <!-- END the related setting the related setting --> <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:"></a>. </p> </body> </html>canceled.html<html> <head> <!-- the related setting the related setting the related setting --> <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", "<the related setting>"); </script> <!-- END the related setting the related setting --> <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> <!-- the related setting the related setting the related setting --> <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", "<the related setting>"); </script> <!-- END the related setting the related setting --> <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.