Home > General > Affiliate Marketing Forum

Study of Top Landing for Installs [the article has useful scripts for landers] (31)

08-16-2016 07:36 PM #1 Mia (Member)
Study of Top Landing for Installs [the article has useful scripts for landers]

A little intro: it will be my first article on STM forum, I posted it in march on my russian blog, now I translated it and I want to share it on STM, I hope it will be useful here.


Study of Top Landing for Google Play Installs





Today we’re going to have a detailed study of a top landing for installs, look at a code and scripts that help increase 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 reach an impasse while meeting unclear symbols in the HTML code.

Each newbie thinks that now they’ll create their own landing and immediately get an incredible ROI and tons of traffic there, but it doesn’t usually happen. If you’re not 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 your competitors, and you can also take a ready landing, that has already brought profit to someone, and cater it to your needs. There’s no guarantee that you’ll also get a profit from someone’ landing, but you’ll at least know that your landing is displayed correctly, and it hasn’t moved beyond the user’s limit of visibility.

To begin with, we should find an example of a proper landing, so for that I’ll go to adplexity and try to find there a suitable prey of my hunting. For that I sort out landings according to the amount of traffic they’ve received. It’s all simple here: the more traffic the landing has received, the longer it has been run, — the higher is the chance it’ll bring profit to its owner.



Here’s the search result, let’s take the second landing offhand, download it and study its code, the scripts that author uses to increase conversion, its structure. That’ll help us master our landings or just use this one. In order not to overload this article with excessive code, I won’t insert the whole of it here as you can download it here in attach (index.zip), unpack and open index.html in a text editor. By the way, for code editing I use a good Notepad ++ editor, it’s free and all its goodies are 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-know, at least in order to be able to introduce corrections into the code and change any of landings that you’ve liked according to your needs. For an elementary level of learning htmldog.com is enough, and, surely, you can always ask Google. If you still want to go deeply into layout and study all its subtleties, I highly recommend you codecademy.com.

To see how your downloaded landing look like, drag an index.html file into the browser window. We see quite a typical landing for mobile devices for installs, and all mobile landings look almost the same, except styles, white or black background color, headlines that are violent or not, etc. All of this is aimed at increasing conversion.

Let’s consider the components of such LP:

1. Headline

2. Description

3. Click to action (CTA)

That’ actually all that we need to show to a mobile user — there’s no need to overload an LP. Much text — usually bad, people don’t like reading. The button can’t be seen — bad. The headline is obscure — also bad. The headline should interest a user in order to make them stay. Here I won’t go deep into the subtleties of marketing as it is, and the article is not about that. As I have already emphasized more important details, let’s move, as stated in the beginning, to the LP’s code, in particular, to JS scripts that help raise CR.

The first JS script that we see here is this:

Code:
<script>
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
);
}
</script>
It’s simple here, this landing is created by the Voluum tracker, and that’s why it uses the script of this tracker that allows to deliver parameters of devices (model, OS, brand, etc.) and geo (country, city, IP) of a user directly to the landing. The ways of usage will be shown below. If you’re using this trick, don’t forget to write parameters required for delivery next to the landing link in Voluum. It’s shown here:



Other parameters are written the same way.

Further details are there, in wiki voluum.

Now about main scripts.



BackButton script

Code:
<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 cuts off the ‘back’ button, particularly, if a user wants to leave us, we prevent them from doing it by blocking this button. Increases CR. Instead of cutting off we can put a link to the offer, as a result a user will get on our offer by pressing the ‘back’ button. For that instead of ‘#’ in the code

Code:
t.state&&location.replace("#")
we put a link to the offer. If you use Voluum as a tracker, this part of the code will look as following:

Code:
t.state&&location.replace("http://xxxxx.trackvoluum.com/click")
Here you can also direct a user to another landing, offer or even to traffic back in a networks like Mobusi, or there’re global offers for traffic back in affiliate network — you can ask your AM about that. Thee three ways of redirecting users should always be tested as one of them can bring us addition profit. If one of these ways fares well — we save it. Though we can start from simple blocking as in this script.



