​​Продолжаем ковырять разные любопытные скрипты, на очереди "Калькулятор лишнего веса" для любителей полить похудалки🙃

Скрипт выдран из чьей-то проклы на оффер IdealFit и показывает "калькулятор" на русском языке. Подредачить под свой оффер и под любой язык не составит большого труда.

Из особенностей:
- responsive design - нормально отображается на телефонах
- требует для работы JQuery (а отвязывать её мне было лень)

Пользуемся☝

#scripts #promo

​​Салам, братья!
Сегодня разберём с вам офигенный скрипт для прокл/лендов, который, как по мне, просто-таки маст хев для любого арбитражника, использующего видео на своих сайтах.

Практически всем нам иногда приходится встраивать в прокладки-лендинги видеоконтент. А самая адекватная площадка для размещения видео - это, очевидно, YouTube. И всё вроде бы хорошо: заливаешь туда свой видос, дальше нажимаешь кнопочку Share, выбираешь Embed, копируешь код iframe-а и вставляешь себе на сайт, так?

Так - да не так. Вы видели, сколько весят те скрипты, которые загрузятся пользователю, который зайдёт к вам на огонёк? Два, мать его, с половиной мегабайта! На некоторых гео, где у пользователей говёный интернет, эти 2.5Мб станут причиной того, что юзер не дождётся загрузки, плюнет и уйдёт. Да у меня вообще редко бывает, чтобы, скажем, прокла с картинками весила больше 1-1.5Мб!

И что же делать? Умные люди уже давно запилили скрипт под названием YTDefer, который более чем в 10(!) раз сократит размер подгружаемого контента (до 209Кб). Как это происходит? Весь прикол в том, что скрипт загрузит только заглавную картинку видоса, а весь остальной контент загрузится только после того, как пользователь кликнет на Play.

Офигенно же! На прикреплённом видео можете воочию убедиться в справедливости моих слов, весьма рекомендую вам как минимум иметь в виду, что такое решение есть, и кинуть его себе в закладки, ведь никогда не знаешь, когда оно понадобится 🙃

#scripts #promo

Держите кучу плашек для ваших крео и прокладок. Поднимают траст до небес! 🙃

P.S. У вас есть другие красивые значки? Оставляйте их в комментах, соберём их все!

#promo

Альтернатива WebScrapBook-у для скачивания страничек подъехала. Можно юзать для любых одностраничников, передаю слово автору:

Привет!
https://sitecopy.me/ - регистрация доступна для всех и сервис абсолютно бесплатный. Только необходимо подтвердить почту.

Плюсы рипа тут:
- автоматически сжимаются изображения
- удаляются метрики (яндекс, гугл)
- файлы сортируются по папкам (css, img, js, other)
- сервис абсолютно бесплатный и нет ограничений (кроме мощности сервера)

Если будет спрос на сервис, тогда в будущем можно будет реализовать:
- рип через прокси
- вход на страницу через эмуляцию браузера с подменой языка и тд.

#promo

​​Все мы прекрасно знаем, что юзеры ОЧЕНЬ не любят заполнять формы на сайтах. Чем длиннее и сложнее форма, тем менее охотно в неё вбивают данные, особенно с мобильных телефонов. Поэтому сегодня будем упрощать юзеру эту задачу.

Для начала повторим общеизвестное: у поля ввода номера телефона тип ДОЛЖЕН БЫТЬ НЕ text, а tel, т.е.:

<input type="tel" name="phone" required/>

Тогда у юзера при тапе на это поле высветится не обычная клавиатура с буквами, а цифровая, благодаря которой вводить номер будет гораздо проще.
Но давайте лучше сделаем так, чтобы не нужно было вводить вообще ничего! Переходим к самому вкусному🔥

Посмотрите внимательно на скрины. На них видна обычная форма заказа с двумя полями: имя и телефон.
Видите разницу?

