Google Analytics Event Tags and the PayPal Buy Now Button

We recently found the right way to install a Google Analytics tag on a PayPal "Buy Now" button, and we decided to document our findings for those who have a similar problem.

If you have installed a Google Analytics tag on one of these buttons, there is a chance you did it incorrectly and you're not getting accurate data.

Example of the Working Tag

For those who are well-acquainted with HTML, Javascript, and Google Analytics, here is the short answer: Add an 'onsubmit' handler that fires the Google Analytics Event Tracking call, and then calls a Javascript callback function which submits the HTML form. Below is a working example:

<script>
var trackPayPalBuyNow = function() {
ga('send', 'event', 'Buy Now', 'click', {'hitCallback':
function () {
document.getElementById("buynow").submit();
}
});
}
</script>
<form action="https://www.paypal.com/cgi-bin/webscr" id="buynow" method="post" return false;">

 

Now, let's talk about why this isn't your average Google Analytics tag.

Why It Is Easy to Get It Wrong

If I hadn't been paying close attention by testing the analytics tags thoroughly, I might never have known that my original attempt to install the tag was incorrect. My first attempt to install the tag was basically successful: I clicked on the tag, and I saw exactly that number of clicks in Google Analytics. But after clicking on the Buy Now button several times, I realized that the tag was intermittently firing. In other words, it was only working some of the time. There were some times I would click on the Buy Now button, and the data didn't reflect my click.

"Race Conditions"

Pretend you have a web site that consists of a single web page, and on that web page are two elements: A button and a link. The button simply reveals more information to the visitor (but doesn't go to a different page) and the link takes the visitor to a different page. Installing a web analytics tag on the button will give you accurate information, but the same tag on the link will give you inaccurate information.

Here's a basic Google Analytics event tag installed on the button.

<button value="Click me" onclick="ga('send','event','button','click');" />

Reference: The standard instructions for installing Google Analytics event tracking. The tag will fire every time without a problem.

But, with the link, there is a problem: When the user clicks the link, Google Analytics begins to fire the call, but almost immediately the web browser begins 'unloading' the page. The web browser basically has the choice to either fire the tag and then go to the new page, or go to the new page first, so the analytics tag is not sent to Google at all!

Tags on Links Should Have Delays or Callbacks

There are two ways to tag a link so that you get reliable data:

1) Impose a delay after the tag is fired, allowing some time for the tag to fire before the next page loads. This is pretty reliable, but it's not perfect.

2) Use a callback function. A callback function temporarily puts Google Analytics in charge of the user's browser, escorting the data to a safe arrival at Google, and then it hands control back to the browser. This is very reliable.

We Couldn't Get It to Work using Google's Snippet

(UPDATE on 2/10/2017: This section is now obsolete because Google no longer recommends callbacks; Instead, they recommend writing a Google Analytics Plugin)

Google has a prescribed answer for installing a tag with a callback. When we tried that solution, we found that the Buy Now buttons stopped working -- we clicked on the buttons, and nothing happened! This was an interesting lesson.

What we didn't know was that we had to tell the Buy Now button (which is actually an HTML form element) to submit. This isn't necessary when tracking a plain HTML link. When tracking a plain link, the callback function simply changes the browser's URL bar after the tag has been sent to Google. But, with a submit form like those in PayPal Buy Now buttons, you have to re-submit the form when the call has been sent to Google.

In order to submit a form using Javascript, the form needs to have an "id", like in the example below:

<form action="https://www.paypal.com/cgi-bin/webscr" id="buynow" method="post" return false;">

The form's ID is "buynow". When the tag arrives safely at Google, the callback function must submit the form using it's ID:

document.getElementById("buynow").submit();