Vibration

Code:
<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 telephone will vibrate (it doesn’t work on all the devices, but it’s still preferable). Increases CR.



Alert

Code:
<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’ve understood, it’a popup warning. Notifications of this kind help draw attention of a user to our landing and pull it out over other windows. Increases CR. Here the peculiarity is that the user’s telephone model and brand are delivered directly in the warning text, it is made for Voluum, that were stated before, with a help of this part of the code:

Code:
" + getURLParameter('brand') + " " + getURLParameter('model') + "
Take it home, it also increases conversion.



Timer

Code:
<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 you can see directly in your browser by opening the landing. Increases CR. One important thing is that the script itself won’t work. To make it do that, you should additionally call this script in the body of the HTML code, as it’s done in our example landing:

Code:
<span style="color:red" id="timer">30 seconds left.</span>
As we see,
Code:
id="timer"
accounts for timer delivery to the screen. So we write this code where we want to see the timer.



Audio

Code:
<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 a help of the HTML-code. What it gives us: while 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.



Model and Brand Delivery

Code:
Your <script>document.write(getURLParameter("brand") + (" ") + getURLParameter("model"))</script> is outdated!
So we’ve got to the script that organizes delivery of these parameters to the landing, and earlier I’ve emphasized an important moment: you should insert a special script in the HTML code head to make this trick work. Increases CR.

While using the script, a user will see something like that:

Code:
Your Sony Xperia X2 is outdated!


Date Delivery

Code:
<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 we want to deliver a current date. Increases CR.



Exit Pop (Popup Window While Closing the Page)

Code:
<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 we see: if a user tries to close the window with our landing, they see the next alert. Increases CR. Here we also see the familiar code of the device model and brand delivery inside the alert:

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


Working with Images

You’ve possibly noticed this code in the code of landing:

HTML Code:
<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 whole of it here as I think you’ve already understood which 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. A user won’t wait until you megabyte images open. So decrease them to the maximum. Crunch them with services like tinypng.com and code in base64.

Decrease the size of your images. In this landing an image of only 60 px 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 30 Kb. I decreased it to required measures, that is 60х60, crunched it with a help of tinypng, and the image got to weigh only 4Kb not losing its quality at all. And now imagine that you’ve got not one image of 30 Kb, 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 to increase profit significantly.


Let’ sum it up:

1. Firstly, you don’t have to write your own landing from scratch. Take this or any other one a 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 any subtleties of upmaking or study HTML and CSS at an elementary level.

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

4. Be also attentive to network rules, check if you can use all the set of scripts, because it’s always so that any mislead and annoying scripts, that we’ve studied here, are forbidden. Usually it’s solved by cloaking, but sometimes you fail to cloak completely and can be banned.

5. Decrease your images, crunch them and code in base64.

Now act!

08-16-2016 07:40 PM #2 vortex (Senior Moderator)

WOW!!

Thanks Mia for such a tremendous share! I'll be linking to this post a lot in the future.

For those of you that don't know Mia - she's a dear friend of mine. She's the Editor of our Russian blog:

http://stmblog.ru/

As well, she maintains her own blog on AM:

http://ru-affiliate.info/

For those of you that can read Russian, I'd highly recommend that you check out these blogs now!



Amy

08-16-2016 07:52 PM #3 cmdeal (Veteran Member)

Whoa! Awesome!

08-16-2016 07:53 PM #4 Mr Green (Administrator)

Solid thread Mia!

08-16-2016 08:10 PM #5 fatstacks01 (Member)

Great thread Mia!

08-16-2016 09:15 PM #6 matuloo (Legendary Moderator)

Good job Mia, impressive first article!

08-17-2016 10:29 AM #7 Mia (Member)

