Increase Conversion Rates For Social Sign-Ons Using HTTP Referrer

It's pretty much the norm for any consumer-facing website to offer social sign-on capabilities in addition to the standard email and password option. Most sites offer more than one option leaving the user confused as to which one to pick. That split-second hesitation can cost you a sign-up.

Which one to choose?

The Last-used Network 

Given how probability works, the social network that sent the user to your site is *probably* their most-used social network. If they clicked on a link of twitter, it's a good bet that they (a) have a twitter account (b) use it often. 

Instead of offering all the login options at once, some javascript can help you drastically cut down on the available options to just 2: the standard email/password or entice the user with a single social sign-on button. 

Changing Your Page on The Fly

Imagine your site allows social sign-ups from three providers: Twitter, Facebook and LinkedIn because that's where your target audience congregates. (*I am in no way affiliated with AngelList, It's the first site I could think of with three sign-on options. It's an example) I have an account on all three and I'm thinking, "which one to pick?". Shortly thereafter, I'm thinking "Let's see what's up on imgur". 

Current AngelList Social Sign-up Page (http://angel.co)

What if you hide Facebook and LinkedIn if you detect the referrer to be t.co or twitter.com? Cleaner, right? 

AngelList Social Sign-up (optimized)

You can do more advanced operations such as just highlight the twitter option (a class with bigger text and icons while the other two have small icons and text) subtly indicating to the visitor that you recommend logging in with Twitter but you have other options,too. You could go one step further and style the page just for effect.

AngelList Social Sign-up (optimized & styled)

HTTP Referer & Javascript

We're going to use the http referer information in javascript to change our pages on the fly. This information comes from document.referrer in javascript. What you need to do is:

1. Hide all social sign-on buttons
2. A series of if,else if, statements will check if the referer matches a supported social network
1. if a match, show the button
2. else, move to the next
3. If there is no match, show all available buttons

The Next Level

This is just one of the ways where you can optimize your calls-to-action and pages based on referer information. If you're interested in having your landing pages doing this automatically without writing a line of code, SubIntent's automatic optimization of landing pages based on referer (among other things) may be of interest to you.

Rough Proof-of-concept (codepen.io) 

$('.btn-auth').hide();
# change this to see the effect
ref = "http://facebook.com";
# in production, though
# ref = document.referrer;
if /facebook\.com/.test(ref)
 $('.btn-facebook').show();
else if /twitter\.com/.test(ref)
 $('.btn-twitter').show();
else if /plus\.google\.com/.test(ref)
 $('.btn-google').show();
else
  $('.btn-auth').show();
endCheck out this Pen!

Do you have a web app?
SubIntent can optimize your landing pages for improved conversion rates.

Using machine learning techniques, SubIntent will optimize your landing pages for maximum conversions and click-throughs. See how.