How to setup Google Tag Manager and Google Analytics with Paddle.js

This guide will help you track events in your Paddle.js checkout with Google Tag Manager and Google Analytics

We enable you to capture a comprehensive number of events at key stages when a customer interacts with your Paddle.js checkout. Common use cases include:

  • Tracking successful checkout completions to measure the performance of a marketing campaign
  • Capturing errors such as a declined coupon in order to fix these issues
  • Firing events at each stage of the checkout completion, going as granular as the individual field completed, to figure out where people drop off
  • Facilitating a more detailed analysis of a checkout A/B testing campaign

You can use whichever analytics solution you prefer to capture these events. In this guide we will walk you through how you can setup the tracking via Google Tag Manager and Google Analytics of 2 simple events, the checkout completion and cancellation.

Step 1: 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.

Step 2: Once ready, create a new Container in the Tag manager. As above, add the required code and set the correct Container ID.

Step 3: In your Paddle.js implementation, add the checkout success and checkout close callbacks to your Paddle.Checkout.open() method.

You can find more details about callbacks and the events and properties associated in our Paddle.js callback developer documentation (https://paddle.com/docs/paddlejs-callbacks).

In the example below we are triggering 2 events: one when the checkout is successful, and one when the checkout is closed.

<script type="text/javascript">
  jQuery('.js-buy').click(function() {
    Paddle.Checkout.open({
      product: 520773,
      successCallback: function(data) {
        dataLayer.push({'event': 'checkoutSuccess'});
      },
      closeCallback: function(data) {
        dataLayer.push({'event': 'checkoutClose'});
      }
    });
  });
</script>

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.

Step 4: 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.

Step 5: Next, create two Triggers, called checkoutClose and checkoutSuccess with the following configuration (change names and variables for the checkoutSuccess one accordingly).

Google Tag Manager Trigger Configuration

Step 6: 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.

Google Analytics Tag Configuration

We’ve used GTM and GA in this example, however you should be able to adapt the same logic fairly easily for other analytics and tag management solutions. Most of them, whether it’s Segment or Tealium, tend to have a similar approach to the way they handle event capture.

If you need any help with your specific analytics or marketing stack, just reach out and we’ll look into it with you!