I know that using javascript to declare a click-through transaction is a common way to do it, but I believe that declaring a transaction in Google Analytics before it is completed is a risk of contaminating your data with false transactions (if the transaction was deleted or rejected).
So, in my opinion, the right way to achieve what you want to do is the following. This requires the convenient use of javascript / jQuery and php.
It may be too difficult for the OP, but it may be useful to other readers.
According to the question, you want to track two things:
- mouse click
- verified ecommerce transactions
The best way to do this in my opinion:
- send event type message to Google Analytics using javascript when stripe button is clicked
- configure the Stripe hook url to catch the result of the transaction (after processing the transaction), and if successful send the hit to Google Analytics using PHP
This is the first difficult answer that I will post on SO, I will try to make it good and useful.
1. How to track clicks on a button using javascript and Google Analytics
What you want to use is called event tracking. An event, as in "an event that happened, I want to report this to the GA."
The logic is here:
on the button the button is clicked, send the event "button pressed" arrow "on GA
Assuming your stripe button is something like
<button type="submit" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">SOME TEXT</span></button>
I suggest you use jQuery to detect clicks on this button. Here's how I do it: in a .js file:
(function($) { // WHEN DOM IS READY $(document).ready(function() { // STRIPE BUTTON CLICK TRACKING $("#stripe-button-form button").each(function() { var sent = false; $(this).click(function(event) { console.log("click"); // Just to make sure the click has been detected, you can comment this line if(!sent) { ga('send', 'event', 'category', 'action', 'intent'); // send hit to GA sent = true; // used to make sure the hit is sent only once to GA } }); }); }); })(jQuery);
ga ('send', 'event', 'category', 'action', 'label'); The string is the one you want to customize according to your needs.
- 'send' and 'event' remain unchanged, do not touch it.
- 'category', 'action', 'label' you can customize. Check out the Google Analytics documentation or event tracking tutorials to learn how to do this.
Thus, you can track every click on the strip buttons (except for repeated clicks if someone clicks twice or many times).
2. How to track successful transactions using Stripe interception and Google Analytics API (Google Measurement Protocol)
Here's the logic:
- Tell Stripe which URL you should send the result after trying to pay.
- This url is the php file where you will get the data. If the data sent by Stripe says the transaction was successful, then you will send the transaction data to Google Analytics. If, on the other hand, the transaction failed or was not completed: then do nothing and do not compromise your GA reports.
Strip grip
Strip setting
First, in your Stripe Control Panel, go to Account Settings> Web Sites> Add Endpoint. The URL you need to put is the URL from the PHP file that you will use to get Stripe payment results.
Let's say: http://example.com/stripe-listener.php Put the endpoint in test mode, then do the same for live mode.
(and, of course, make sure stripe-listener.php exists and is correctly located on your server).
Your strip listener
This is a little longer for details here, so let me give you a tutorial in which I got all the information: https://pippinsplugins.com/stripe-integration-part-6-payment-receipts/
Basically, you will need to have the PHP Stripe API library on your server so that you can work as follows. I will let you understand this, it is not too difficult as soon as you plunge.
Your stripe-listener.php file (you can call it whatever you want if you agree with what you used for the endpoint of the Stripe website) should look something like this:
// STRIPE STUFF global $stripe_options; require_once(STRIPE_BASE_DIR . '/lib/Stripe.php'); if(isset($stripe_options['test_mode']) && $stripe_options['test_mode']) { $secret_key = $stripe_options['test_secret_key']; } else { $secret_key = $stripe_options['live_secret_key']; } Stripe::setApiKey($secret_key); // retrieve the request body and parse it as JSON $body = file_get_contents('php://input'); // grab the event information $event_json = json_decode($body); // this will be used to retrieve the event from Stripe $event_id = $event_json->id; if(isset($event_id)) { try { // LOAD EVENT DATA FROM STRIPE $event = Stripe_Event::retrieve($event_id); $invoice = $event->data->object; ////////////////////////////////////////////////////////////////////////////// // NOW DEAL WITH POTENTIAL SITUATIONS ////////////////////////////////////////////////////////////////////////////// // IF PAYMENT SUCCEEDED if($event->type == 'charge.succeeded') { // Do stuff with data stored in $invoice. // For example : $customer = Stripe_Customer::retrieve($invoice->customer); $email = $customer->email; $amount = $invoice->amount / 100; // amount comes in as amount in cents, so we need to convert to dollars $txn_id = $invoice->id; // transaction unique ID $livemode = $invoice->livemode; // .... // THEN // .... // Ping Google Analytics if($livemode != false) { // Event if(function_exists("GA_send_event")) { // Transaction details $transaction_ID = $txn_id; // My unique transaction id, retrieved from Stripe $transaction_ttc = $amount; // My transaction amount (tax included), retrieved from Stripe $transaction_tax = round($amount-($amount/1.2),2); // My tax total amount (I do a bit of calculation to get it, based on french tax system), don't pay too much attention to that $product_name = $type; // $type was retrieved from a special value I store in Stripe, but you can use anything you'd like // Send transaction details to GA, with a custom function GA_send_transaction($transaction_ID, $transaction_ttc, $transaction_tax, $product_name); } } } // WHEREAS IF PAYMENT FAILED if($event->type == 'charge.failed') { // Do some other stuff, like maybe send yourself an email ? } } catch (Exception $e) { wp_die("error"); exit(); } }
Here is the juicy part
GA_send_transaction ($ transaction_ID, $ transaction_ttc, $ transaction_tax, $ product_name);
This is a custom feature whose role is to send transaction information to Google Analytics.
This feature is defined (and associated with the Google Analytics API) thanks to the following library:
Google Analytics API (aka "Google Measurement Protocol")
This is used to send data to Google Analytics using PHP. The interest in this (instead of relying on regular javascript) is that you are working on the server side. In other words: you do not depend on what the user does (or does not). For example, wait until the confirmation page loads or writes earlier (and starts your javascript).
- If you want to track user activity / event on a page: go with the standard javascript features for Google Analytics.
- When you need to make sure that you send 100%, use a server-side approach, for example here.
I wrapped a quick PHP library based on the work of Stu Miller: http://www.stumiller.me/implementing-google-analytics-measurement-protocol-in-php-and-wordpress/
The library that I am currently using (as a Wordpress plugin), I just added GitHub for use, adaptation and (I hope) improvements (I am sure there are many opportunities for improvement).
Here: https://github.com/blegrand/google-analytics-php-library
(feel free to improve it and remember my first public repo on GitHub)
Hope this helps!