Как скачать лендинг и вручную переделать его под собственные нужды

С лендингами, как с запусками в FB — не у всех получается с первого раза. В этом материале мы расскажем, как удалить ненужные скрипты из ленда. Но сначала напомним, какими способами арбитражники скачивают ленды. 

Способ 1 (бесплатный): сохранить веб-страницу 

Этот способ самый простой: 

1. Зажимаем комбинацию клавиш «CTRL + S» или «CMD + S».
2. Кликаем «Сохранить как».
3. Выбираем «Веб-страница полностью».

Готово. На выходе получаем папку с лендингом и файлами с этого лендинга. 

Далее скачиваете редактор Sublime Text или NotePad++ и открываете .html файл с его помощью. 

Способ 2: скачать с помощью плагина 

Есть бесплатные и платные расширения для работы с лендами. Например, WSB — это бесплатный плагин для браузеров Google Chrome и Mozilla Firefox. Софт дает больше опций при скачивании: можно выгрузить отдельную страницу, изображение, или даже файл с лендинга. Подойдет, если хотите украсть что-то у конкурента, лендинг или проклу которого нашли в spy-сервисе. 

Из платных вариантов — LPcopier 2.0. Этот сервис сделан арбитражниками и для арбитражников. Из минусов — он платный (300 ₽) и работает с тремя CPA-сетями: M1, Ad1, Kma.biz. Да, есть функция копирования лендингов и из других источников, но она стоит дополнительных денег — от 200₽.

Если вы не разбираетесь в коде, за дополнительные 200-300 рублей можно установить:

• Счетчики аналитики;
• Визуальный редактор;
• Страницу upsell;
• Админку для заказов. 

Сервис автоматически чистит весь ненужный js-код и убирает все метрики и пиксели.

Полный список программ и расширений мы приводили в этой статье. 

Как проверить лендинг на предмет постороннего кода

Выше мы озвучили самые простые и наиболее эффективные способы скачать лендинг в несколько кликов и без знания кода. Можно ли, оставаясь нубом в разработке, почистить свой новенький ленд от лишнего кода? Да. 

Какой код вам точно не нужен:

• Код чужой метрики и аналитики;
• Пиксели FB или TikTok;
• Ненужные скрипты;
• Партнерские ссылки.

Но не каждый арбитражник их найдет, особенно если в глаза не видел код до этого момента. Однако и на этот случай есть решение: плагин SEO META in 1 CLICK, который показывает все метаданные лендинга. SEO META — это бесплатное расширение для Google Chrome.

Таким образом, схема работы с лендингом выглядит следующим образом: 

1. Открываем ленд. 
2. Разрешаем плагину SEO META in 1 CLICK доступ к странице. 
3. Смотрим метаданные.
4. Открываем HTML-страницу в редакторе и чистим ненужный код.
5. Заменяем текстовые блоки и блоки с изображениями.
6. Загружаем новый лендинг на свой домен и хостинг.

Вот так SEO META in 1 CLICK показывает метаданные, скрипты, ссылки и заголовки.

Кроме того, плагин показывает все изображения лендинга. Они открываются в новой вкладке — скачивайте. В секции «Social” отмечено, используется ли разметка Open Graph для Facebook* и Twitter. Об этой разметке поговорим ниже. 

Пошаговый гайд скачивания лендинга и удаления скриптов 

Чтобы убрать пиксели, вам потребуется знать основы HTML, потому что главный вопрос в некоторых случаях — не что удалять, а с какого символа по какой 😉

HTML-теги прописываются так: <script>…</script>. То есть ваша задача — найти слово script в треугольных скобках, а затем его же, но с символом /. Вот пример:

Итак, для примера возьмем мобильный лендинг интернет-магазина. 

Скачиваем его по инструкции выше и открываем в редакторе. 

Keywords

Первое — это ключевые слова. Их легко найти по тегу «keywords». Лучше удалить, а еще лучше — переписать под себя и свой оффер. В нашем случае можно поставить ключ «блинница купить». 

Важно не ставить в keywords стоп-слова: Facebook может прописать за это бан. 

JS-скрипты

Следующий пункт — чистка JS-скриптов. 

Мини-гайд: обычно JS-скрипты заключены в тег <script>, и строка заканчивается .js. Так можно найти все скрипты на лендинге через поиск. После первого <script> обычно следуют значения: 

• src — оно означает, что страница сначала должна прогрузить этот скрипт, а потом остальное содержимое; 
• defer — оно означает, что скрипт загружается в фоновом режиме, страница продолжает загружаться несмотря на него. 

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

Facebook/TikTok Pixel

Следующее — это пиксели. Пиксель Facebook или TikTok ищется по запросу Facebook/TikTok. Их мы тоже удаляем. 

Иногда в коде есть комментарий Facebook Pixel/TikTok Pixel — благодаря этому его проще найти. Если такого коммента нет, все равно вбиваем ключевое слово. В большинстве случаев найдется ссылка:

• ‘https://connect.facebook.net/en_US/fbevents.js‘ для FB;
• ‘https://analytics.tiktok.com/i18n/pixel/events.js‘ для TikTok.

Бывает, что сразу два пикселя идут подряд. Иногда это выглядит запутанно:

С Google Tag Manager та же ситуация: ищем слово «google» и удаляем код.

