Google Event Tracking

I will talk about event tracking in Google Analytics today. Almost everyone has heard of Google Analytics and I am guessing you are currently using it to track page views. All you have to do is pop a little javascript on your page and you have hundreds of ways to view the traffic your site receives. If you are not using event tracking though, you are missing out on quite a few data points. For a quick primer look at Google’s documentation.

Events

I won’t go into the general idea of tracking events. You have to decide what constitutes an ‘event’ that you want to track. A quick search turns of thousands of blogs that will give you ideas. I want to specifically talk about specific use cases. The first is a one page javascript application. When you are only tracking page views you will miss 90% of the interaction on the page. You have to piggyback on events to see what is happening in the app. The other case is errors. Javascript is client side so if it breaks you do not see it. Event tracking can track these for you.

App Interactions

I will use RunBrowser as my example app. It is a single HTML page javascript app. I used the event listeners on buttons to log events to Google. I did this inside of my AppController object. You can specify the category, action, label, and value for each event. I mainly just used category and action as it was a small app. I tied the main Start button to a Runbrowse category and Start action. Then I tied the save or clear button presses to the Runbrowse category and Save or Clear actions respectively. At this point I can view how many people started runs and then eventually saved them. This data would be lost without event tracking.

Here is a report called Events Flow:
Events Flow

You see that 35 people from the US viewed the page during the selected dates. 4 of them viewed a saved run and 31 started a new run. 20 of those 31 paused it to hit clear or save, I did not extend the image past that, but you would be able to see how many people eventually saved their run (not the actual run and the data associated just the event of saving it). Out the 11 that did not pause 3 had errors. Without event tracking I would have only seen 35 visits from the US and missed out on all this other data.

Errors!

Tracking errors with events is a great way to see what is happening out in the wild. As we saw in the events flow report I had some errors come up. In my error handler for GPS I track the category as Error and the action as the error code. The error codes match what is returned from the location object according to the API. The three values map to 1= PERMISSION_DENIED, 2 = POSITION_UNAVAILABLE, and 3 = TIMEOUT. I can view my Error category and get a rundown of all the errors on my page.
Errors

This report shows I had 12 events where permission was not given to track the location and 4 timeouts. The other event is the clear modal after the error. You could have client side issues and errors and most people will not send a bug report back to you. With event tracking of errors you can see exactly how many errors and hopefully why. You can also tie in other information like browser and OS version to see if you have a specific bug that only affects a subset of users.

Unobtrusive Event Tracking

I found a great jQuery plugin to do Google Event tracking. Because it is jQuery you don’t have to worry about cross browser issues. It allows you to easily add event tracking to an existing page or to on a new page. It attaches right to the click event handler so you don’t have to muddy up your HTML with a lot of onclick attributes. It has the ability to use HTML5 data-* attributes to set category, action, label, and value. It has many options that should be able to suit your needs. It is also hosted on GitHub.

HTML 5 run tracking application

Download the src(github)
View the demo

The github repo has been updated. Some of the code will not match what is currently in the repo.

An idea that I have had for awhile is a RunKeeper like application that runs completely in the browser. This is not due to any inherit issues with the RunKeeper application, just more of a proof-of-concept. HTML 5 makes this easy. We can save old runs and run without an Internet connection making it almost a native app.

The only phone I have tested this with is an iPhone 4S as that is the only phone I have access to. It should work with an iPhone 4 and possibly a 3GS, but I cannot say for sure. Android should work as well as it should support everything I am doing with HTML 5 and javascript. Desktops can also try it out if you are using any modern browser: Chrome, FireFox, or Safari. You won’t get a path and possibly get an error if your browser cannot get a location. I have tested it in IE and it does not work. I have no plans to try and make it work as the only place I was trying to make it work was the iPhone. Although not supporting IE has made the code a lot cleaner.

RunKeeper in the browser: RunBrowser

HTML 5 – almost a native app

