Detailed Examination of Top Landing for Installs

Today I’m going to have a detailed examination of a top landing for app installations and look at the code and scripts that help increasing CR. In general, the aim of this article is to help people create their own landing, even if they are unfamiliar with HTML and JS and find it very frustrating to see all those unknown symbols in the HTML code.

Every newbie thinks that now he or she will create their own landing and immediately get an incredible ROI with tons of traffic, but that doesn’t usually happen. If you’re not a professional in HTML+CSS, you can’t create a page that will look equally well in different browsers and various mobile devices. You shouldn’t naively think that your landing will be better than that of more experienced colleagues. However, don’t be disappointed as now there are plenty of possibilities of spying on your competitors, and you can also take a ready landing that previously brought profit to someone and adjust it in accordance with your needs. There’s no guarantee that you’ll also get profit from someone’s landing, but you’ll at least know that your landing is displayed correctly, and that it hasn’t moved beyond the visibility range of some user.

To begin with, we should find an example of a proper landing. For that purpose I’ll go to adplexity and try to find a suitable prey for my hunting there. To do that I sort out landings according to the volume of traffic received. It’s very simple: the more traffic a landing has received, the longer it has been running, the higher the chance of bringing profit to its owner is.

toplander-adplexity

Here’s the search result, let’s take the second landing offhand, download it and study its code, the scripts that the author uses to increase the conversion and examine the structure of the landing. That will help us make our landings better or just use this one. In order not to overload this article with excessive code, I won’t post it all right now as you can download the code here, unpack and open index.html in a text editor. By the way, whenever I need to do code editing, I use Notepad ++, a good editor that is free and its functionality is enough for our needs. Download, install and open the landing.

Note: you don’t have to be a professional layout designer, but basics of HTML and CSS are a must, at least in order to be able to make corrections in the code and adjust any of the landings you like according to your needs. In order to get some basic knowledge of the subject http://htmldog.com/ is enough, and, of course, you can always ask Google. If you want to know more about code editing and become an advanced user in that field, I highly recommend codecademy.com.

To see how your downloaded landing looks like, simply drag index.html file to the browser window. This time we can see quite a typical landing for mobile devices for installs. All mobile landings look almost the same, except styles, white or black background color, more or less eye-catching headlines, etc. All these are done with one aim – to increase conversion.

Let’s take a look at main parts of such landing:

1. Headline

2. Description

3. Click to action button (CTA)

That’s actually all one needs to show to a mobile user – there’s no need to overload a landing page (LP). Too much text is often not good as people don’t like reading. If the button can’t be seen, it’s also not good. A boring and plain headline will never do you any good as well. Headlines need to draw attention of users in order to make them stay. Here I won’t go deep into peculiarities of marketing as the article is not about that. As I have already emphasized the most important details, let’s move, as stated in the beginning, to the LP’s code, in particular, to JS scripts that help raising CR.

The first JS script that you will see there is the following:

<script>
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
);
}
</script>

It’s simple, this landing is created for the Voluum tracker, and that’s why it uses the script of this tracker that allows displaying parameters of different devices (model, OS, brand, etc.) and geo (country, city, IP) of a user directly in the landing. The ways of use will be shown below. If you use this trick, don’t forget to add parameters required for output to the landing link in Voluum as it’s shown in the picture:

lander_name

Other parameters are added the same way.

Further details can be found in wiki voluum.

Now let’s move to main scripts.

 

Back Button Block script

<script type="text/javascript">
! function () {
var t;
try {
for (t = 0; 10 > t; ++t) history.pushState({}, "", "#");
onpopstate = function (t) {
t.state && location.replace("#")
}
} catch (o) {}
}();
</script>

In short, it “turns off” the ‘back’ button, so if a user wants to leave your page, the script will prevent them from doing it by blocking this button. Increases CR. It’s also possible to add a link to an offer instead of that back button, as a result a user will load the offer page by pressing the ‘back’ button. To do that, instead of ‘#’ in the code

t.state&&location.replace("#")

you need put a link to the offer. If you use Voluum as tracker, this part of the code will look the following way:

t.state&&location.replace("http://xxxxx.trackvoluum.com/click")

Here you can also direct a user to another landing, offer or even back traffic a user to a network like Mobusi. There might also be global offers for back traffic in affiliate network – you can ask your AM about that. These three ways of redirecting users should always be tested as one of them can bring you additional profit. If one of these ways fares well – save it. Though you can start from simple blocking as in this script.

 

Vibration

<script type="text/javascript">
(function () {
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
navigator.vibrate([1000, 500]);
})();
</script>

When a user visits the landing, his/her smartphone will vibrate (it doesn’t work on all devices, but it’s still preferable). Increases CR.

 

Alert

<script> alert("Warning! Your " + getURLParameter('brand') + " " + getURLParameter('model') + " is outdated! \n\nInternet use will be slow and limited if you do not update your system.\n\nClick OK and follow the instructions to continue using your " + getURLParameter('brand') + " " + getURLParameter('model') + ".");</script>

