Всем привет! Любой соло-арбитражник, который не является программистом и вообще далёк от кода, сталкивается с проблемой редактирования своих сайтов: лендингов и прелендингов. Без специальных знаний разобраться даже с простым html бывает сложно. Когда нужно делать креативы, покупать аккаунты, следить за статистикой, делать заливы, то хлопоты с тех.частью становятся реальной проблемой. Есть два пути решения: либо нанимать программиста, чтобы он выполнял простенькие задачи, либо разбираться в логике и структуре HTML самостоятельно. Есть и третий вариант – обратиться за помощью к Webvork.

Чтобы адаптировать прокладку под свой оффер и ГЕО, не обязательно изучать HTML досконально, достаточно узнать азы, понять логику расположения нужных элементов в коде, научиться менять, добавлять и изменять нужные скрипты.

В этой статье мы разберём:

1) как заменить любой элемент на сайте: оффер, фон, текст и т.п., с сохранением стиля;

2) как вставить скрипт заказа и скрипт заказа с колесом, как их редактировать;

3) как настроить «спасибку» на событие лид;

4) как удалять, искать и изменять дефолтные и ненужные скрипты с сайта.

Уверяем вас, что информация будет свежая, полезная и максимально понятная. Надеемся, что будет интересно. Поехали!

Замена любых визуальных изображений на сайте

Обратите внимание, что на начальном этапе у вас может слетать вёрстка, происходит это из-за того, что вы что-то не туда вставили или удалили. Это нормальный процесс, особенно если вы не шарите в html, просто будьте внимательны и тренируйтесь.

Представим ситуацию, вы нашли хорошую прокладку, вам нужно изменить картинку оффера, текст или любой другой элемент. Давайте изменим оффер, его название и цену. Если актуальные цены не указаны в карточке оффера в кабинете Webvork, то зайдите на любой лендинг оффера и посмотрите цену там. Итак, у нас есть нужное изображение, цена и текст.

Откройте прокладку как сайт в браузере. Для этого нажмите ПКМ, далее “Посмотреть код элемента”. У вас откроется код, кликните на картинку, которую хотите заменить, и вы увидите её название.

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Скопируйте название изображения, потом измените его на любое, которое захотите. Делается это для того, чтобы не вносить никаких изменений в код. В папке с изображениями “img” (там, где все файлы сайта) удалите старую картинку и вставьте свою. Получается, что не внося изменения в код, мы изменили изображение.

Вот как это выглядит на картинках:

Выделено в коде, то что хотим изменить

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Название картинки “prod.png”. Это изображение лежит в общей папке, никаких подпапок нет, поэтому видим только название самого изображения.

Копируем, даем название нужному изображению и кидаем его в папку с сайтом.

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Теперь проверим, все ли на месте.

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Все на месте. Осталось конвертировать изображение в png формат, чтобы на картинке было изображение только оффера, без фона.

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

В поле <img alt=»» class=»header__prod-img» src=»название картинки.png»> добавьте ручное изменение размеров данного изображения. Строчка будет выглядеть вот так: <img alt=»» class=»header__prod-img» width=»300″ height=»200″ src=»prod.png»>

Мы изменили то, что выделено жирным цветом. Это ширина и высота картинки. Нужно “поиграть” с этими значениями, чтобы подобрать оптимальное.

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

Вставка формы/колеса (барабана) и ее редактирование

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

1. Проблема с версткой, неправильные размеры.

2. Колесо не работает.

3. Лид не отправляется на страницу «Спасибо».

Итак, вы нашли хорошую прокладку, она c кнопкой. Вы хотите сделать колесо (барабан) со скидками, на некоторых ГЕО конверсия с этим значительно больше. Или вы хотите убрать кнопку и сделать форму заказа без редиректа на лендинг.

Для этого откройте прокладку в браузере, нажмите на «ПКМ», далее «Посмотреть код элемента» и кнопку «Отправка заявки» (редиректа на лендинг). Появляется нужная строка, скопируйте её и перейдите в редактор кода.

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Удалите всю выделенную строчку и сохраните изменения. Затем откройте прокладку в браузере, кнопка должна быть удалена. Теперь на то место, где была кнопка, нужно вставить форму/колесо. Найдите любую форму заказа на лендингах и скопируйте код.

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

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

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

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

Сначала нужно удалить кнопку редиректа на лендинг и на её место вставить код колеса:

div class=»content__inner content__inner_wide clearfix»>

<div class=»article__text js-mediator-article»>                                                                                            <div class=»hidden-content»>

<div class=»spin-wrapper»>

<p>

Вперед!

</p>

<p>

Крути и получи свою скидку!

</p>

<div class=»wheel-wrarpper»>

<div class=»wheel»>

<img class=»wheel-img» src=»ruletka/prizewheel.png»>

<div class=»wheel-cursor»>

<img data-src=»ruletka/wheel-cursor.png»>

<span class=»cursor-text spin_active»> Крутить </span>

</div>

</div>

</div>

</div>

<div class=»order_block»>

<div class=»productsale»>

<div class=»prod_img_wrapper»>

<img data-src=»ruletka/image11.png»>

<p class=»priceс»>

<span class=»discountс»> Специальное предложение </span>

