Hiding Google Analytics Campaign Variables

July 6th, 2009 8 comments

Do you use a service like Google Analytics for viewing your website statistics? Are you keeping track of your inbound links using campaign variables (utm_source, utm_medium, utm_campaign)? I recently ran into a situation where Google search results were linking to URLs with my campaign variables in them. Not a good thing – it really messes up your stats by reporting Google searches as coming from another source! Not to mention causing duplicate copies of your content to appear in the search listings.

Thankfully there is a quick fix for Google. Setting the canonical header link will cause Google to re-evaluate the URL next time your site is indexed. But what about a user copy-and-pasting a link to another site, or bookmarking that link?

It turns out Google Analytics can parse campaign URLs in two different ways.  It can parse them in the query parameters (those variables that come after the ‘?’ in your URLs). Or, it can also parse them when stored in the fragment after the ‘#’ in your URL. Google provides an API function to enable parsing of the fragment parameters.  The function is _setAllowHash(true).  You insert this just before the call to _trackPageview.

pageTracker._setAllowAnchor(true);
pageTracker._trackPageview();

In theory, this should work well. Google is not supposed to index the fragment parameters that come after a URL. But what if a user bookmarks the URL?  Or what if they copy-and-paste the URL to digg or another site? This still isn’t going to solve the problem.

Time to rethink. Ideally, the campaign variables would only be available to Google Analytics and not even show in the client’s URL bar. Then they cannot be indexed by search engines and it would be unlikely they’d be copy-and-pasted to another site by the user. Here is a better solution.

When campaign variables are passed to a web page, the PHP page that is loaded can look at the $_GET parameters and detect those variables. It can then remove them, stick them in a session cookie, and redirect the user on to the correct URL – the one without the campaign variables.

The fragment portion of the URL, the part after the ‘#’, can be modified by Javascript. When the redirected page loads, before the Google Analytics code is called, a bit of Javascript code can be used to pull the campaign variables out of the cookie and place them into the fragment portion of the URL. After the Google Analytics code runs, these campaign variables can be removed, the cookie can be deleted, and the original fragment (if there was one) can be restored.

So, putting it all together, here is what happens.

  1. User clicks on a link with campaign variables and visits your website with a URL that looks something like: http://example.com/page/?utm_source=youtube&…
  2. The PHP code running your website detects that the user has clicked on a link with campaign variables, stores those variables in a cookie, and redirects the user to that same URL but without the campaign variables.
  3. The user’s browser visits the new page, without the campaign variables, and passes the cookie along to that page. The new URL looks something like this: http://example.com/page/
  4. The page loads in the user’s browser. As it loads a bit of Javascript runs.  The Javascript adds the campaign variables to the fragment portion of the URL.  At this snapshot in time, the URL looks like this: http://example.com/page/#utm_source=youtube&…
  5. Immediately after the URL is rewritten, the Google Analytics page tracker code runs and credits the source to the intended campaign. Immediately afterward, the custom Javascript erases the variables from the fragment so that the user never sees them, putting the URL back to: http://example.com/page/#

That’s it. Google Analytics gets the proper information to keep track of your campaigns, the user doesn’t see a cluttered URL, and Google doesn’t get a chance to index the page with the campaign variables in the query string.

There is one bug annoyance.  That is, after the Google Analytics page tracker runs and the fragment is erased, it still leaves the single ‘#’ character in the URL.  But at least this won’t cause any harm if the user bookmarks it or copy-and-pastes it somewhere.  If anyone has ideas on how to get rid of this, please leave me feedback in the comments.

Now, if only this could be incorporated into Joost de Valk’s wonderful Google Analytics for WordPress plugin! I’ve modified my copy to do this already. See the attached Google Analytics for WordPress Modifications. This isn’t a complete plugin, only a modification to the source file for version 2.9.5 of the official plugin.
[Update: See the comments below. Adding this to Google Analytics for WordPress might not be that useful]

