Разбор топового ленда по инсталлам

Untitled-1

Итак, сегодня мы подробно разберём топовый ленд под инсталлы, рассмотрим код и скрипты, помогающие повысить CR. Эта статья в целом будет призвана помочь сделать свой собственный ленд тем, кто не разбирается в html и js и встаёт в тупик при виде непонятных символов в html коде.

Каждый новичок думает, что вот сейчас создаст свой ленд и получит тут же безумный ROI и тонны трафика на нём, чаще всего этого не случается. Если вы не знаете HTML+CSS на уровне профи, вы не сможете сделать страничку, которая одинаково хорошо смотрелась бы в разных браузерах и на разных мобильных устройствах, вам не стоит наивно полагать, что вы сделаете ленд лучше, чем у более опытных коллег. Но не стоит расстраиваться, сейчас есть много возможностей слежения за конкурентами и можно взять готовый ленд, который принёс уже кому-то профит, и отредактировать его под себя. Не факт, что вы также получите профит с чужого ленда, но по крайней мере, вы будете знать, что ваш ленд нормально отображается, а не уехал у пользователя за пределы его видимости.

Для начала нам нужно найти пример годного ленда, для этого я пойду в adplexity и попробую там найти нам достойную жертву. Для этого я сортирую ленды по количеству полученного трафика. Тут всё просто: чем больше ленд получил трафа, чем дольше он крутился — тем выше вероятность, что он принёс деньги хозяину.

toplander-adplexity

Вот результат поиска, на вскидку возьмём второй ленд, скачаем и подробно рассмотрим его код, какие скрипты использует автор для повышения конверсии, как он устроен, что поможет нам усовершенствовать свои ленды или просто использовать этот. Полный код ленда я не буду выкладывать здесь в статье, чтобы не перегружать текст лишним кодом, можете его скачать по ссылке, распаковать и открыть index.html в текстовом редакторе. Кстати для правки кода я использую хороший редактор Notepad ++, он бесплатен и всех его плюшек вполне хватает для наших нужд. Качайте, устанавливайте и открывайте ленд.

Замечу здесь, что вам, как арбитражнику не нужно быть профессиональным верстальщиком, но основы HTML и CSS знать просто обязательно, по крайней мере, чтобы внести правки в код и переделать любой из понравившихся лендов под себя. Для простого уровня изучения хватит htmlbook.ru ну и всегда можно спросить Google. Если же вы всё же хотите погрузиться в верстку и изучить все тонкости, очень советую codecademy (english).

Посмотреть, как скачанный вами ленд выглядит, можно просто перетащив файлик index.html в окно браузера. Перед нами вполне типичный ленд для мобильных устройств под инсталлы, любые ленды под мобайл выглядят примерно также, за исключением стилей, где-то фон белый, где-то черный, где-то заголовки выглядят более кричащими и тп. Всё это призвано увеличить конверсию.

Рассмотрим основные составляющие такого ленда:

1. Заголовок

2. Описание

3. Кнопка (наша CTA)

Это в принципе всё, что нам необходимо показать мобильному юзеру, перегружать ленд не стоит. Много текста — чаще всего плохо, люди не любят читать. Не видно кнопки — плохо. Незаметный заголовок — тоже плохо. В заголовке вам важно заинтересовать пользователя, чтобы он не ушел. Я не буду здесь углубляться в тонкости маркетинга как такового, статья не об этом, и так как я уже сделала акцент на наиболее важных деталях, перейдём как и было обозначено в начале, к коду ленда, а именно js скриптам, помогающим увеличить CR.

Первый js скрипт, который здесь видим:

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

Здесь всё просто, этот ленд сделан под трекер Voluum и поэтому здесь используется скрипт этого трекера, который позволяет выводить параметры устройств (модель, ось, производителя и тп) и гео (страна, город, ip) пользователя непосредственно на ленд, варианты использования увидим ниже. Если используете эту фишку, не забудьте дописать к ссылке ленда в Voluum нужные для вывода параметры, как показано здесь:

Screenshot_3

Другие параметры дописываются аналогично.

Подробнее всё о том же в wiki voluum.

Кстати о трекере Voluum и его преимуществах я писала в этой статье.

Теперь о главных скриптах.

 

Блокировка кнопки «назад»

<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>

Кратенько, это блокировка кнопки «назад», а именно, если юзер хочет от нас уйти, мы ему этого сделать не даём, блокируя эту кнопку. Увеличивает CR. Можно поставить вместо блокировки линк на оффер, в результате чего юзер будет уходить при нажатии кнопки «назад» к нам на оффер. Для этого вместо «#» в коде

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

ставим ссылку на оффер, если у вас voluum, то эта часть кода будет выглядеть так:

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

Ну и еще тут можно отправить пользователя на другой ленд или на другой оффер или вообще на траффикбэк в сетку типа mobusi, либо есть глобальные офферы для траффбэка у партнерских сетей, о них можно уточнить у АМ. Эти три варианта перенаправления юзеров всегда надо тестить, тк один из них может принести нам дополнительную прибыль. Если какой-то вариант выстрелил — оставляем его. Но начать можно с простой блокировки как в этом скрипте.

 

Вибрация

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

При заходе на ленд, у пользователя будет вибрировать телефон (работает не на всех устройствах, но юзать всё же желательно). Увеличивает CR.

 

Алерт

<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>

Как вы уже поняли, это всплывающее предупреждение. Такого рода оповещения помогают обратить внимание юзера на наш ленд и вытащить его поверх других окон. Увеличивает CR. Особенность здесь в наличии вывода модели и бренда телефона юзера прямо внутри текста предупреждения, это реализовано средствами voluum, о которых уже было сказано ранее, с помощью этой части кода:

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