Лайфхак: обычно в пикселях после атрибута <script> стоит слово function и переменные в скобках, например: 

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’…

Ссылки

В некоторых скриптах вы встретите ссылки на WhatsApp. Когда пользователь нажимает на «Заказать»/«Оставить заявку»/подобную кнопку, его редиректит на переписку в WhatsApp якобы с консультантом, где клиент закрывается в продажу. 

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

<center>

<form method=»post» action=»form.php»>

     <div>

    <label> Nombre(Obligatorio): </label>

    <div class=»form_name»>

    <input name=»name» placeholder=»Nombre completo» required=»» type=»text»>

    </div>

    <div class=»order_form_pole»>

    <label> Número de teléfono(Obligatorio): </label>

    <div class=»form_phone»>

<input class=»only_number» name=»phone» placeholder=»Número de teléfono» required=»» type=»tel»>

</div>

</div>

<div style=»margin-bottom: 20px;»>

<button class=»js_submit button__text» type=»submit»>

<span>

                                         PEDIR </span>

                                     </button>

    </div>

</form>

В итоге получаем вот такую форму заказа, только без стрелок: этот элемент не входит в форму:

Однако кнопка некликабельна. Кликаем «Pedir» («Заказать») — ничего не происходит. Чтобы решить эту проблему, добавляем в код API. У каждой партнерки свой скрипт. 

Далее вводим http в поиск (Ctrl + F) и смотрим, что за ссылки стоят в коде. Например, вторая ссылка из скриншота вела на пользовательское соглашение — его можно удалить. 

Если нужно, удаляем политику конфиденциальности, условия возврата. Делаем это в границах атрибута <a> — </a>:

Что такое Ogp me в коде и стоит ли его убирать?

Ссылки ogp.me/ruogp.me — это разметка Open Graph, которая делает превью страницы привлекательным при репосте в соцсети. Open Graph используют Facebook*, Twitter, Вконтакте и другие соцсети. 

Например, без разметки Open Graph к записи не будет подтягиваться картинка или она будет отображена частично. Также вместо описания страницы при репосте без данной разметки пользователи увидят дескрипшен/ключи. 

Если вы не удалите скрипт, ничего не случится. Разве что ленд будет загружаться чуть быстрее. Если в скрипте есть разметка Open Graph для Twitter, а вы как раз собирались лить с этого источника, — оставляйте эту часть кода. Если она не нужна — удаляем с тега <meta property=”og: и до знака >.

Что такое Ladipage в коде и стоит ли его убирать?

Иногда в коде вы увидите ссылки на ladepage, ladisales и другие непонятные домены:

Они ведут на вьетнамские плагины для работы с лендами на WordPress:

• LadePage — трекер конверсий;
• LadiSales — плагин для создания формы заявки/онлайн-платежа;
• LadiLink — сокращатель ссылок.

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

Заменяем текст 

После этого наступает финальный этап работы: переписывание текста и замена изображений. 

Открываем лендинг в редакторе и меняем содержимое на свое усмотрение. Например, переведем контент на английский язык с этого ленда:

Для этого используем DeepL-переводчик.

Далее вставляем текст прямо в код. 

Вот что получилось: 

Заменяем изображения 

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

Для залитых на хостинг изображений указываем атрибуты и название картинки и ее формат:

<img src=”black hair.jpg”>

Атрибут alt прописывается по желанию: вместо картинки будет показываться alt-описание, если у пользователя будут проблемы с интернетом. К тому же благодаря атрибуту alt картинки индексируются поисковиками. 

Если картинка лежит в поддиректории images, прописываем немного измененный путь:

<img src=”images/black hair.jpg”>

Если картинка лежит на компьютере, прописываем путь к файлу. Для этого зажимаем Shift и кликаем ПКМ. Далее выбираем «Копировать как путь». После этого пишем file:\\ и сам путь картинки.

Получится следующее:

<img src=»file:\\F:\pics\photo_2022-05-22_13-03-26.jpg»>

Задавайте конкретный размер изображения с помощью атрибута style=”. После него прописываем слова width: ширина изображения px;  height: высота изображения px; Завершаем с помощью символов ”> Например:

<img src=»%D0%A1%D0%BF%D0%B0%D1%81%D0%B8%D0%B1%D0%BE!_files/tel.png» style=»display: block; margin: auto; width: 200px; height: 200px;”>

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

Давайте поменяем главный баннер на лендинге оффера на Тайвань Super-V Air Puri:

Как видите, заменить изображение несложно. Но что делать, если перед вами вот такая портянка? Тег img отыскивается без проблем, но человеку без знания кода не совсем понятно, что к чему.

Чтобы разобраться в вопросе, внимательно изучаем лендинг и пробегаем по коду глазами. Можете вставить свое изображение и посмотреть, что поменяется. Именно так мы и сделали и при открытии лендинга увидели следующее:

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

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

А если вы хотите уникализировать whitepage для Facebook*, посмотрите этот гайд на нашем YouTube-канале. Здесь мы пошагово показываем, что и как нужно делать:

На этом все. Подписывайтесь на нас в соцсетях, чтобы не пропустить выход нового материала:

• Telegram-канал
• YouTube
• Insta
• VK

*Запрещенные на территории РФ организации.