Lastly, the code :) Here is the bit of PHP code the detects the Google Analytics variables, sets the cookie, and redirects the user to a “clean” URL. If you have run into a similar situation and solved it a different/better way, please leave a comment and let me know what you did. I’m very interested in knowing if this could be done a better way!

// Add any Google Analytics Campaign variables to the found_tags array.
// Remove them from the _GET array so they don't get forwarded on
$found_tags = array();
foreach(array('utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content') as $tag) {
    if(isset($_GET[$tag]) && !empty($_GET[$tag])) {
        $found_tags[$tag] = $_GET[$tag];
        unset($_GET[$tag]);
    }
}
 
// If any campaign variables were found, redirect the user to the "clean" URL
// after setting the 'gatmp' session cookie with the campaign variables.
if(count($found_tags) > 0) {
    setcookie('gatmp', http_build_query($found_tags));
    $dest = $_SERVER['SCRIPT_URI'];
    if( count($_GET) > 0 ) {
        $dest .= '?'.http_build_query($_GET);
    }
    header ('HTTP/1.1 301 Moved Permanently');
    header ('Location: '.$dest);
    exit(0);
}

Next, here is the javascript that detects the cookie and passes the campaign variables on to Google Analytics. This code takes the place of the normal pageTracker._trackPageview() function call.

function gaTrackerClass() {
  this.cookieVal = false;
 
  // Grab the cookie, if it exists, store in this.cookieVal
  if (typeof(document.cookie) != "undefined" && document.cookie.length > 0) {
    c_name = 'gatmp'; // Cookie name
    var c_start=document.cookie.indexOf(c_name + "=");
    if (c_start!=-1) {
      var v_start=c_start + c_name.length+1;
      var v_end=document.cookie.indexOf(";",v_start);
      if (v_end==-1) v_end=document.cookie.length;
      this.cookieVal = unescape(document.cookie.substring(v_start,v_end));
      // Unset the cookie so it doesn't get used multiple times
      document.cookie = c_name + "=; expires=Thu, 01-Jan-1970 00:00:10 GMT";
    }
  }
 
  // Our _trackPageview function. It emulates the behavior of the Google
  // function, using the cookie rather than query parameters in the URL.
  // If no cookie is found, just call the normal _trackPageview function
  this._trackPageview = function(str) {
    if( typeof(pageTracker) != "undefined" ) {
      if(this.cookieVal != false && typeof(window.location) != "undefined") {
        // Save the current fragment
        var hashtmp = window.location.hash;
 
        // Call Google Analytics and record the campaign variables
        window.location.hash = '#' + this.cookieVal;
        pageTracker._setAllowHash(true);
        pageTracker._trackPageview(str);
 
        // Restore the fragment to its original value
        window.location.hash = hashtmp;
      } else {
        pageTracker._trackPageView(str);
      }
    }
  }
}
var gaTracker = new gaTrackerClass();
gaTracker._trackPageview();
Categories: Tutorial Tags: ,

Host Your Own URL Shortener: 10 PHP Apps Reviewed

June 30th, 2009 38 comments

Shorter URLs

I have been planning to host a personal tinyurl or bit.ly like URL Shortening service on my website.  I was going to write my own software for this, but thought I’d start by reviewing some existing PHP Apps just in case one already met my needs. I wanted to add a URL shortener to my website for a couple of reasons:

  1. People don’t always trust blind redirect links from tinyurl or bit.ly.  If the links came from my website, people would know the links were somehow related to my site and that I considered them safe.
  2. To shorten links sent over email, but still append a small path to them so people have some idea what they’re clicking on.  For example, assume http://esev.com/Fga34A was a shortened URL that pointed to a Google Map of my house.  I’d like to be able to append /MyHouse to the end of the link (i.e. http://esev.com/Fga34A/MyHouse) without that breaking the redirect.  This is not easily possible with most URL shortening services.
  3. To also use the shortener to create custom landing pages for my website.  I’d like to keep my domain name in these landing pages and also be able to customize the name of the short URL.  Hosting the URL shortener on my site enables me to pick any name I’d like for the short link, without worrying whether someone else already reserved it.  These landing pages are handy for adding Google Analytics custom campaign tracking tags so I can tell which sites are linking to my blog posts.
  4. To have the ability to use regular expressions to create dynamic URLs to the destination page would be nice too especially for Amazon affiliate links.  These require you to add an /affiiliateID to the end of the URL.  A regular expression could take the path passed to the short URL and generate the long URL.  For example, I’d like something like this which you get with mod_rewrite:
    Link: /amazon/([^/]+)
    Destination: http://amazon.com/exec/obidos/ASIN/$1/ref=nosim/affiliateId

