This is another guest post by Ferenc, about how LaunchRock was modified to show up nicely on a UIWebView.
If you’ve ever wanted built a landing page or had the need for one, you’ve provably heard of LaunchRock. If not, have a quick look. LaunchRock makes an extremely good job at making it super easy to build a landing page. No HTML knowledge is needed. Among many features, the page lets your future customers share about your idea / app / future venture on Twitter, Facebook and LinkedIn. This is a great way to collect emails of possible futures customers as well as starting to build up the buzz about it.
When we decided to create a new app of Soccer Tactics Multiplayer instead of doing an update, it was clear that we had to use cross promotion to get our existing players know about our new product. For this, we built a LaunchRock site to collect the emails of our fans. Although, we have built a way to talk to them via Message Of The Day and feedback, about which I wrote last week, it was just a simple way of putting out text in front of the players.
We did try this first by simply showing the url, but only our most active and addicted players would take the effort to actually read the url and then open Safari and then fill the form. Not very effective and also, it turned out later, the mobile representation of the LaunchRock site was not that nice as it was on the desktop.
Since we wanted to extend our internal Message Of The Day service for long time, in a way that it can show media rich content, it was the time to do so. Instead of showing a default UIAlertView, we modified it to be able to show web content in a UIWebView. This is great, because we can now open pictures, videos if we liked, not just UIAlertViews.
The rich MOTD looked exactly like the one on the right. We are still hosting it http://soctics.com/launch.html. If you have look, there are a few things to notice.
There are two teasing pictures on the top of this screen so big that it actually won’t fit into the whole screen. This was good thing for two reasons:
- We hoped, both pictures were eye catchy and it would engage our previous game’s players and
- LaunchRock part takes some time to load at the bottom and while it gets loaded hopefully players are still watching the second picture.
Once LaunchRock loaded, it turned out that it wasn’t looking nice on a mobile screen. The font size was too small and the whole page could be scrolled sideways. Although LaunchRock’s support was quick and friendly saying they are working on the mobile version, we did not have time to wait so did our own way 
It included a quite easy change within the relevant launch.css and another one to duplicate the email form.
The first part in the css is about to fit LaunchRock nicely on an iPhone. (We only targeted those customers. Like 90% of Soccer Tactics games was played on an iPhone). Adjusting the text in the middle and making it bigger so it’s easy to read without pinch-zooming.
The second part, to duplicate the email entry form, was done to maximize the likelihood of the conversion. On a mobile device, only some part of the page is visible and we wanted the form to appear two times.
If you have a look at the source of the html how it was done, there is some nasty things going on. (I must admit, I get dirty when it comes to html ).
Here is the relevant part:
var count=0;
function addSignup() {
count++;
if (count==14) {
var y = $('#signupform-8M3HZA8H');
var x = y.clone(true,true);
x.attr("id","signupform2-8M3HZA8H");
x.prependTo('#inviteform8M3HZA8H');</code>
$("#signupform2-8M3HZA8H > #email-8M3HZA8H").change(function(){
$("#signupform-8M3HZA8H > #email-8M3HZA8H").attr("value",this.value);
})
}
}
head.js(
"http://launchrock-ignition.s3.amazonaws.com/ignition.1.1.js");
head.ready( function() {
$('#launch').bind('DOMNodeInserted', function(event) {
addSignup();
});
});
There are a few things going on here.
- There is a <div> in the html body with id=launch.
- The content along with the id of that div will be modified once the ignition part is downloaded.
- Before that modification, the addSignup() function is added to that div’s DOMNodeInserted event to catch when the div is being modified to contain the LaunchRock part.
- The addSignup function simply clones and puts to the right place the signup form. It also changes the cloned form’s id otherwise the the sign up form would be moved not copied.
- addSignup only clones for the 14th time the div is modified. After some trial and error it turned out that after the 14th DOM modification, the sign up part could be cloned. (I am a bit surprised this code still works).
Okay, was it worth it? Well, a nice thing about LaunchRock is that is shows you analytics about the conversions That showed that it was 3x less likely that a visitor would sign up but since it got delivered so many times it ended up being 8x more sign up than before.
There was one more (sneaky) thing we did while delivered our MOTD but it will be another post.
If you are interested in our MOTD module as a service, feel free to sign up for it’s LaunchRock site: motd.bitongo.com.