Ever wondered where people came from to sign up for your web app? Recently I wanted to track referrals for Tender and wanted something quick and dirty. The only problem? Our setup page is on a different domain than our marketing site. This meant I couldn’t use Google Analytics since it thought every “goal” came from exactly one place: the marketing site.

So instead, what I did was hack together a quick referral script using Javascript to track where people came from and add that to a field on the Site model (each install of Tender is considered a ‘Site’). The Javascript (in MooTools):

var Tracker = new Class({
  tracker: null,

  initialize: function(){
    this.initCookie();
    this.updateCookie();
    this.markLinks();

    var field = $('site_referral');
    if (field){
      field.value = this.tracker;
    }
  },

  initCookie: function(){
    this.tracker = Cookie.read('tracker');
    if (!this.tracker || this.tracker == "") this.setTracker();
  },

  // Order of precidence
  // 1. ?source= from in the URL
  // 2. ?utm_campaign= in the URL
  // 3. Referrer / Direct
  setTracker: function(){
    var final_source = document.referrer ? document.referrer : "direct";
    var args = $get();
    if (args.utm_campaign && args.utm_campaign.trim() != '') final_source = args.utm_campaign;
    if (args.source && args.source.trim() != '') final_source = args.source;
    Cookie.write('tracker', final_source, {duration:1});
    this.tracker = final_source;
  },

  // Updates the cookie if another ?source or ?utm_campiagn is set
  updateCookie: function(){
    var final_source = null;
    var args = $get();
    if (args.utm_campaign && args.utm_campaign.trim() != '') final_source = args.utm_campaign;
    if (args.source && args.source.trim() != '') final_source = args.source;
    if (final_source){
      Cookie.write('tracker', final_source, {duration:1});
      this.tracker = final_source;
    }
  },

  markLinks: function(){
    $$('a.signup-link').each(function(el){
      el.href += "?source=" + this.tracker;
    }, this);
  }
});

function $get(key,url){  
   if(arguments.length < 2) url =location.href;  
   if(arguments.length > 0 && key != ""){  
       if(key == "#"){  
            var regex = new RegExp("[#]([^$]*)");  
        } else if(key == "?"){  
            var regex = new RegExp("[?]([^#$]*)");  
        } else {  
            var regex = new RegExp("[?&]"+key+"=([^&#]*)");  
        }  
        var results = regex.exec(url);  
        return (results == null )? "" : results[1];  
    } else {  
        url = url.split("?");  
        var results = {};  
            if(url.length > 1){  
                url = url[1].split("#");  
                if(url.length > 1) results["hash"] = url[1];  
                url[0].split("&").each(function(item,index){  
                    item = item.split("=");  
                    results[item[0]] = item[1];  
                });  
            }  
        return results;  
    }  
}

The way this works is the following:

  1. If someone comes with ?source=something or ?utm_campain=something (a Google Analytics keyword), it stores that value in a cookie called ‘tracker’
  2. If no ?source or ?utm_campaign can be found, it stores the referrer
  3. If no referrer can be found, it stores the value ‘direct’
  4. Every URL that has the class signup-link gets ?source=trackerhere appended, so that the referral gets tracked over to our setup domain.
  5. If it finds a field with the id of site_referral (the rails default for Site#referral field), it sets that value to whatever is stored in the tracker cookie.

Now when people sign up, I can see where they came from in the admin panel:

Referral Screen