Connecting Stripe to GA4 for Voxel Theme

Effortlessly track and analyze your Stripe transactions in Google Analytics 4. Get a comprehensive view of your customer’s journey, from visit sources to payment, and unlock insights to drive growth and optimize your revenue streams.

stripe to ga4

How to connect Stripe and Google Analytics 4 Ecommerce

Hello Voxel theme users! If you are seeking an effective method to integrate Stripe with Google Analytics 4 (GA4) and track your customers’ journey, you have come to the right place. In this article, I’ll guide you through the process of using Able Customer Data Platform (CDP) to effortlessly connect these platforms and optimize your data. 

What is worth noting is that I’m using the integration myself on Placówkowo! So this is a real-case scenario that I use and recommend. 

Why Use Able CDP?

Able CDP serves as an ideal solution for integrating Stripe and GA4 for the Voxel. It combines browser tracking with server API integrations, enabling you to associate website activity with backend purchases. This means that you can attribute 99% of your sales to the appropriate marketing source, ad click, and landing page, providing you with valuable insights for data-driven decisions.

The best part for Voxel theme users? There is no need for coding or complex manual setup. Able CDP is already proficient in bridging marketing data between Stripe and GA4, making it perfect for your Voxel theme website.

IMPORTANT NOTE!!! Our VOXEL community has a lifetime discount code for 10% off! Just use: VOXEL23 on the checkout and safe some $$$ 😉

Get Able

How Able CDP Integrates Stripe and GA4

Able CDP simplifies the process of determining which GA4 visitors become paying Stripe customers on your Voxel listing site. It allows you to report actual Stripe revenue in GA4, attributing all subsequent Stripe revenue to the original GA4 visitor and campaign—even if it occurs weeks after the initial visit.

Here is what Able CDP can do for Voxel theme users:

  1. Store GA4 Client Id for each lead, checkout, and sign-up.
  2. Attribute successful Stripe payments to the GA4 user id and send e-commerce transactions to GA4.
  3. Send other relevant Stripe events to GA4, such as subscription start or cancellation.

Connecting Stripe with GA4 E-commerce

Step 1: Sign up for a free Able CDP account.

Step 2: Install the Able tracking code on your website.

After signing up, open Get Code section of the Able Dashboard and enter URLs of the HTML lead and sign-up forms you’re using.

Connect Stripe with Google Analytics 4 - step 1

Example of a form automatically recognized on the page. At least one personally identifying field such as an email or phone should be present for Able to work correctly.

As Voxel renders sign-up forms dynamically and they’re not present in the HTML code of the pages in the form they’re rendered by browser, we won’t be using Able’s automatic form recognition in this tutorial. (It would work great with standard WordPress forms’ plugins though.)

Click the Get Code button to let Able generate tracking code for the website. The code can be embedded in a page using any suitable method, for example, inserted in the <head> section or added as a custom HTML code via GTM.

Then, identify the forms where your users sign-up and send customers’ email to Able using GTM. Able will store the email, associate it with browser session, click and browser ids, allowing it to attribute future Stripe revenue to the visits and ad clicks.

To set up form tracking in GTM, we will need to write CSS queries to identify form and email elements. Former to track form submission event, latter to record the email and send it to Able.

     1. Open the web page containing the sign-up form in your browser (e.g., Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari).

     2. Right-click the element with the email and select “Inspect”

Connect Stripe with Google Analytics 4 - step 2

     3. An element tree will appear, the selected element would be highlighted:

Connect Stripe with Google Analytics 4 - step 3

     4. Now that the email input element is selected, examine the HTML structure to identify the relevant information for your CSS query:

    1. Check if the input element has a class or an ID attribute. If it does, you can use that in your CSS query.
    2. Look for any parent elements (e.g., form, div, or section) that have a class or an ID attribute. These can also be used to make your CSS query more specific.

 

     5. Construct the CSS query based on the information you’ve gathered:

    1. If the email input element has a unique class or ID, you can use it directly in the query, e.g., #emailInput or .email-input.
    2. If the input element is inside a form or another container element with a unique class or ID, you can include that in the query, e.g., #loginForm input[type=email] or .form-container input[type=email].

     

     6. You can further refine the query if necessary by adding more specific selectors, such as the element’s tag name, attribute values, or by using combinators (e.g., child, sibling, or descendant combinators).