The table below lists the URL shorteners I reviewed and compares them to the features I was looking for.

Name Random link Custom link Append URI Regex Has API Redir Type Private Custom title Edit Stand alone
Pretty Link Yes Yes Pass / Prevent Query String Yes 301 / 307 Yes Yes Yes No
YOURLS Yes Yes Prevent No Yes 301 Yes / No No Yes Yes
Link Shortcut Yes Yes Fail No No 301 / 302 Yes Yes Yes No
Simple Link Cloaker No Yes Pass No No 302 Yes No Yes No
GoCodes No Yes Prevent No No 301 Yes No No No
phurl Yes No Fail No Yes 301 No No No Yes
urlShort Yes Yes Prevent No Yes 301 No No No Yes
Shorty Yes Yes Fail No No 302 Yes No Yes Yes
TightURL Yes No Prevent No Yes 301 No No No Yes
Short URL Script Yes No Fail No No 301 Yes No No Yes
Last updated June 30, 2009

The columns indicate the features I was interested in and show if the URL Shortener supported that feature.

  • Random link – Does the software have the ability to generate a random link?  This is useful for automating tasks.  For example, if I wanted to post a short link to each blog post on Twitter, I would want the software to automatically generate a random link name.
  • Custom link – Does the software allow me to choose the name of my link?  Sometimes I do want to specify the name of the short link.
  • Append URI – Does the software allow data to be appended to the end of a short URL? For example, if the short link is http://esev.com/Fga3A and it points to http://www.google.com/, what happens when I type http://esev.com/Fga3A/analytics/?  Fail means the software could not handle that type of request and did no redirection at all.  Pass means it passes the extra URL data along when doing redirection – something that I did not want to happen.  Prevent means the shortener ignored the extra path and still forwarded to the original URL – which is what I wanted.
  • Regex – Does the software support regular expressions for mapping the path passed to a Short URL to the destination URL?  See #4 above for the reason behind this.  Only Pretty Link comes close to this, enabling the query parameters (stuff after the ? in a link) to be generated based on the URL.
  • Has API – Does the software have an API to support using it inside other software?  For example, if there is a really great plugin sending blog posts to Twitter, is it going to be easy to integrate the URL shortener software with this plugin?
  • Redir Type – What type of redirection does the software generate?  301 redirects are optimized out by search engines – which is what I wanted.  This post on URL Shorteners has a good description of the differences between 301 and 302 redirects. (It is also where I got the idea to make this table.)
  • Private – Does the software require an username/password for adding links?  Some of the software for URL Shortening is meant for public sites like tinyurl and bit.ly.  I’d rather be in control of all the links on my site.
  • Custom title – Does the software allow the user to enter a description of the link?  This can be useful later to determine the difference between two similar links (i.e. http://esev.com/a?q=1 and http://esev.com/a?q=2).
  • Edit – Can the destination link be changed after the short URL is created?  If the destination site changes, it would be useful to be able to modify the link.
  • Stand alone – Can the software be run on its own, without WordPress?  I’d like my blog to live in /blog on my website.  If the shortener is tied to WordPress then all my short links would need to include /blog in them – making them a little longer than I’d like.

Conclusion
In the end, I decided Pretty Link fit most of my needs.  The developer, Blair Williams, is also very responsive to questions and requests for new features.  I expect Pretty Link will continue to improve.  There were only two things Pretty Link didn’t satisfy; supporting regular expressions and being standalone.  Both of which I worked around with a few mod_rewrite Apache rules and a small modification to the Pretty Link source code.

In addition to the features I was looking for, Pretty Link includes a few extra features:

  • Optionally track the Number of Hits per link
  • Provides a reporting interface where you can see a configurable chart of clicks per day. This report can be filtered by the specific link clicked, date range, and/or unique clicks.
  • Can use the short URLs as Tracking Pixels and track impressions

Do you know of other URL Shorteners that might fit the solutions I need?  Or did I make any mistakes in the comparisons?  Leave me a comment and let me know.

Google Reader in Facebook

March 30th, 2009 2 comments

This has been around for a while, but I only recently started using it. Facebook’s built-in importer application can automatically add your Google Reader shared items to your mini feed.

To configure this, open your Profile to display all items you have posted.

Select your Profile at the top of the Facebook website

Select your Profile at the top of the Facebook website

On the profile page:

  1. Click “Settings” on the bottom right side of the Write Something box
  2. Choose “Google Reader” as the site to import from
  3. Enter the URL to your public “Shared items” page from Google Reader and press import

That’s all it takes. Now, when you share an article in Google Reader a post will be made in your mini feed on Facebook with a link to the article.

Steps to add Google Reader

Steps to add Google Reader

TekSavvy and SpeakOut: My Alternatives to Rogers and Bell

September 9th, 2008 9 comments

I’m always looking for a better deal when it comes to my utility bills.  In Ontario, it seems like there aren’t many choices when it comes to telephone, television, wireless, and internet service.  Either you sign up with Bell or you sign up with Rogers.  At least that’s what their advertising campaigns would like you to think.

There are, however, good alternatives that will save you a few dollars per month.  Here are the companies I’m using instead of the “Big Two”.

Internet Service Provider (ISP)

I’m using an ISP based in Chatham, Ontario called TekSavvy Solutions.  TekSavvy rents DSL lines from Bell to provide internet service to its customers.  I have a Dry Loop DSL line with TekSavvy, which means the phone line coming into my house is only used for DSL service.  There is no phone number associated with the line.

TekSavvy takes care of all the billing.  I only pay a bill to TekSavvy and they pay Bell for the DSL line.  The connection to the internet is completely independent from Bell’s connection.  TechSavvy maintains their own backbone connection via Cogent and Peer1. The total cost for TekSavvy internet is $38/month.

Wireless Cell Phone Service

Just this month I switched my wireless phone service from Fido to SpeakOut.  SpeakOut is a prepaid GSM provider that is offered by 7-Eleven.  I like SpeakOut because there aren’t any hidden daily charges or System Access Fees – just a flat 20¢/minute.  The minutes don’t expire for an entire year – and you don’t lose them as long as you purchase more minutes before they expire.

Virgin Mobile is another good alternative for wireless phone service, but they’re not GSM based – meaning you can’t just switch SIM cards and have your phone work on a network in another country.

Television Service

I’m not a fan of being forced to watch advertisements when I’m paying for a service.  I feel that I shouldn’t be subjected to advertising interruptions if I’m spending money to watch something.  That said, paying for cable television service is a non-starter for me.

I still feel it is important to pay for professional entertainment – the actors/producers/writers/etc deserve to be paid for a job well done – especially if that means they’ll keep producing the shows that I like. So, instead of paying for television service, I choose to pay for my shows À la carte by using services like Apple’s iTunes and Amazon’s Video on Demand.  I feel this is a good alternative because I’m still contributing to the shows I like, but I’m not forced to watch advertisements and all the other junk on cable.

Telephone Service

I always enjoy when the big “land-line” phone companies call me up and try to sell me their phone service.  They usually spend about five minutes rambling on about how good their prices are, without even taking a breath so I can stop them and save their time.  After the five minute spiel they always ask the same question, “May I ask how much you are currently paying for telephone service?”  To which I answer “$15/month, including 500 minutes of long distance, voice mail and call display.”  Which usually gets the response “Uhhhh. Oh. Thanks, have a nice day (click)” from the sales person.  They just can’t compete with Vonage.  I’ve been a very happy Vonage customer since 2002.  I have the occasional dropouts due to my sometimes flaky internet access (I can use my cell phone in those cases), but when my ISP is reliable the service has been exceptional.

Do you have any other alternatives to Rogers and Bell?  Please tell me about them in the comments.

Using Google Reader to stay on top of RSS feeds

August 22nd, 2008 No comments

I just started using Google Reader this month to keep on top of websites that I visit frequently. Google Reader is a RSS feed aggregator – meaning, it keeps track of the latest news from many of the websites I visit in just one location. This is really handy, it means instead of checking lots of websites to see if they have any new articles, I can check Google Reader and it shows the new articles from all the websites that I’m interested in following.

It has a couple of useful features:

  1. Folders – Just like in GMail, you can assign feeds, and individual posts, to multiple folders. These folders help sort and sift through all your feeds. I’m using a folder sorting system originally described by Alan Rimm-Kaufman to help organize things and make sure I see the news I’m most interested in first.
  2. Sharing – At the bottom of each article in Google Reader is a button labeled Share. Pressing this button places the article on a personal RSS feed that can be shared with others. Here are my Google Reader shared items. I’m also subscribed to a few of my friends shared items. It’s interesting to see the things they share. I’ve discovered a few interesting RSS feeds this way.
  3. Discover – Google Reader keeps track of how many people subscribe to a particular news feed. With this data, Google Reader is able to offer recommendations of other feeds that may be of interest to you. The Discover feature uses my list of subscribed feeds to recommend feeds that other people, with my similar feeds, are subscribed to.
  4. Trends – Each time I read an article Google Reader keeps a record of it. Information about the articles I have read is summarized by the Trends feature. This feature allows me to see what percentage of articles I read from a particular feed, how many articles I read per day, how many new articles appear in a feed per day, and how many people are subscribed to a particular feed. This information helps me to prioritize the feeds according to how often new posts come out and how many of those posts I actually read.
  5. Starred Items – Find an article interesting and want to come back to it again? Star it. The Starred items feature works just like GMail. All starred items show up in a folder where you can view them later.

In addition to following news and technology websites, I’ve also been using Google Reader to follow interesting people on YouTube, Facebook, and for reading new articles on Google News.

Using the YouTube API, you can enter a URL that will retrieve an RSS feed of a user’s uploaded videos. You can use this to have Google Reader include YouTube videos as articles. The URL format is:

http://www.youtube.com/rss/user/[insert_username_here]/videos.rss

If you’re already subscribed to people on the YouTube site, you can also use Yahoo Pipes to follow all your subscriptions from one feed.

Facebook posts can also be added to Google Reader, as can status updates. Facebook status updates can be added to Google Reader by clicking the See All option for status updates, then subscribing to the Friends’ Status Feeds. Facebook has a help page for more information about getting updates via RSS.

Google News also provides RSS feeds for its content. In addition to the usual topics like Top Stories, Sci/Tech, and World; Google News searches can also be viewed via RSS feeds. I use this for keeping track of any news items related to topics of interest, like my work, or the small community that I live in for example. Try it, search for something in Google news. At the bottom of your search results will be a “Subscribe to a news feed for X in Google Reader” link. Any new news articles that Google finds related to your search will automatically show up in Google Reader.

All in all I’ve been happy with Google Reader. Having all my news in one location saves a bunch of time. And it even displays well on the iPhone.

Do you have a Google Reader shared items feed or, have any interesting news feeds to share? Post a comment below.

Categories: Review Tags: , ,