Скрин 1. В поле ввода имени в выпадающем меню подсказок куча какого-то мусора.
Скрин 2. В поле ввода телефона тоже полно не пойми чего.
Скрин 3. В подсказке мне сразу же показыватся моё имя и мой телефон
Скрин 4. Результат тапа на подсказку: ВСЕ поля сразу же заполнены валидными данными!

Так как же сделать, чтобы выдавалась такая подсказка? Всё дело в атрибуте autocomplete.
Для поля с именем нужно прописать autocomplete="name", а для телефона autocomplete="tel".
Полный код:

<input type="text" autocomplete="name" name="name" required/>
<input type="tel" autocomplete="tel" name="phone" required/>

Вставляйте этот код себе на проклы и ленды, гайз, и лейте в плюс!🙃

#promo

​​Привет, арбитражная братия👋
Продолжаем разбирать простенькие но полезные скрипты для ваших прокл и лендингов.
Сегодня у нас под микроскопом кнопка! Большая такая, красного цвета, с тенью и надписью "Заказать сейчас".

"А в чём проблема засунуть в ленд кнопку, Жёлтый?", - спросите вы.

И я вам-таки отвечу: "Тема в том, что эта кнопка ВСЕГДА привязана к нижней части экрана и болтается там, пока юзер скроллит страницу. Как только юзер понял, что он созрел для заказа, ему не нужно метаться и искать форму: клик на кнопку и, вуаля, форма перед его глазами - удобно!"

👉Посмотреть код и чекнуть, как это работает, тут👈

Самая хорошая новость в том, что кнопка одинаково отображается и работает на любых устройствах, а пользоваться ей просто:
1. Копируете весь CSS по ссылке выше и пихаете себе в ленд
2. Добавляете себе куда угодно в HTML-код ленда такую конструкцию:

<div class="link-block">
<a class="link" href="#orderform">order now!</a>
</div>

3. Меняете текст в кнопке и ссылку, если ID вашей формы заказа НЕ orderform
4. Поздравляю, вы великолепны 🙃

#scripts #promo

Продолжаем разговор про проклы/лендинги. И сегодня рассмотрим один из самых простых и эффективных способов ускорить их загрузку.

Взгляните на скрины к посту. На первом из них показана статистика загрузки с моей локальной машины картинок из обычной проклы на похудение.
Обращаем внимание на следующее: размер 1.3Мб.

Теперь палим второй скрин: это абсолютно та же самая прокладка, но что это? Загруженный размер картинок - 448Кб.
На третьем же скрине та же прокла, но уже в режиме отображения: эмуляция мобильного устройства - Размер картинок всего 189Кб (!)

Предвкушаю ваш вопрос: Как??!

Секрет прост и называется он lazy-loading, говоря по-русски: отложенная подгрузка контента.

Что это означает? А то, что изображения проклы не будут загружаться, пока не понадобятся пользователю (т.е. пока он до них не доскроллит).

При обычном режиме работы браузер сразу же грузит все картинки, и юзеру приходится ждать, если же мы совсем чуть-чуть поменяем HTML-код, то можем сократить загружаемый размер нашей проклы в несколько раз. Давайте покажу, как это сделать.

Обычное изображение кодируется в HTML как тег img, например: <img src="1.jpg">
Достаточно добавить этому тегу атрибут loading="lazy" и изображение станет "ленивым"🙃

<img loading="lazy" src="1.jpg">

Есть один маленький нюанс. На данный момент нативную ленивую подгрузку поддерживает 75% браузеров. Из тех, что пока ещё её не реализовали (а точнее реализовали, но не включили поддержку по умолчанию) - "горячо любимая" мною компания Apple с её десктопным и мобильным Safari.

Но так-то пофиг, рано или поздно поддержка будет включена, и вы в любом случае ничего не теряете, добавив lazy loading уже сейчас. Безусловно, есть возможность подключить всякие js-библиотеки и сделать так, что будет работать везде уже сейчас, но моя задача не грузить вас кодом, а показывать простые, но эффективные решения.