HTML 5 gives us many new methods to make a webpage an application. Before HTML 5 there were many workarounds to make a webpage do what we wanted it to. Now they are built right into the browser. The first thing I am going to cover is application cache. Continue reading “HTML 5 run tracking application”

Facebook SDK and Backbone – Final Post

Download the src(github)
View the demo

This really is the final installment of this. I have shown how to use the router and views to make a site that is only one page of HTML, but still has back button functionality. Each view is tied to a Facebook API query in which I load different elements on to the page. I have a few different ways in the code that you can do this. I would like to say it is for instructional purposes, but it is actually because I was trying different methods and I did not want to go back through and update all the other views and routes.

I will show how to deal with paged data and some other tricks

Paged Facebook Data

Let’s use photos for example. To see what would be returned for an API call to /me/photos we will use the Graph API explorer. You will see that there are two top level keys data and paging. Inside of data is all the information about each photo. In the lofPictureView I loop through the photos adding them to the page

         for (photo in this.model.data)
    		{
    			var test = "<li>";
    			test += "<img src=\"" + this.model.data[photo].source + "\" class=\"fb-pics\">";
    			if(this.model.data[photo].comments){
    				test += "COMMENTS: " + this.model.data[photo].comments.data.length;
    			}
    			test += "</li>";

    			this.jQel.children('ul').append(test);
    		}

I create a list item that has an img tag and then I check for comments and let you know how many there are. If you wanted to add different information you can look through the object in the Graph API explorer and see what is available to use. Now let’s look at the paging data. This is pretty straight forward. The previous attribute has the URL for previous photos and the next has the URL for the next photos. First thing I do is see if these attributes are present and then I create a button for them.

 		
    		if(this.model.paging.previous)
    		{
	    		var prevButton = document.createElement('button');
	    		prevButton.innerHTML = 'PREVIOUS';
	    		prevButton.id = 'prevPage';
	    		this.jQel.children('div').append(prevButton);
    		}
    		
    		if(this.model.paging.next)
    		{
	    		var nextButton = document.createElement('button');
	    		nextButton.innerHTML = 'NEXT';
	    		nextButton.id = 'nextPage';
	    		this.jQel.children('div').append(nextButton);
    		}

Earlier in the Backbone view object we created click events for a button that has the id of prevPage and a button that has the id of nextPage that call functions with the same name as each id.

		events: {
			'click button#nextPage' : 'nextPage',
			'click button#prevPage'	: 'prevPage'
		},

Inside of these functions is the first gotcha. I am using jQuery’s getJson function. We want this to be JSONP and not plain old JSON. Why JSONP? Remy Sharp explains it best, “JSONP is script tag injection, passing the response from the server in to a user specified function”. We want to use this data in an anonymous function call and we need it to be JSONP. Using jQuery’s documentation we see that if we add callback=? the request will be treated as JSONP. In my functions we add callback=? and we get an object back that we can use.

    	nextPage: function(){
    		var This = this;
			$.getJSON(this.model.paging.next + '&callback=?', function(response){
				loadPhoto(response, This.options.currUser);
			});
    	},
    	
    	prevPage: function(){
    		var This = this;
			$.getJSON(this.model.paging.previous + '&callback=?', function(response){
				loadPhoto(response, This.options.currUser);
			});
    	}

You can see that we use the data returned to load another lofPhotoView of new pictures. We also pass the cached user object through the closure This.options.currUser.

Backbone Event Target

In the lofPostView I have a list of a person’s last posts. I put an attribute of data-post-id equal to the post id so that I can retrieve it. The issue comes in when you want to have access to that element and retrieve the data-post-id attribute. Backbone passes the event as a parameter so that you can pull into your function and use it. This Stackoverflow question shows how to use it. Once you have the target you can ask for the data-post-id attribute. There is one issue with this particular setup, sometimes the click will be on a div inside the li. The div does not have the attribute so we cannot grab the data from there as it does not have the attribute. We can either put this attribute on all child elements or we can test to see if the attribute is present and if not grab it from the parent. Here is the code in the lofPostView where I do that.

    	post: function(ev){
    		if(!$(ev.target).attr('data-post-id')){
    			var postid = $(ev.target).parent('li').attr('data-post-id')
    		}else{
    			var postid = $(ev.target).attr('data-post-id');
    		}
    		window.location.hash = '/post/' + postid;
    	},

