The purpose of this tutorial is to show how to create a realtime location aware visitor tracker for a web site or application.

When a visitor navigates to the page on your site, or accesses your mobile web app, the visitor tracker will display the new visitor hit in realtime, displaying the page they've landed on and where each visitor is on a Google map (lat/long and locality). For the purposes of the tutorial, we'll write our server code in PHP, but you could use any server side language you like.

Here is how the end result will look like:

Realtime Vistor Tracker using Pusher

Realitme Visitor Tracker Demo

For the realtime functionality we'll use Pusher, who I work for. Pusher is a hosted service for quickly and easily adding realtime features into web and mobile applications. The service is used for all sorts of features such as notifications, game movements, chat, live data feeds and much more, so it fits the bill nicely here too. We'll be using the Pusher JavaScript API and the Pusher PHP Library.

Here's the order in which we'll cover things:

  1. Get the basics out of the way
  2. Connect to Pusher
  3. Subscribe to new visitor page hits notifications
  4. Get the visitor's location using the HTML5 Geolocation API
  5. Broadcast the visitor location and page to all application visitors using Pusher
  6. Display the visitor location and page information on a Google map

Read the rest of this entry »