Итого ваша задача: находим в лендах/проклах все теги img и добавляем им вышеуказанный атрибут, хуже точно не будет, а вот лучше - весьма вероятно. И не забывайте лить в плюс!

P.S. Имейте в виду, что атрибут loading="lazy" также применим к тегам iframe, мало ли, пригодится для клоакинга или чего ещё 😉

#promo

Усложняем жизнь любителям тырить проклы: убираем возможность захода по прямой ссылке👇

Зачастую, когда люди нашли ваш прелендинг, они смотрят адрес, написанный в теге <base> (так работает трекер Кейтаро), после чего выкачивают проклу именно по этому адресу. ХЗ почему и зачем, может быть у них WebScrapBook только в одном браузере установлен, может они WGet-ом хотят всё слить - вариантов масса.

Когда мы берём адрес из <base> и заходим по нему, мы, по сути, "обходим" все механизмы фильтрации Кейтаро и поэтому можно не юзать прокси, не париться по поводу того с десктопа вы или с мобильного и т.д.

Чтобы предотвратить возможно захода к вам на преленд по "прямому" адресу достаточно сделать одну простую вещь - добавить проверку: ленд работает через Кейтаро или нет?

Как это сделать?
У Кейтаро есть масса внутренних объектов, которые доступны на любой php-странице. Один из этих объектов - это $rawClick (можете почитать про него в документации, если интересно), в котором хранится вся инфа по клику.
Соответственно, нам достаточно проверить, доступен нам этот объект или нет. Если нет - значит это прямой заход и можно слать всех нахер🙃

Шаги
Переименовываем индексный файл из html в php. И первой же строкой вставляем вот такую вот конструкцию:

<?php
if (!isset($rawClick)){
echo 'Fuck off!';
exit();
}
?>

Вуаля, вы великолепны!

P.S. Путей обхода подобного неудобства нет и не будет🤷‍♂️

#promo #конкуренты

Загружаем витрину или лендинг в несколько раз быстрее!👇

Посмотрите на прикреплённый скриншот: строка наверху - это браузер Firefox, снизу - Google Chrome. Видите x2 разницу? Дочитаете пост до конца и поймёте, в чём прикол.

Но сначала давайте разберёмся, в каких случаях можно добиться такого ускорения.
Варианты следующие:

- вы льёте по схеме прокла и потом ленд;
- вы льёте проклаленды, но у вас по кнопке "Назад" грузится витрина или отдельный ленд оффера.
- когда у вас есть и прокла, и ленд, и бэкфикс, и чёрт в ступе🙃

При работе по этим схемам вы можете добиться значительного ускорения загрузки второго элемента вашей воронки. А теперь посмотрим, как это можно по-быстрому запилить.

Всё дело в атрибуте prerender тега link. Достаточно указать в таком теге нужный вам адрес, и браузер заранее подгрузит его контент! Что крайне положительным образом скажется на скорости отображения страницы, когда пользователь перейдёт на неё.

Пример для схемы прокла -> ленд для Кейтаро:

<link rel="prerender" href="{offer}">

Засовываем эту конструкция внутрь тега <head> проклы и радуемся жизни 🙃 Как сделать то же самое для витрины - оставляю вам в качестве ДЗ.

Ложка дёгтя: данный атрибут работает только в браузере Chrome, как в десктопной так и мобильной версиях. На Safari/Firefox ускорения не получится🤷‍♂️ Именно поэтому использовал на скрине разные браузеры, чтобы вы смогли оценить, как всё работает in action.

#promo

Годно! А для поиска селеб ещё есть вот эти вот сайты.

#promo

Никогда не вредно напомнить, как надо перерабатывать то, что не конвертит. Картинки-заголовки-структура-интерактив, вотэтовотвсё.
А тут как раз подходящая статья с примерами!👍

https://fbm.red/fbm-prokla/

UPD: и туда же вдогонку https://telegra.ph/Kriterii-promo-05-14

#promo