I am sure there are better ways to do what I did. If you know of one of the ways let me know. You can leave a comment or even fork the project on github.

Facebook SDK with Backbone – pt 3

Download the src(github)
View the demo

I am back to finally finish this off. We are going to dive into Backbone and how we use it to create this application. I want to note up front that this is not a great tutorial for Backbone. The reason being is that I don’t use any of the model aspects of Backbone. I use it for event binding and creating views. In this context it makes sense as our model is Facebook. Another thing to note is that this uses Backbone version 0.5.3 when as of right now it is at version 0.9. It looks like it should work after being upgraded, but I haven’t tested it yet. Well let’s get started.

Finally we are getting to the backbone of this app

Backbone

Backbone is a javascript library that creates an MVC(Model, View, Controller) structure. Earlier I said this was not a great tutorial and that is because we are only using the view and controller portions of backbone. The model is coming from Facebook. We probably could abstract this out and create a backbone model for Facebook, but I chose just to use the Facebook API directly. Continue reading “Facebook SDK with Backbone – pt 3”

Facebook SDK using only javascript – pt 2

Download the src(github)
View the demo

I know it has been awhile. Christmas came and proceeded to fill up a lot of my time. I am back, though, to finish this tutorial. We left off at the HTML skeleton. Remember this is just an outline of where we are going to put our real content. This content we will fetch from Facebook through Facebook’s SDK and then throw it up on the screen. Let’s get on to using the Facebook JavaScript SDK.

This part will cover setting up the Facebook SDK, initializing the SDK, and getting users authenticated.

Facebook SDK setup

We covered this in the last post, but I will touch on it again. We are going to use XFBML. Facebook used to have FBML, but they have deprecated this. We use XFBML to create the login button. If you look at Facebook’s Social Plugins you will see that you can implement many of them through the javascript SDK and XFBML. The last post had the old way of doing it, but here is the new updated way (it’s not much different):

<html xmlns:fb="http://ogp.me/ns/fb#">

Continue reading “Facebook SDK using only javascript – pt 2”

Facebook SDK using only javascript – pt 1

Download the src(github)
View the demo

This is a continuation of my last post. My re-immersion into NES games started me down the path of an 8-bit web browser. This project is not a full 8-bit browser, but rather just viewing Facebook. It uses javascript and only javascript. There is a skeleton of HTML elements for javscript to build the content. It uses the Facebook js SDK,  backbone.js is used to build the content, pixelize to pixelize the photos, and jquery for ease.

It uses javascript and only javascript

Setup your Facebook App

First thing you will need to do is to create an app through Facebook. Start at the Facebook Developers site. There will be a button to create a new app. A modal window will popup. Fill this out.You may have to play with the App namespace to find something that isn’t taken. Continue reading “Facebook SDK using only javascript – pt 1”

Pixelize photos with HTML 5 canvas and Javascript

Download the src(github)
View the demo

This library came about because of a my purchase of an NES. It lead me to wonder what would a browser look like on the NES? The first thing would be that all the photos would be pixelized. I wanted to use the canvas element of HTML 5. I didn’t want to go through every pixel of the photo to do the pixelization, I just wanted to shrink the image down and then blow it back up to create ‘natural’ pixelization.

What would a browser look like on the NES?

The canvas element

Canvas is a new element that was part of HTML5. Canvas opens a lot of doors in HTML5 and there are a lot of amazing examples of what is possible with the canvas element, but we are only using a small portion of it’s capabilities. We can add a canvas to a web page very easily

<canvas id="myCanvas" width="500" height="500">Fallback content</canvas>

We can now manipulate it with Javascript. First thing is to get a reference Continue reading “Pixelize photos with HTML 5 canvas and Javascript”