Want to understand how your users interact with your checkout process? By integrating Google Analytics (GA) with Cleeng's Hosted Customer Flows, you can track key events like when a checkout loads or when a payment succeeds.
This guide explains how to use the Widget Lifecycle Events to bridge Cleeng's activity with your analytics tools.
How it works
|
Important Remember that the Cleeng script should be added to your application, in the head section, in order to start using Hosted Customer Flows. Read more. |
Cleeng's Hosted Customer Flows are designed to communicate with your website. Even though the checkout is hosted by Cleeng, it can "signal" your website whenever an important action happens. We call these signals Widget Lifecycle Events.
By listening for these events, you can automatically tell Google Analytics: "Hey, a user just started the checkout process!" or "A payment for $10 was successful!"
Step-by-Step Implementation
- Prerequisites
Ensure you have the Google Analytics 4 (GA4) global site tag installed on the page where your Hosted Customer Flow is embedded or running.
- Integration
Add a specific "listener" to your website code. This listener waits for the Cleeng checkout to load and then watches for specific events. Here is the logic you will need to follow:
Step 1. Listen for the SDK to Load
Because web pages load dynamic content at different speeds, your script first needs to wait for a signal that the Cleeng library is fully ready. This signal is called CLEENG_SDK_LOADED.
Step 2. Subscribe to Events
Once the SDK is ready, your script can subscribe to the onWidgetEvent method. Think of this as tuning a radio to a specific frequency - your website is now ready to receive broadcasts from the checkout widget.
Step 3. Map and Send Data
When an event occurs (like a successful payment), the widget broadcasts detailed data. Your script captures this and "maps" it to Google Analytics.
Example: The widget says totalPrice: 18.36. Your script takes that number and sends it to GA as the value parameter.
Please refer to our Developer Portal guide for the complete code snippets and implementation details regarding window.cleeng and onWidgetEvent.
- What data can I track?
Once the connection is established, you can send detailed data to Google Analytics.
Events:
- Checkout Loaded: Triggered as soon as the checkout appears. This is perfect for tracking the start of your purchase funnel.
- Payment Succeeded: Triggered immediately after a successful transaction. You can use this to track Conversions and Revenue.
- Payment Failed: Triggered if a payment is declined. This helps you monitor drop-off rates at the final hurdle.
Data Points Available:
For each event, Cleeng provides rich data that you can pass to GA, including:
- Offer Title: (e.g., "Monthly Subscription")
- Price & Currency: (e.g., 18.36 EUR)
- Order ID: Unique identifier for the transaction.
- Payment Method: (e.g., Card, PayPal)
All the data points and specific examples can be found in our Developer Portal guide.
Testing
Once you have added the code:
- Open your website and go through the checkout process.
- Check the Realtime view in your Google Analytics dashboard.
- You should see events appearing as you move through the flow.