Ternstyle
Ternstyle
A web software and design firm
Frequently you may be creating an application which employs server-side functions not seen by your users which are associated with user events. This, of course, means the standard Google Analytics JavaScript tags won’t be able to track these events because they do not occur in browser.
Events often occur, send some form of information to the server, the information is processed and a response is given. The event may have multiple outcomes. So you could send an AJAX request, hope you get the right response, check which outcome occurred and fire a JavaScript snippet to track the event.
This means you need more code client-side to process the responses of the outcomes of events, and you need to ensure there is no break-down between server-side and client-side. OR you could just use the Google Analytics API to do all the work server-side. Let’s assume you want to go this route.
Let’s create a PHP application which simply receives an AJAX request from a click event and tracks the event using the Google Analytics API via PHP. We know the tracking will happen more naturally in the flow of your applications and tracking a click event can easily be done with JavaScript client-side, but this is an easy way to become acquainted with the API.
First, create your HTML document.
We’ll use jQuery to send the AJAX request upon the click of a button.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>GA Tracking Server-side</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('#button').bind('click',function (e) {
e.preventDefault();
$.ajax({
async : false,
type : 'GET',
url : 'http://you-site-here.com/clicked.php',
dataType : 'json',
success : function (r) {
//do something
if(r.success) {
console.log('success');
}
else {
console.log('O_o');
}
},
error : function (r) {
//do something
console.log('error');
}
});
});
});
})(jQuery);
</script>
</head>
<body>
<a id="button" href="#">Click here!</a>
</body>
</html>
We’re going to assume you understand everything in the HTML document.
Next, you’ll need your PHP document.
Your PHP document will receive the AJAX request and will use cURL to send the tracking event to the Google Analytics API.
<?php
//some of the functions we need to make it work
function generate_serial($n) {
$c = "abcdefghijklmnopqrstuvwyxz0123456789";
$s = '';
for($i=0;$i<$n;$i++) {
$s .= substr($c,rand(0,37),1);
}
return $s;
}
function generate_uuid() {
return generate_serial(8).'-'.generate_serial(4).'-4'.generate_serial(3).'-a'.generate_serial(3).'-'.generate_serial(12);
}
function ip() {
$ip = false;
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ip = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
$ip = trim(array_shift($ip));
}
elseif(isset($_SERVER['REMOTE_ADDR'])) {
$ip = $_SERVER['REMOTE_ADDR'];
}
return $ip;
}
//define necessary variables
define('Google_Analytics_UA_String','UA-XXXXXXXX-X');
//create a UUID string for the user sending the request and store in the the session
if(isset($_COOKIE['Google_Analytics_UUID']) and !empty($_COOKIE['Google_Analytics_UUID'])) {
define('Google_Analytics_UUID',$_COOKIE['Google_Analytics_UUID']);
}
else {
define('Google_Analytics_UUID',generate_uuid());
setcookie('Google_Analytics_UUID',Google_Analytics_UUID,time()+63072000);
}
//compile the data we want to send to the API
$data = http_build_query(array(
'v' => 1, // version
'ds' => 'app', // data source
'tid' => Google_Analytics_UA_String, // Tracking ID / Web Property ID
'cid' => Google_Analytics_UUID, // Client ID
'uip' => ip(), // IP Override
't' => 'event', // Hit type
'ec' => 'site clicks', // event category
'ea' => 'click', // event action
'el' => 'button', // event label
'ev' => 'Click here!' // event value
));
//send using PHP's cURL extension
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,'https://www.google-analytics.com/collect');
curl_setopt($ch,CURLOPT_HEADER,true);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch,CURLOPT_POST,true);
curl_setopt($ch,CURLOPT_POSTFIELDS,$data);
$response = curl_exec($ch);
//parse the response and send back to the browser
header('Content-Type: application/json');
$status = curl_getinfo($ch,CURLINFO_HTTP_CODE);
if($status == 200) {
echo json_encode([
'success' => true
]);
}
else {
echo json_encode([
'error' => true
]);
}
?>
Okay, there’s nothing elegant about this PHP file. It barrels through, doing the minimum work required. Normally each of the pieces would be a neat and tidy function, sitting perfectly within a precise class, with better error handling, greater attention to detail and the like. But this is just a proof of concept, so deal.
Let’s talk about what all this does.
First, we have a couple functions that help us create a “unique universal I.D.” or UUID. This ID is meant to be used as an identifier for your user. We’ll talk more about the UUID soon.
//some of the functions we need to make it work
function generate_serial($n) {
$c = "abcdefghijklmnopqrstuvwyxz0123456789";
$s = '';
for($i=0;$i<$n;$i++) {
$s .= substr($c,rand(0,37),1);
}
return $s;
}
function generate_uuid() {
return generate_serial(8).'-'.generate_serial(4).'-4'.generate_serial(3).'-a'.generate_serial(3).'-'.generate_serial(12);
}
We also have a function for determining the user’s IP address. This, along with the UUID, help Google Analytics to determine your user and follow them through your application. Note: any events stored tracked in the browser with JavaScript will be using a different UUID than the one you use in PHP which may result in Google tracking two users instead of one. We use server-side logging of events when we don’t care as much about which user is doing what and just want raw numbers about certain types of events.
function ip() {
$ip = false;
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ip = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
$ip = trim(array_shift($ip));
}
elseif(isset($_SERVER['REMOTE_ADDR'])) {
$ip = $_SERVER['REMOTE_ADDR'];
}
return $ip;
}
Next, we start our define a few necessary variables. Our Google Analytics tracking ID and our UUID. Notice the UUID is stored in a cookie to meet Google’s suggestion of setting this ID as a cookie that won’t expire for 2 years. Yeah, that’s a lot, but it helps them identify those users of yours.
After setting those variables, we define the data payload that we’ll send in the cURL post request to Google to ensure it knows what we want it to do. You can read about all the variables in this array here: https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters
There are a bunch of optional ones we didn’t include that you may want to.
//compile the data we want to send to the API $data = http_build_query(array( 'v' => 1, // version 'ds' => 'app', // data source 'tid' => Google_Analytics_UA_String, // Tracking ID / Web Property ID 'cid' => Google_Analytics_UUID, // Client ID 'uip' => ip(), // IP Override 't' => 'event', // Hit type 'ec' => 'site clicks', // event category 'ea' => 'click', // event action 'el' => 'button', // event label 'ev' => 'Click here!' // event value ));
Almost done. Let’s send out cURL request next. We create cURL resource. Set the URL at Google to which it will need to post. We set a few options. Then we specify the post fields we created in the previous step. Finally, we execute the cURL request with “curl_exec.”
//send using PHP's cURL extension $ch = curl_init(); curl_setopt($ch,CURLOPT_URL,'https://www.google-analytics.com/collect'); curl_setopt($ch,CURLOPT_HEADER,true); curl_setopt($ch,CURLOPT_RETURNTRANSFER,true); curl_setopt($ch,CURLOPT_POST,true); curl_setopt($ch,CURLOPT_POSTFIELDS,$data); $response = curl_exec($ch);
Now we can parse the response and send the necessary information to user to satisfy the AJAX request. One thing to note here: Google does NOT take extensive measures in the response to this request. They basically send you a standard HTTP response code. You get a 200 (or 2xx) if the request went through and an error code otherwise. Thing is, the 200 response code doesn’t mean the request actually made it into your Google Analytics dataset. It simply means the information you sent to the Google Analytics Measurement Protocol was formed properly.
This isn’t ideal but it’s all we get. Anyway. We set a head to tell the browser we’re sending a JSON object. We get the status code from the cURL response from Google. We check to see if it’s a status of 200. If it is we send the browser a JSON array specifying success. If it’s not 200 we send a JSON error.
That’s it! What do you think? Is it worthwhile to send info to Google Analytics in this way?
Copyright © 2018 Ternstyle LLC. All rights reserved.
Connect with us
We dig the back-and-forth.