Integrating Google Tag Event Analytics into Paypal Subscriptions API Smart Button (Paypal JS SDK) for Conversions

Been a while (over a year 😅), so I’ve been working with Google Ads to increase subscriptions and needed a way to tell me how many users subscribed from the ads instead of just clicks onto the website, so to do this we use a Google Tag Event.

Couldn’t really find any/much documentation about how to do this manually without using some WordPress plugin for example but as the website is made using bootstrap it needs to be custom coded using Paypal Javascript SDK, so thought I’d write a quick blog post.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'YOUR_GOOGLE_TAG_ID');
</script>

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&vault=true&intent=subscription"></script>

<div id="paypal-plan-container"></div>
<script>
paypal.Buttons({

    onInit: function(data, actions) {
        //On website load (Optional)
    },

    onClick: function() {
        //On button click - Could do some validation (Optional)
    },

    createSubscription: function(data, actions) {
        return actions.subscription.create({
            'plan_id': YOUR_PLAN_ID // 'P-0X0X0X0X0X0X0X0X0X0X0X0X' Should look like this
        });
    },

    onApprove: function(data, actions) {
        return actions.subscription.get().then(function(details) {
            // Here you can integrate Google Analytics tracking for successful subscription
            gtag('event', 'successfulSubscription', {
              'event_category': 'Subscription',
              'event_label': 'Successful Subscription',
              'value': parseFloat(details.billing_info.last_payment.amount.value)
            });
            alert("Thank you for subscribing "+details.subscriber.email_address);
        });
    },
         
    onCancel(data) {
        //Shows when you cancel the Paypal popup window (Optional)
    },
    
    onError(err) {
        //Shows when there is an error with the checkout flow (Optional)
    },
    
    style: { // (Optional)
        layout:  'vertical',
        color:   'gold',
        shape:   'rect',
        label:   'paypal',
        disableMaxWidth: true
    }

}).render('#paypal-plan-container');
</script>

Notes:
With the Google Tag script, replace YOUR_GOOGLE_TAG_ID with your Google TagID which you can find on your Google Analytics account – [GA4] Find your Google tag ID & info about installing – Install the Google tag (gtag.js).
The Paypal SDK JS script, replace YOUR_CLIENT_ID with your ClientID from https://developer.paypal.com
vault & subscription parameters are needed for Subscriptions.

The smart button will generate/load in paypal-plan-container div.
You have inside the paypal.Buttons({}) – onInit, onClick, createSubscription, onApprove, onCancel & onError, plus the style CSS also.
Here is the Paypal SDK JS Reference.

Replace YOUR_PLAN_ID with your PlanID from Paypal Developer site.
Also note that your ClientID and PlanID must match if they are from either the Sandbox or Live API.
Not sure if bug with Paypal but for the Sandbox I had to create the Plan using cURL, first by getting an Access Token and then creating a Product and then a Plan to get the PlanID. (Can contact me for help with this.)

In the onApprove function, from the data variable you only get back – orderID, subscriptionID, facilitatorAccessToken & paymentSource so we use actions.subscription.get() function to get the actions variable to obtain more details about the subscription.
From this we can get information like details.subscriber.email_address, details.subscriber.name.given_name, details.subscriber.name.surname and also details.billing_info.last_payment.amount.value, etc.
An example of the details response from actions.subscription.get() can be found at the Paypal Subscriptions API

Then use the Google Tag Event gtag() to create an event with event_category, event_label and value and whatever else you might need to report – Send data to Google Analytics with gtag.js. Also for the value, use parseFloat() as the value comes as a string e.g. “10.0”
And details.billing_info.last_payment.amount.value doesn’t show up for sandbox (not sure why), only for live but you can use billing_info.cycle_executions data instead.

After successful Subscription signups you should then see the data in your Google Analytics->Reports->Engagement->Events page.

Be sure to check out my other blog post about using Discount Code for Paypal Subscriptions

Hope this helps some developers, leave a comment so I know my time wasn’t wasted lol.

macOS Sonoma 14.4.1 | Apple M2 Max | Opera GX 109.0.5097.79