Thank you guys for the feedback - very much appreciated!

08-20-2016 04:11 AM #8 masraw (Member)

Thanks for posting this Mia. Great information.

08-20-2016 02:01 PM #9 digitalraves (Member)

This is a nice one, loaded first post. Thanks Mia, hope am allowed to share this ?

08-20-2016 02:42 PM #10 racket (Member)

Nice tutorial, quick question though, is a double meta refresh a safe way to cloak your landing page from affiliate network?

08-21-2016 08:12 AM #11 presfox (Member)

No, afgfiliatee networks use spy tools too, even easier for them if the spytool has a filter for offer / network.

So do advertisers btw

08-22-2016 02:11 AM #12 vincent9 (Member)

nice post!!

quick question.

would the java scripts not be better placed at the end of the lander just before the </body>

or am i wrong?

08-22-2016 10:29 AM #13 caurmen (Administrator)

Fantastic stuff. The Base64 encoding trick is really cool - I'd actually not come across that one before. Nice!

08-22-2016 04:06 PM #14 affpayinggao (Veteran Member)

Thanks a lot Mia!

08-22-2016 05:36 PM #15 rubies (Member)

Just something that I was looking for. Excellent post and excellent timing.

08-22-2016 07:23 PM #16 vincent_ (Member)

Quote Originally Posted by vincent9 View Post
nice post!!

quick question.

would the java scripts not be better placed at the end of the lander just before the </body>

