Measure Conversion
You can capture a comprehensive number of events at key stages when a customer interacts with your Paddle.js checkout. This can help you understand your customer’s behaviour.
Basic Event Tracking
Property and Container Setup
To set up Google Analytics and Tag Manager with Paddle.js, first set up a Property on your GA account, and add the required code to your page, remembering to add your Analytics ID.
Next, create a new Container in the Tag manager. As above, add the required code and set the correct Container ID.
Track Checkout Completion
In your Paddle.js implementation, purchases can be tracked using the successCallback parameter in the Paddle.Checkout.open() method, which will fire an analytics event when a buyer completes the checkout. You can also fire an analytics event on the closeCallback for tracking when the checkout is closed.
Alternatively, you can track these events (or any of our more granular checkout events) via the eventCallback as part of the Paddle.Setup() method. Unlike the previous method, this is non-blocking and will fire in the background, allowing the checkout to continue with its typical functionality such as displaying the default checkout success message.
In each of the callback, add a line which calls the Tag Manager and references the corresponding trigger. You can customize the event names according to your own naming conventions.
In the example below we are triggering 2 events: one when the checkout is successful, and one when the checkout is closed.
document.getElementById('buy').addEventListener('click', openCheckout);
function openCheckout() {
Paddle.Checkout.open({
product: 520773,
successCallback: function(data) {
dataLayer.push({'event': 'checkoutSuccess'});
},
closeCallback: function(data) {
dataLayer.push({'event': 'checkoutClose'});
}
});
};
If you are redirecting to a Thank You page after the checkout completes, we recommend tracking checkout completion when that page loads instead of in a callback to avoid race conditions.
Set Up Variables and Triggers
Next, in the Tag Manager, start with creating a User-Defined Variable. For this example we’ve used a Custom Event variable and called it Custom Event Variable.
Next, create two Triggers, called checkoutClose and checkoutSuccess with the following configuration (change names and variables for the checkoutSuccess one accordingly).
Finally, set up the respective Tags. Only the reference to the correct trigger is strict here, the Analytics settings can be customized and will depend on the categories you wish to set up in your Google Analytics Property.
Enhanced Ecommerce - Google Analytics
Google Analytics also allows E-commerce information to be passed in so that revenue can be linked to campaigns and customer navigation behaviour. The tag configuration for Enhanced E-Commerce is slightly different to the above.
To use this feature, first enable E-commerce and enhanced E-commerce settings in the Google Analytics Admin panel
In your Google Tag Manager container, create a new user-defined variable of type ‘Google Analytics Settings’.
Add your GA tracking ID and, under ‘More Settings > Ecommerce’ select ‘Enable Enhanced Ecommerce Features’ and ‘Use data layer’.
Next, in Tag Manager, add a new Custom Event trigger called ‘purchase’. This should correspond to a tag called ‘Purchase’. The tag should be type Google Analytics, with category ‘Ecommerce’ and action ‘Purchase’.
You’re now ready to send E-commerce data to GTM using a datalayer push. As above, this could either be as part of a checkout success callback function or after being redirected to a Thank You page. If you have a Thank You page redirect, then we recommend firing tags on that page so that the redirect does not create a race condition with your conversion reporting.
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'currencyCode': data.checkout.prices.customer.currency,
'purchase': {
'actionField': {
'id': data.checkout.id,
'affiliation': 'Your store name',
'revenue': data.checkout.prices.customer.total,
'tax': data.checkout.prices.customer.total_tax,
'coupon': data.checkout.coupon.coupon_code
},
'products': [{
'name': data.product.name,
'id': data.product.id,
'price': data.checkout.prices.customer.total,
'brand': 'Your brand name',
'quantity': data.product.quantity
}]
}
}
});
Tracking Checkout Stages
You may also wish to track progress within the checkout to generate checkout funnels as part of your E-Commerce reporting.
Below is a list of the major checkout stages and the corresponding checkout event fired by Paddle.js.
- User opens Paddle Checkout -
Checkout.Loaded - User has proceeded past the ‘email’ Checkout page -
Checkout.Login - User proceeded past the location page -
Checkout.Location.Submit - User has chosen payment method -
Checkout.PaymentMethodSelected - Payment succeeds -
Checkout.PaymentComplete
See our API reference guide for a complete list of Checkout Events.
To register progress through the checkout, you should create a Universal Analytics Tag of type “Event”, category “Ecommerce” and action “Checkout”. Ensure that Enhanced Ecommerce Features and Data Layer are both enabled and link to a trigger of
event equals checkout.
Progress through the checkout is tracked by numbering the steps above and sending the step as step: 1 in the actionField object.
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 1},
'products': [{
...
}]
}
}
});Performance can be tracked in your analytics dashboard under Conversions > E-commerce > Checkout Behavior.
To add more meaningful labelling to your checkout steps, set up step labels in Admin > E-Commerce Settings > Checkout Labelling.
