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. As an example, we’ll look at capturing these events in Google Analytics and Google Tag Manager, however you can adapt the same logic for other analytics and tag management solutions such as Segment or Tealium.

See the reference section for a complete list of Checkout Events.

Google Analytics & Google Tag Manager

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.

In your Paddle.js implementation, add the checkoutSuccess and checkoutClose callbacks to your Paddle.Checkout.open() method. You can also add any of our Checkout Events as part of the Paddle.Setup() call. In each of the callbacks, add a line which calls the Tag Manager and triggers the corresponding event flow. 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'});
      }
    });
  };

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.

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. 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 Call Pushing data to GTM

successCallback: function(data) { 
  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
				}] 
      }
		}
  });
}

Checkout Stages

Below is a list of the major checkout stages and the corresponding event.

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