As you may have already understood, it’s a popup warning. Notifications of this kind help drawing attention of a user to your landing and display it over other windows. Increases CR. Pay attention to a peculiar function – the user’s smartphone model and brand are displayed directly in the text of the warning. That is made by means of Voluum, as it was stated above, with the help of this part of the code:

" + getURLParameter('brand') + " " + getURLParameter('model') + ".

Pay attention to this feature as well, it also increases conversion.

 

Timer

<script>
var count=30;
var counter=setInterval(timer, 1000);
function timer()
{count=count-1;
if (count <= 0)
{clearInterval(counter);
return;
}document.getElementById("timer").innerHTML=count +" seconds left.";}
</script>

Here everything’s pretty clear, performance of such timer can be seen directly in your browser by opening the landing. Increases CR. One important thing – the script itself won’t work. To change that, you need to call this script in the body of the HTML code, as it’s done in our example landing:

<span style="color:red" id="timer">30 seconds left.</span>

As you can see, id="timer" accounts for display of the timer on the screen. So you add this code exactly where you want to see the timer.

 

Audio

<audio autoplay="autoplay" preload="">
<source src="http://landingfolder.com/eng/alert6.mp3" type="audio/mpeg">
</audio>

Here it is solved not by means of Javascript, but with the help of HTML-code. What it gives: upon entering, a user hears a sound signal that you will load in your code for them. It can be a system signal from the Android OS or any other, anyway, it should draw attention. Increases CR.

 

Display of Model and Brand

Your <script>document.write(getURLParameter("brand") + (" ") + getURLParameter("model"))</script> is outdated!

So you’ve reached the script that enables display of these parameters in the landing. Earlier I’ve emphasized an important moment: you should insert a special script in the head tag of your HTML code to make this trick work. Increases CR.
If the script is used correctly, a user will see something like that:

Your Sony Xperia X2 is outdated!

 

Date Display

<script type="text/javascript"><!--
var date = new Date();
var d  = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + "." + month + "." + year);
//--></script>

It’s inserted in the code in the place where you want to display a current date. Increases CR.

 

Exit Pop (Popup Window While Closing the Page)

<script language="javascript">var PreventExitPop = true;function ExitPop() {if(PreventExitPop != false) {return "Hold on! Your " + getURLParameter('brand') + " " + getURLParameter('model') + " might work 3x faster! Special offer for France: stay on the page and download it for FREE!"}}window.onbeforeunload = ExitPop;</script>

It’s the last script that you see here: if a user tries to close the window with your landing, they see the next alert. Increases CR. Here you also see the familiar code of the device model and brand inside the alert:

" + getURLParameter('brand') + " " + getURLParameter('model') + "

 

Working with Images

Perhaps, you noticed these lines in the code of the landing:

<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAACuFBMVEUAAAAAZrUAZrUAZLMAZbQAZbQAZrUAZrUAZbQAZrUAZrWj/zkAZrSj/zek/zgAZrSk/zcAZ7UAZ7Wj/zej/zcAaLYAYbOl/zWk/zgAZbQAZrWk/zgAZrUAZrUAZrQAZrMAZ7Wj/zcAZrSk/zgAZrQAZrUAZrUAZrSk==" width="60"></p>

I decided not to copy the complete block as I think you already understand which part of the code I’m talking about. That’s just an image packed in base64. The advantages of this way can be found on stackoverflow.com.

Quick image loading is an important part of optimizing a landing for a mobile. Users won’t wait until your heavy megabyte images open. So decrease their size as much as possible. Compress them with services like tinypng.com and code in base64.

Decrease the size of your images. In this landing an image of only 60px wide is used, but in the original version of the landing it wasn’t coded in base64 and was for some reason 200 x 200 weighing 30Kb. I resized it to required dimensions, that is 60х60, compressed its size with the help of tinypng, and the image weight reached only 4Kb without losing any quality. And now imagine that you’ve got not one 30kb image, but, let’s say, about 20, so how longer will your landing open for a user? Speaking about heavier versions of landings, for example, for sweeps, there are often a great number of images, and such optimizations allow increasing profit significantly.

 

Let’s sum it up:

1. Firstly, you don’t have to write your own landing from scratch. Take this one or another landing as your basis and edit its text (for example, translate it into Indonesian/Thai or any other language) adapting it to your needs, or leave it as it is.

2. You can easily google how to edit code or study HTML and CSS at an elementary level.

3. To increase CR for landings, different aggressive scripts are used like the ones in this landing. You are likely to see their modifications, but this guide will help you understand why use them and whether they should stay in a landing or be removed.

4. Be also attentive to network rules, check if you can use all kinds of scripts, because quite often mislead and annoying scripts like the ones mentioned here are forbidden. Usually it’s solved by cloaking, but sometimes you fail to cloak completely and can be banned.

5. Compress your images, resize them and code in base64.

 

Time to act!

 

  • Very usefull post!

  • Matteo

    Thank you, very nice post! 🙂

    But the exit alert doesn’t work when the user press X in the mobile browsers…There is an alternative way?

Do you want new tips?
SUBSCRIBE NOW!
I need your feedback!