or am i wrong?
Yes and no.
Rendering JS can take more time and the HTML and CSS that are under the JS lines are not rendered until the JS is done rendering.
So all non essenstial JS should indeed above the </body> tag (protip: in HTML5, <html>, <head> and <body> tags aren't even necessary anymore.
Though the essential JS should be loaded earlier.

So which JS is essential?
For example if I have some lines of jQuery on my page, they won't work until the jQuery library is loaded.
That is why you'll always first see the <script src="jQuery.min.js"> and then a <script src="main.min.js"> tag.

The same goes for the model and brand callout. You have to put the JS before the actual callout because otherwise the variables are not defined.
I also recommend to put the JS alert at the top of your html file, because that will "lock" the user on the page. If you put it at the bottom, the visitor may have a chance to close the page before the alert was loaded.

08-22-2016 09:06 PM #17 Mia (Member)

Quote Originally Posted by vincent_ View Post
Yes and no.
Rendering JS can take more time and the HTML and CSS that are under the JS lines are not rendered until the JS is done rendering.
So all non essenstial JS should indeed above the </body> tag (protip: in HTML5, <html>, <head> and <body> tags aren't even necessary anymore.
Though the essential JS should be loaded earlier.

So which JS is essential?
For example if I have some lines of jQuery on my page, they won't work until the jQuery library is loaded.
That is why you'll always first see the <script src="jQuery.min.js"> and then a <script src="main.min.js"> tag.

The same goes for the model and brand callout. You have to put the JS before the actual callout because otherwise the variables are not defined.
I also recommend to put the JS alert at the top of your html file, because that will "lock" the user on the page. If you put it at the bottom, the visitor may have a chance to close the page before the alert was loaded.
Great and detailed explanation, thanks a lot!

08-23-2016 09:30 PM #18 racket (Member)

Can anyone shed some light on that one specific lander, the google av one thats everywhere, do I need to pass any variables throught Voluum for it to translate the lander? or does it do it automatically based on browser language settings?

08-24-2016 12:31 AM #19 dandyman (AMC Alumnus)

@racket

Nope. You need to translate the page. Either by using a spytool and finding that page in your chosen language (copy/paste) or hire someone (Fiverr, Odesk, Transey) to translate that text in any other language you want to use.

Through Voluum you can use tokens for OS, Model, Brand, Country and whatever callout you wish to try. But not for translation.

08-30-2016 11:56 AM #20 clickky (Member)

Hi there!
I found out that tablet traffic showed negative ROI while mobile was green for my campaign with a landing page. When I excluded tablets, the volume decreased significantly and the price raised up. I've understood that the only way to get profitable campaign was to optimize tablet lander. I checked it out using the real device. It looked well in general. The main issue was that some mobile scripts didn't work at all e.g. Back button Js, Exit Js. Have anyone faced with such issue. I'm not a coder guy and it would be very helpful to get the hint.

08-30-2016 02:40 PM #21 caurmen (Administrator)

@clickky - which tablets were you having problems with?

08-30-2016 03:20 PM #22 clickky (Member)

Hi Caurmen! Thanks for the reply. I'm excited getting response from you.
I have already fixed the issue. That was my fault. I didn't load all JS files into the folder for tablet landing page.
I will attach my statistics for this campaign. As you can see the the landing page for tablets didn't have the Back button JS and Exit JS, meantime mobile had.
Click image for larger version.  Name: 2016-08-30_1754.png  Views: 113  Size: 53.6 KB  ID: 12528

10-04-2016 09:37 AM #23 metdark (Member)

Learned a lot from this thread and other threads too.

Anyway FYI the Exit Pop's message (..." might work 3x faster! Special offer for France: stay on the page and download it for FREE!")
will not show in Chrome because of Chrome updates with the onbeforeload.

Chrome replace the personalized message with the default "...Changes you made may not be saved".

However the personalized message works on Internet Explorer at the time of writing.

Relevant links:
https://productforums.google.com/for...rs/TPgNfT5y6Wg
https://developers.google.com/web/up...reload-dialogs

12-22-2016 04:34 PM #24 banana123 (Member)

Is there an optimal spot to place the vibration and audio scripts? Before/after the </head> tag, for example?

Thanks, great post!

12-23-2016 09:48 AM #25 caurmen (Administrator)

I'd recommend putting them just before the </body> tag - that way the page will be fully loaded when the user looks at the page, and it also won't delay loading.

12-23-2016 02:03 PM #26 banana123 (Member)

Quote Originally Posted by caurmen View Post
I'd recommend putting them just before the </body> tag - that way the page will be fully loaded when the user looks at the page, and it also won't delay loading.
Thanks Caurmen.

I tried testing this on my phone, but it didn't vibrate for me. Should this work on all models of phones? Trying to determine if I'm doing something wrong or if it just doesn't work on my specific phone.

Also, would you put the code for the sound alert in the same place?

12-23-2016 03:38 PM #27 caurmen (Administrator)

Yep, I'd put the sound in the same place.

Vibrate is common but not universally supported. http://caniuse.com/#feat=vibration

04-11-2017 09:17 AM #28 leongyh (Member)

HI,
Anyone can share entry pop script ? Thanks

04-11-2017 10:24 PM #29 vortex (Senior Moderator)

Quote Originally Posted by leongyh View Post
HI,
Anyone can share entry pop script ? Thanks
Are you looking for the js alert?

If so, try this:

<script>
function getURLParameter(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>

<script type="text/javascript">
alert("Congratulations!\n\nYour "+ getURLParameter('brand') +" was selected because you have the chance to recieve the new iPhone 7\n\nPress OK to participate and receive an iPhone 7");
</script>
There are more versatile solutions - I'll see if I could get an expert to chime in here...



Amy

01-10-2018 04:53 AM #30 pavel_apostolov87 (Member)

any update on this Amy? have you got hold of any expert yet? thanks!

01-12-2018 09:16 PM #31 vortex (Senior Moderator)

Quote Originally Posted by pavel_apostolov87 View Post
any update on this Amy? have you got hold of any expert yet? thanks!
Unfortunately he was busy at the time. But did that entry alert script not work? Should be sufficient to serve the purpose!

If it doesn't, please let me know, and I'll look for another solution.


Amy

Home > General > Affiliate Marketing Forum