Usually, it is preferable to construct CSS queries to be as specific as possible. In case of Voxel, there’s no clear way to identify the sign-up form specifically, so we’ll be using GTM click URL condition to determine if the complete form is a sign-up form.

The CSS query for the email input field in the example above is “.ts-login form input[type=email]”. A complete reference on how CSS queries can be written is available at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Once you have determined location of form and input fields on the webpage, create GTM trigger and tag to track them.

The trigger will track all submissions that happen at the registration URL:

Connect Stripe with Google Analytics 4 - step 4

Create a custom HTML tag that sends entered email as part of a Lead event to Able. Note how the CSS query determined in the previous step is used to locate the input field value.

Connect Stripe with Google Analytics 4 - step 5

The given JavaScript code snippet performs two main tasks:

  1. It selects an email input element from the login form with the class „ts-login”. This is done using the querySelector method, which returns the first element that matches the specified selector. In this case, the selector is looking for an input element with a type of ’email’ inside a form element within an element with the 'ts-login’ class.

    var emailInputEl = document.querySelector(’.ts-login form input[type=email]’);

  2. It sends a 'Lead’ tracking event to the window.uipe function along with the email value of the selected input element. The window.uipe function is part of a tracking library called Able, which is used to track customer interactions and events on a website. In this case, it’s tracking when a visitor provides their email address.

    window.uipe(’track’, 'Lead’, { keys: { email: emailInputEl.value } });

 

The window.uipe function has several parameters and options that can be passed to it. However, in this code snippet, it only uses the 'Lead’ event type and the email address as a visitor key. The Able library can then use this information to associate the visitor with their contact details and send the data to various marketing and CRM platforms, such as ActiveCampaign and Shopify. The complete reference of the window.uipe function provided by Able is available on https://www.ablecdp.com/integration-guides/tracking-in-react-vue-js-and-other-spa-frameworks

In summary, this JavaScript code snippet selects an email input element from a login form and sends a 'Lead’ tracking event with the email value to the Able library for tracking and CRM integration purposes.

 

Step 3. Send conversion events to Able

Purchases and other conversions need to be sent to Able to be attributed. Able will look up tracked visitors by identifier such as email or phone and will attribute the conversion to the source without relying on cookies. (See How Able CDP Works for details.)

For better reliability, Able relies on server-to-server connections for receiving conversion events for all platforms that support them. This allows Able to eliminate tracking issues associated with tracking thank you pages, as well as correctly attribute all sales to the lead source regardless of when they occur. Depending on the funnel type, this may be:

  • A payment system such as Stripe or Chargebee.
  • An e-commerce platform such as WooCommerce or Kajabi.
  • A CRM system such as Salesforce or Scoro.

 

Step 4. Verify that the data appear in Able

Customer tracking data will appear in Able Dashboard. Use Able’s Customer Journey Mapping to verify that:

  1. New leads and sign-ups under Customers – Leads (or similar event, depending on funnel) have correct marketing source and we aren’t missing any.
  2. Each purchase appears in the Customers – Purchases tab and all new purchases (made by customers for which Able was expected to track lead forms) have correct marketing source.

Please contact support if you notice any discrepancy and we’ll verify your tracking setup and point any possible sources for inconsistencies in the tracking.

 

Step 5. Connect Able to conversions APIs and BI software

Able supports all popular marketing conversion APIs such as Facebook Conversions API, Google Ads API and TikTok Events API.

Able sends detailed conversion data depending on what’s available, allowing ad platforms to attribute most clicks even when incomplete data are available using enhanced customer matching, as well as providing specific click or browsers identifiers when they’re available. (Read more about differences between typical conversions API integrations and our approach in our blog.)

Able also integrates with Google Analytics 4. This is especially useful for sending any back-end conversions such as Stripe processed payments, e-commerce completed orders and CRM qualification and closed won events as e-commerce transactions but can also be used to report browser conversions we track such as lead forms, simplifying tracking setup. Both Google Analytics 4 and Universal Analytics are supported.

Enable integration with BigQuery to access raw tracking data from Data Studio, Google Sheets and other BI and dashboarding software.

And that’s it! Able will start sending all purchases attributed to GA4 visitors to GA4 Measurement API. You’ll see conversions appear in all standard reports, and purchases will show up in all standard GA4 reports. If you will have any questions or trouble with setting it up, feel free to contact Able directly via email! They will be more than happy to help you. 

Contact Able