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.

This page outlines adding analytics using Google Analytics and Tag Manager, but you can follow a similar approach for other analytics products such as Matomo, Segment or Tealium.

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, add a successCallback parameter to your Paddle.Checkout.open() method to fire an analytics event when a buyer completes the checkout.

You can also fire an analytics event on the closeCallback or any of our more granular Checkout Events as part of the Paddle.Setup() call.

In each of the callbacks, add a line which calls the Tag Manager and references the corresponding trigger (see below). 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

Enabling settings in Google Analytics

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’.

Enabling settings in Google Tag Manager

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’.

Configure GTM trigger

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.

Pushing Purchase Event to GTM

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.

Main Checkout Pages

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.

Pushing Checkout Progress to GTM

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.