<br>

<span class=»js_old_price price_old»>

100$

</span>

<br>

<span class=»price_main»>

50$

</span>

</p>

</div>

<div class=»timer»>

Предложение ограничено, спешите заказать

<div id=»clock»>

</div>

</div>

</div>

<form action=»#» class=»order_form» method=»POST»>

<label class=»data_label» for=»name»>Напишите ваше имя</label>

<input class=»wheel_input» name=»name» placeholder=»Иванов Иван» type=»text»>

<label class=»data_label» for=»phone»>Напишите номер телефона</label>

<input class=»wheel_input only_number» name=»phone» placeholder=»+420 123456789″type=»text»>

<input type=»hidden» name=»landing» value=»cz5.recardio-pro.com»>

<button class=»main-link js_submit button__text val_ad» type=»submit»>Заказать со скидкой                                                50%!                                            </button>

<div class=»toform»>

</div>

</form>

<h2> Обратите внимание, что специальная скидка действует только до <span class=»red»>

<script type=»text/javascript»>

dtime_nums(-1, true)

</script>

</span></h2>

</div>

</div>

</div>

<div class=»spin-result-wrapper»>

<div class=»pop-up-window»>

<div class=»close-popup»></div>

<span class=»pop-up-heading»> Hi </span>

<p class=»pop-up-text»> Sale 50% </p>

<button class=»pop-up-button»> OK </button>

</div>

</div>

</div>

</div>

Код нашли на просторах интернета, если вам по каким-то причинам не понравится этот, то можете найти другой.

Вставили код. Далее нужно вставить скрипты и стили, а также папку с содержимым, без которого колесо не колесо (ссылка на папку будет ниже). Вставить скрипты и стили нужно после <head>.

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Скрипты, которые нужно вставить:

<script src=»ruletka/jquery-1.12.4.min.js»></script>

<script src=»ruletka/dr-dtime.js»></script>

<script src=»ruletka/main.js»></script>

<script src=»ruletka/jquery.countdown.min.js»></script>

<meta content=»IE=edge» http-equiv=»X-UA-Compatible»>

<meta content=»width=device-width, user-scalable=no» name=»viewport»>

<link href=»ruletka/index.css» media=»all» rel=»stylesheet» type=»text/css»>

Обратите внимание, первая строчка уже может быть прописана в код. Он должен быть в папке с сайтом, файл jquery-1.12.4.min.js. Если до него в коде уже прописан путь, то не добавляйте первую строчку скриптов.

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

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Любое другое название приведет к тому, что барабан работать не будет, ибо в коде фигурирует именно название «ruletka».

После того, как вставили все скрипты, код барабана и папку, все должно работать. Если что-то не работает, то скорее всего, некоторые <script></script> некорректно работают с новыми скриптами. Или где-то не дописан закрывающий </div>. Проверьте все данные.

В конечном итоге барабан выглядит вот так:

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Осталось только настроить форму и текст барабана под нужное ГЕО.

Удаление чужих скриптов со своей прокладки/лендинга

Если вы нашли чужие скрипты на своей прокладке или лендинге, то их лучше всего удалить, ибо некоторые из этих скриптов могут нарушать работу всего кода, что-то будет работать некорректно или вообще работать не будет. Также в общем коде index.html (.php) может быть код домонетизации. Его поставил владелец прокладки. Если вы зальетесь на это же ГЕО, куда и была залита эта прокладка/лендинг, то все ваши лиды будут перенаправлены на чужую домонетизацию.

Вот пример чужого скрипта. Он даёт возможность отслеживать аудиторию, если пиксель стоит как параметр URL:

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Такой нужно удалить от < до >

Вот пример скрипта домонетизации:

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Обычно скрипты домонетизации ставятся между <head> </head>, либо перед </body> в конце всего кода. Но лучше всего вручную просмотреть весь код, так будет надежнее.

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

Как установить событие лид на страницу благодарности (Facebook)

Бывают такие ситуации: вы скачали прокладку/лендинг, установили полноразмерный код пикселя на “Спасибку”, а лид в FB не отбивается. Тут два варианта:

1) нужно настроить пиксель на событие “лид” внутри FB;

2) нужно настроить пиксель как-то иначе.

Проблема в том, что FB в полноразмерном коде пикселя присвоил значение событию не лид, а PageView. Ничего не меняйте, добавьте в код после установки пикселя этот скрипт:           <script>

fbq(‘track’, ‘Lead’);

</script>

Выглядеть это будет вот так:

Подготовка любой прокладки под залив на ваш оффер. Применяем html для ваших целей

Можно попробовать вариант заменить PageView в коде на Lead, но не факт, что все будет работать корректно. При том, если вы ставите такой скрипт, то он раздает значение Lead всем скриптам пикселя на этой “Спасибке”.

Вывод

Вот и всё, мы рассказали почти все базовые действия, которые могут понадобиться вам при заливах. Теперь, когда вы найдёте классную прокладку или лендинг, у вас не возникнет трудностей с изменением текста, изображений, скриптов и прочего. Если вы изучили эту статью, то сможете без особых проблем адаптировать любую прокладку под свой оффер и лить в плюс. С вами был Webvork, до новых встреч!

Loading