Возьмите на вооружение, также увеличивает конверсию.

 

Таймер

<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>

Здесь всё предельно ясно, работу такого таймера можете просмотреть непосредственно в своём браузере, открыв ленд. Увеличивает CR. Один важный нюанс, сам по себе скрипт работать не будет, в теле HTML кода нужно дополнительно вызвать этот скрипт, как сделано на нашем ленде-примере:

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

Как видим id="timer" отвечает за вывод таймера на экран. Соответственно прописываем этот код там, где хотим увидеть таймер.

 

Аудио

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

Здесь решение сделано не средствами javascript, а с помощью HTML-кода. Что оно нам даёт: при попадании пользователь услышит звуковое оповещение, которое вы ему подгрузите в свой код. Это может быть системный сигнал из ос Андроид, или же любой другой, так или иначе он должен привлекать внимание. Увеличивает CR.

 

Вывод модели и бренда

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

Добрались до скрипта, который нам организует вывод этих параметров на ленд, выше я уже отмечала важный момент: в head кода HTML нужно вставить специальный скрипт, чтобы эта фишка работала. Увеличивает CR.

При использовании скрипта юзер увидит примерно следующее:

Your Sony Xperia X2 is outdated!

 

Вывод даты

<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>

Вставляется в код там, где мы хотим вывести актуальную дату. Увеличивает CR.

 

Всплывающее окно, при попытке закрыть страницу

<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>

Это последний скрипт, который мы видим: если юзер пытается закрыть окно с нашим лендом, то видит очередной алерт. Увеличивает CR. Также здесь видим уже знакомый код вывода модели и бренда устройства внутри алерта:

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

 

Работа с изображениями

В ленде вы наверняка заметили такой код:

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

Я не стала копировать его сюда целиком, думаю вы итак поняли, о каком именно коде я говорю. Это не что иное, как картинка, запакованная в base64. О преимуществах данного способа можно прочесть на хабре. Я также писала об этом немного здесь.

Быстрая загрузка изображений — важная часть оптимизации ленда под мобайл. Пользователь не будет ждать, пока откроются ваши мегабайтовые картинки. Поэтому уменьшайте их максимально. Сжимайте сервисами типа tinypng.com и кодируйте в base64.
Уменьшайте размер своих изображений, в этом ленде используется картинка всего 60px в ширину, но в исходном варианте ленда она не была закодирована в base64 и при этом была зачем-то 200 х 200 и весила 30кб. Я уменьшила её до необходимых размеров, то есть 60х60, сжала с помощью tinypng и картинка стала весить всего 4кб, при этом нисколько не потеряв в качестве. А теперь представьте, что у вас не одна картинка весом 30кб, а их, допустим около 20, насколько дольше у пользователя будет грузиться ваш ленд? Если говорить про более тяжелые варианты лендов, например под свипы, зачастую там картинок великое множество и такие оптимизации позволят существенно увеличить профит.

 

Подведём итог:

1. Для начала вам не надо писать с нуля собственный ленд, возьмите за основу этот или любой другой и отредактируйте его текст (например, переведите на русский или любой другой язык) под свои нужды, либо оставьте как есть.

2. Любые тонкости вёрстки легко можно найти в гугле или изучить на элементарном уровне HTML и CSS.

3. Для повышения CR на лендах используются различные агрессивные скрипты, такие как на данном ленде, вам будут всречаться разные их модификации, но с данным гайдом вам будет уже легче разобраться, зачем они и нужно ли их оставлять на ленде или лучше удалить.

4. Также будьте внимательны к правилам сетей, проверяйте, можно ли использовать весь джентельменский набор скриптов, тк часто бывает, что запрещен любой мислид (введение пользователя в заблуждение), а также раздражающие скрипты, какие мы здесь разобрали. Чаще всего это решается клоакингом, но иногда заклоачиться полностью не выйдет и вы можете получить бан.

5. Уменьшайте ваши изображения, сжимайте их и кодируйте в base64.

 

Действуйте!

 

Понравилось? Скажи мне спасибо - расшарь пост!

  • Денис

    Была проблема такая: срабатывал popexit(блокировка закрытия страницы всплывающим окном) при нажатии на кнопку перехода на оффер? Не встречалась с таким?)

    • При клике нужно ставить переменной PreventExitPop = false; тогда не будет всплывать. Там же выше написана проверка, если не false то покаываем алерт.

      • Денис

        Спасибо!)

    • Albert Bzm

      Нужно на кнопке прописать onClick=»PreventExitPop = false;»

  • Подскажите пожалуйста в скрипте Блокировка кнопки «назад», ссылку на Voluum надо ставить в history.pushState и в location.replace? Не могу заставить скрипт работать :)

    • в location.replace только, в тексте была ошибка, спасибо

  • Dennis Felyx

    Не поленился проверить на своём андроиде как звучит аудио.
    Звучит оно — никак оно не звучит. Не работает тэг на мобильных устройствах, можно только запустить аудио в ответ на прикосновение или использовать какой-нибудь javascript framework, чего мне не хочется делать для мобильника.
    А как у вас с этим обстоят дела? Может кто-то проверить на своем девайсе?

  • Serj

    Миа, привет.
    Спасибо за статью. Как всегда на высоте.
    Ты случайно не знаешь как альтернативно реализовать вывод названия модели телефона?Если например я не юзаю вольюм. Юзаю imobitrax

    Не сильно силен в html. Но погуглил и нашел https://github.com/bestiejs/platform.js

    Вставил в код

    и в нужном месте ленда platform.product;

    Но ничего не вышло)

  • John m1

    Мия спасибо, ты супер:)

  • Stas Stoychev

    Статья — бомба, а как можно понять какой скрипт для чего? Как отличить скрипт сделанный под волуум, от скрипта другого назначения?