If you’re building a web site you’re probably using Google Analytics to track traffic. All the cool kids are. How’d you like to start tracking your Tropo phone calls in Analytics as well?

This tutorial is going to show you how to use Google Analytic’s Mobile Web support to insert call information into your Analytics account.

First download the client libraries for Google Analytics Mobile (use the “server-side snippets” code). At the time of this writing, the download includes libraries for PHP, Perl, JSP and ASPX. There’s a PDF file in the download that tells you how to get your mobile tracking ID. It’s just your Google Analytics account ID, but with the UA- replaced with MO-. If your Analytics ID is UA-123456-1 then your mobile ID will be MO-123456-1.

Normally Google Analytics uses tracking code that uses JavaScript on your page to send some data to Google each time a page is accessed. On mobile web sites and apps, Javascript might not be available, so Google has created a way for you to send the data over to them using code running on your server. The phone doesn’t run client-side JavaScript either, so we’re going to use this same server side method on a Tropo WebAPI application to push call data into Analytics.

Google has designed the the client library to create a unique URL that’s inserted as an image tag on your mobile site. When the image is loaded, the library builds the analytics data and pushes it to Google. Since the phone is an environment that doesn’t support image tags, we’re going to build the URL and then open it with an HTTP client during each call.

This code uses the PHP Google library, Tropo’s Web API, and the Tropo PHP library for the WebAPI.

Most of the things that you’d track in web reports like URLs visited, IP addresses, and user-agent strings don’t exist in a phone call, so to make our reports more useful, we’re going to set some of the headers and environment variables manually. This is something you’ll probably want to tweak to get useful reports. I’m going to set the User-Agent to the caller’s area code and build a unique user ID cookie for tracking repeat calls.

The PHP library has a snippet of code (snippet1.php) that’s supposed to be placed at the top of our PHP file. Place that at the top of your app’s code. Google’s instructions also include a second snippet that’s to be placed at the bottom of the PHP page, but since we’re not using the image tags, you don’t need to do that.

You’ll need to edit the snippet after you add it, since it contains a bug. The PHP and Perl libraries don’t properly set the query string. The ASPX and JSP libraries don’t have this bug. In the PHP snippet you just added, find the lines that say …

if (!empty($path)) {
  $url .= "&utmp=" . urlencode($path);
}

… and change it to read …

if (!empty($path)) {
  if (!empty($query)) {
    $path .= "?$query";
  }
  $url .= "&utmp=" . urlencode($path);
}

Or, instead of manually editing the files, here’s a zip with patches for PHP and Perl.

Now right before the snippet you added, we’ll create a user-agent string with the caller’s area code and a cookie value that matches the format that Google sets when they create a tracking cookie.

$session = new Session();
// Create a User-Agent string for the area code.
$UA = 'Area code '. substr($session->from['id'],1,3);
// Create a user ID cookie based on the callerid
$cookie = "0x" . substr(md5($session->from['id']), 0, 16);

Now right after the snippet from the PHP library, we need to load the tracking URL with PHP. The Mobile Web library snippet includes a function googleAnalyticsGetImageUrl() that builds a portion of the URL but it only returns the filename and query string. To load the URL manually, we need a fully-qualified base URL in the form http://example.com/some/path/ instead. Assuming that you’re putting ga.php in the same directory as your Tropo app, all you need to do is construct a base URL and append the output of googleAnalyticsGetImageUrl() to it.

$protocol = $_SERVER['HTTPS'] == 'on' ? 'https' : 'http';
$port = ($_SERVER["SERVER_PORT"] == "80") ? "" : ":".$_SERVER["SERVER_PORT"];
$path = dirname($_SERVER['REQUEST_URI']);
$path == '/' ? '' : $path;
$url = $protocol .'://'. $_SERVER['HTTP_HOST'] . $port . $path .'/'. googleAnalyticsGetImageUrl();

Now that the URL is built, we need to send a GET request to it. This GET request will set the cookie and the user-agent then load the URL just as if it were an image being called from a web browser. The image itself never gets displayed, but the fact that it gets loaded means the tracking data is sent off to Google’s servers for your Analytics account.

$options = array(
  "http" => array(
      "method" => "GET",
      "user_agent" => $UA,
      "header" => "Accept-Language: " . 
                  $_SERVER["HTTP_ACCEPT_LANGUAGE"] . "\r\n".
                  "Cookie: __utmmobile=" . $cookie . "\r\n"
      )
);
$data = file_get_contents($url, false, stream_context_create($options));

Putting it all together, we have the following code, added to the top of any Tropo PHP web application:

<?php
require_once 'TropoClasses.php';
require_once 'ga.php';
$session = new Session();
// Create a User-Agent string for the area code.
$UA = 'Area code '. substr($session->from['id'],1,3);
// Create a user ID cookie based on the callerid
$cookie = "0x" . substr(md5($session->from['id']), 0, 16);
// Build a tracking URL
$protocol = $_SERVER['HTTPS'] == 'on' ? 'https' : 'http';
$port = ($_SERVER["SERVER_PORT"] == "80") ? "" : (":".$_SERVER["SERVER_PORT"]);
$path = dirname($_SERVER['REQUEST_URI']);
$path == '/' ? '' : $path;
$url = $protocol .'://'. $_SERVER['HTTP_HOST'] . $port . $path .'/'. googleAnalyticsGetImageUrl();
$options = array(
  "http" => array(
      "method" => "GET",
      "user_agent" => $UA,
      "header" => "Accept-Language: " . 
                  $_SERVER["HTTP_ACCEPT_LANGUAGE"] . "\r\n".
                  "Cookie: __utmmobile=" . $cookie . "\r\n"
      )
);
$data = file_get_contents($url, false, stream_context_create($options));
?>

You can even turn it into an include and stick it at the beginning of all your calls.

Once this is added, any calls to your app will be recorded by Google Analytics and will show up in your reports alongside your web traffic.

If you want to track specific data in your application, one technique you could use is to set the query string to include the information you want to appear in Analytics. Just add this code somewhere before you call googleAnalyticsGetImageUrl().

$_SERVER["QUERY_STRING"] = urlencode('Your data here');

Think about what you want to track in your app. Have a menu-driven IVR? Perhaps you can track each step of the menu. Have different phone numbers you’re using for different locations and want to know which one is getting used more often? Shove $session->to['id'] into your query string.