Tracking your
KPI’s is extremely
important in your online venture. At a minimum, you should be using
something like Google Analytics to
track conversions in your application. Setting up goals is actually
quite simple, especially if you’re just tracking that specific pages are
loaded. However, if some of your conversion points occur through AJAX,
you might not be capturing those activities in Google Analytics.
Lucky for you, it’s actually quite simple to update
this.
I thought I’d show you a fairly simple example to help you along.
On our web site, we have a mini contact form at the bottom of many of
our pages. When submitted, if JavaScript is enabled, it’ll perform an
Ajax request to submit the form. If you fill out the main Get in
Touch form that gets processed and
we redirect people to a thank you page. The URL for that is unique and
we’re able to track those in Google Analytics quite easily.
However, with the Ajax-form, the URL in the browser isn’t going to
change so Google Analytics isn’t going to track that conversion. So, we
needed to track that properly.
To do this, we just need to call a JavaScript function that the Google
Analytics code provides you.
pageTracker._trackPageview(“/contact_requests/thanks”);
{lang=”ruby”}\
Let’s look at some simple code from our controller action. If the
request is from JavaScript, we currently replace the form area with the
content in a partial. (note: if you’re curious about the _x
, read
Designers, Developers and the x_
factor)
respond_to do |format|
{lang=”ruby”}
format.html { redirect_to :action => :thanks }
{lang=”ruby”}
format.js do
{lang=”ruby”}
render :update do |page|
{lang=”ruby”}
page.replace :x_mini_contact_form_module, :partial => ‘mini_contact_form_thanks’
{lang=”ruby”}
end
{lang=”ruby”}
end
{lang=”ruby”}
end
{lang=”ruby”}\
As you can see, the redirect will within the format.html
block will
lead people to our conversion point. However, the format.js
block will
keep the user on the current page and it’ll not trigger Google Analytics
to track the conversion. To make this happen, we’ll just sprinkle in the
following line of code.
page.call ‘pageTracker._trackPageview(“/contact_requests/thanks”);’
{lang=”ruby”}\
However, if you need to do something like this in several locations in
your application, you might want to just extend the JavaScriptGenerator
page.
GeneratorMethods. (you could toss this in lib/
, create a
plugin, etc…)
module ActionView
{lang=”ruby”}
module Helpers
{lang=”ruby”}
module PrototypeHelper
{lang=”ruby”}
class JavaScriptGenerator #:nodoc:
{lang=”ruby”}
module GeneratorMethods
{lang=”ruby”}
# Calls the Google Analytics pageTracker._trackPageview function with
{lang=”ruby”}[path
{lang=”ruby”}]{.underline}.
{lang=”ruby”}
#
{lang=”ruby”}
# Examples:
{lang=”ruby”}
#
{lang=”ruby”}
#
{lang=”ruby”}
# # Triggers: pageTracker._trackPageview(‘/contact_requests/thanks’);
{lang=”ruby”}
# page.track_page_view ‘/contact_requests/thanks’
{lang=”ruby”}
#
{lang=”ruby”}
def track_page_view(path)
{lang=”ruby”}
record “pageTracker._trackPageview(‘#{path}’);”
{lang=”ruby”}
end
{lang=”ruby”}
end
{lang=”ruby”}
end
{lang=”ruby”}
end
{lang=”ruby”}
end
{lang=”ruby”}
end
{lang=”ruby”}\
This will allow us to do the following:
page.track_page_view “/contact_requests/thanks”
# or using a route/path
page.track_page_view thanks_contact_requests_path\
So, our updated code now looks like:
render :update do |page|
{lang=”ruby”}
page.replace :x_mini_contact_form_module, :partial => ‘mini_contact_form_thanks’
{lang=”ruby”}
page.track_page_view thanks_contact_requests_path
{lang=”ruby”}
end
{lang=”ruby”}\
With this in place, we can sprinkle similar code for our various
conversion points that are Ajax-driven and Google Analytics will pick it
up.
Happy tracking!