Я приветствую вас в этом видео, с вами Денис Герасимов, сайт https://rek9.ru, и в этой серии видео мы с вами будем создавать вот такую landing page — страницу приземления, которая уже готова к приему трафика, и она будет вам конвертировать звонки или заявки, возможно, и подписчиков – это уже ваше дело.
Создавать мы посадочную страницу будем с помощью конструктора. А если вы хотите узнать плюсы и минусы конструкторов лэндингов, то читайте здесь.
А в дальнейшем, когда мы пустим сюда трафик, после звонков и заявок вы сможете сконвертировать их в продажи, что принесет вам деньги.
Landing page. Первоначальные настройки
Итак, что у меня есть для этого. У меня есть дизайнерский landing page – вам его необязательно иметь, я просто могу брать отсюда какие-то изображения; есть основной сайт, откуда я также могу брать дополнительную информацию, например, номер телефона; и есть у меня группа ВКонтакте, где я могу взять отзывы туристов, и их уже внести в наш landing page, который мы будем создавать.
Также у меня есть домен, доступ к этому домену, и мы будем с вами создавать landing page вот такого вида, домен на поддомене. Хочу обратить ваше внимание, что домен вам необязательно иметь, потому что мы будем пользоваться конструктором сайтов, т.е. будем создавать этот landing page на конструкторе.
Я рекомендую вам под этим видео перейти по ссылке, и зарегистрироваться в этом конструкторе, на примере которого я буду вам показывать. Там бесплатный доступ на 14 дней, так что вы можете попрактиковаться в работе с этим конструктором, или повторять за мной то, что я делаю, — это поможет вам закрепить эти знания в дальнейшем, и вы уже сами легко все сделаете.
[button url=»https://rek9.ru/pllp» class=»btn btn-success» target=»_blank»]Зарегистрироваться в конструкторе[/button]
Еще раз повторяю, перейдите по ссылке под этим видео, зарегистрируйтесь в этом конструкторе и давайте приступим.
С чего стоит начать? Вы, скорее всего, здесь не увидите вот такую картину, просто у меня уже есть landing page, в нашем случае же надо нажать <Создать еще страницу>. Нажимаем, выходит подсказка: «Укажите внутреннее название страницы», т.е. это внутренне название нужно только вам, чтобы вы отличали страницы между собой, и еще эти страницы указываются в заявках, когда они приходят к вам на e-mail. Я назову Test2. Дальше нажимаем <Создать страницу>, и вы увидите, что у нас создалась страница вот с таким доменом, это поддомен на домене plp7.ru, если мы сейчас на него перейдем (я нажимаю клавишу <Сtrl> и кликаю по ссылке), то пишет «Ошибка 404. Страница не найдена или не запущена». Это нормально.
Настройка домена Landing Page
Мы пока приступим к настройкам. И в целом это видео будет посвящено настройкам. Дело в том, что я буду настраивать домен вида ***.ticotravel.ru — поддомен ticotravel.ru, поэтому буду использовать домен. Если у вас домена еще нет, то нужно его добавить. Добавляете, и нажимаете «Подключить домен», и после этого увидите уже вот такую картину.
Теперь мне нужно выбрать поддомен. Как я выбираю поддомен? Во-первых, должно быть понятно, что мы продаем, в данном случае я продаю Египет из Казани. И поэтому я иду в ya.ru и запрос спрашиваю «египет из казани». Далее смотрю рекламную выдачу и поисковую выдачу.
Меня в первую очередь интересуют ссылки, причем ссылки на латинице. В данном случае – Египет из Казани – pegaskazan.ru – и видим, что латинскими буквами написано egipet, вот это слово я и буду использовать в своем поддомене. Для чего я это сделаю? Для того, чтобы если я буду рекламироваться в Яндексе, а мы с вами будем рекламироваться в Яндексе, чтобы моя ссылка выделялась бы жирным шрифтом. Вот видите, здесь tripadvisor, у него жирным ничего не выделяется, при этом слова «египет» в заголовке и в теле объявления выделяются. А я создам такое объявление, ссылка в котором тоже будет выделяться.
Итак, берем слово «egipet», переходим обратно в мой конструктор сайтов, и будет у меня домен выглядеть как egipet.ticotravel.ru. Я вам рекомендую ознакомиться с подсказками, а я уже знаю, что нужно нажать Сохранить и перейти в регистратор доменов, где у меня зарегистрирован домен. В моем случае reg.ru, в вашем случае может быть другой регистратор, но вообще, если вам интересно, как я покупаю домены, на моем сайте есть отдельная статья об этом.
Итак, я перехожу в свой домен уже в регистраторе, и меня интересует Управление зоной. Если вы не знаете, как управлять зоной, и где вносить настройки, то обратитесь в службу поддержки вашего регистратора. Перед этим, конечно, прочитайте инструкцию на сайте конструктора, и напишите в поддержку, что мне нужно внести вот такие-то изменения в моем домене, и они вам помогут с этим вопросом.
Я уже знаю, что мне нужна запись CNAME, мне нужно взять этот поддомен egipet и внести изменения egipet.ticotravel.ru – искать на сайте вот с таким названием (users.platformalp.ru — скопировать с сайта конструктора – вставить в поле Canonical name).
[alert class=»alert green»]
значение: egipet.ticotravel.ru
тип: CNAME
хост: users.platformalp.ru
[/alert]
В регистраторе у reg.ru не воспримет мою запись в таком виде, необходимо в конце добавить точку. Тогда все будет нормально, не будет никаких ошибок. Нажимаем «Добавить запись CNAME», пишет «Операция успешно произведена! Изменения вступят в силу в течение 15 минут».
Мы сейчас скопируем наш поддомен, и его откроем в отдельной вкладке, посмотрим. «Определение хоста…» крутится пока, поддомен только создан, и возможно, его еще не найдет. Веб-страница недоступна. Через какое-то время мы должны увидеть такое же сообщение, как при открытии вот этого поддомена – «Страница пустая или не опубликована…». Давайте еще раз попробуем, и вот – все нормально, изменения произошли, т.е. мы уже можем работать дальше.
Общие параметры Landing page
Закрываем, это нам уже не нужно, все сохраняем еще раз, если мы это еще не сделали, и дальше переходим в Общие параметры. Здесь название, которое я внес на самом первом еще шаге.
Тестовый поддомен – вы можете не использовать такой же путь, как я, т.е. у меня уже есть купленный домен, и на нем поддомен. Вы можете это все сделать бесплатно, просто вот тут попробовать, например, слово egipet. Если он свободен, то у вас все будет работать корректно. Также выбираем язык, язык важен в формах и в надписях в таймере. Нажимаем Сохранить, изменения внесены. Т.е. я мог бы домен ticotravel и не использовать, видите, egipet.plp7.ru, и по нему уже рекламироваться. Но я пойду по своему пути.
Поисковая оптимизация Landing page
Дальше идем – раздел <Поисковая оптимизация>, и видим Заголовок страницы, МЕТА Описание и МЕТА Ключевые слова. Что такое Заголовок страницы? Сейчас обращаем внимание на вкладки в браузере, и видим: Управление зоной, Яндекс.Директ, TICO travel, египет из казани – это как раз и есть заголовок страницы, если мы внесем здесь какие-то изменения, то они будут видны только здесь. То, что мы напишем вот здесь (МЕТА) – это будет видно только роботам, поисковым роботам, которые анализируют страницы, людям эти два поля не видны. Для этого надо смотреть код страницы уже.
Итак, что внести в Заголовок страницы? У меня еще есть аккаунт в Яндексе, rek9.ru, и мне сейчас необходимо перейти, т.е. сначала залогиниться, войти в свой аккаунт в Яндексе и перейти в Яндекс.Директ. Нажимаю клавишу Разместить рекламу. Если вы уже размещались, то вы увидите здесь свои кампании.
В моем случае, я еще не создавал аккаунт, я это буду делать в следующих видео на моем сайте, так что обязательно смотрите, и переходим в инструмент Прогноз бюджета, сюда можно попасть, только когда вы залогинились в Яндексе. Я нажимаю клавишу CTRL и перехожу в прогноз бюджета. Напомню, наша задача – ввести что-то в Заголовок страницы.
Перейду в Оценку месячного бюджета, и мне надо выбрать регион. Я буду рекламироваться по Казани, потому что сайт моего заказчика находится в Казани, офис в Казани, и поэтому я буду искать потенциальных клиентов именно в Казани, чтобы потенциальный клиент мог спокойно прийти в офис, это цель. И далее введу ключевые фразы – это такие слова, которые может вводить потенциальный клиент, чтобы найти меня.
Вводим «египет из казани», нажимаем мимо куда-нибудь, и вы видите, в Подсказках крутиться начало. Если у вас нет подсказок, то вы на основании вашего товара вводите здесь все ключевые слова, по которым, как вы считаете, потенциальный клиент может вас найти. Чем больше – тем лучше. В моем случае я нажимаю «Все подходят», новые подсказки появляются, Все подходят, Все подходят, и Все подходят. Больше подсказок не найдено, нажимаю «Посчитать», далее я нажимаю Выбрать все ключевые слова, которые мне подходят, и нажимаю Отфильтровать по прогнозу показов. Т.е. эти данные как раз и есть данные wordstat, возможно вам, уже известно, что это такое. Он находится по ссылке Подбор слов, и туда можно попасть, не залогинившись.
И здесь Прогноз показов – это сколько прогноз показов по определенному ключевому слову в месяц. Подчеркну, это не в день, не в час, а именно в месяц. И я отфильтровал, и вижу, что «египет из казани» занимает первое место. То есть больше всего людей вводят именно это слово, и они подразумевают как раз заказ тура в Египет. И поэтому я выбираю именно это ключевое слово, которое на первом месте. Также можно было взять «туры в египет», но первый запрос характеризует именно мой регион – Казань, поэтому я его взял.
Переходим в наш конструктор, вводим Заголовок страницы, исправляем, чтобы все было красиво и корректно, как видите, «Египет из Казани» как раз введен в моем landing page.
МЕТА Описание не трогаю, нажимаю Сохранить.
Уведомления Landing page
Далее переходим в SMS/Email уведомления, здесь можете ввести ваш номер телефона и электронной почты, куда будут приходить заявки, у вас будет по умолчанию e-mail, который вы зарегистрировали.
Интеграции Landing page
Далее я перехожу в Интеграции, здесь находятся сервисы рассылок. Если вы собираетесь делать landing page для сбора подписчиков, своей подписной базы, то вы можете спокойно интегрировать здесь ваш сервис рассылок. Например, SmartResponder, нажимаете Включена, указываете API ключ и номер рассылки, все это есть в разделе Помощь. Как это сделать? Именно в SmartResponderе искать, не здесь, не в конструкторе, а в SmartResponderе в разделе Помощь, где взять API.
Favicon Landing page
Далее, переходим Иконка (фавикон). Что это такое? Обратите внимание на заголовок, а вот здесь перед ним маленькое изображение. Это и есть фавикон. Для чего он нужен? Во-первых, он виден во вкладках, в данном случае черепашка, т.е. оно привлекает дополнительное внимание, во-вторых, то, что в выдаче и в рекламе эта иконка будет показываться. Конечно, в рекламе это не обязательно, т.е. не факт, что робот отсканирует и будет показываться, но с большей вероятностью, эта иконка будет показываться. Дело в том, что у меня эта иконка есть – я выберу файл, выберу папку с дизайнерским лендингом, и видите, вот черепашка тут появилась.
Где брать иконку вам? Например, вы хотите у Яндекса взять иконку. Набираете yandex.ru/favicon.ico – или любой другой сайт, вот вы увидели эту иконочку и сохраняете ее Сохранить картинку как… , выбираете себе папочку, и себе сохраняете, только назвать ее надо favicon, чтобы проблем не возникло. И вот этот favicon.ico уже закачиваете себе в конструктор.
Если вы хотите какую-то оригинальную фавиконку, то есть такой сайт favicon.cc, и здесь уже вы можете нарисовать себе иконку. Если вы хотите посмотреть иконки, которые нарисовали до вас, и их себе использовать, то можете перейти в latest favicon, и вы увидите, какие иконочки нарисовали себе только что люди. Также здесь есть поиск по тегам, например, черные иконки – вот шахматная доска или еще что-то. Выбираете себе ее, кликаете по ней, и тут есть Скачать фавиконку. Себе скачиваете, и в свой конструктор загружаете. Вот так все просто и делается. Так, я здесь сохраняю, хорошо.
Метрика и скрипты Landing page
Дальше, Метрика и скрипты. Здесь добавляется номер счетчика Я.Метрики. Берется он из вашей Я.Метрики, просто номер берете, никакой код не нужен. Сейчас, в этом видео я этого делать не буду. Мы увидим в следующем видео, как я добавляю номер счетчика и устанавливаю цели на нашу страницу приземления. Цели нам понадобятся в будущем, для создания эффективной рекламной кампании. Также здесь можно добавить еще Гугл Аналитикс и другие скрипты. Все это делается в этом разделе.
Подтверждение прав Landing page
Дальше, Подтверждение прав. Мы тоже этот момент трогать не будем, это код верификации для Яндекс и Гугл Вебмастера. Это нужно уже, когда вы пришли в этот конструктор всерьез и надолго, и вы хотите, чтобы ваш landing page хорошо индексировался в поисковых системах, и вы могли отслеживать ключевые слова в этих системах, и делать на основе этого какие-то анализы и продвигать ваш сайт с помощью SEO.
Итак, мы здесь ничего не трогаем – в моем случае, вы же можете внести изменения. Я нажимаю Сохранить, все сохранено, и в следующем видео мы перейдем в редактор, т.е. уже будем собственно делать нашу страницу приземления.
Я уже жду вас в следующем видео!
Приветствую вас в этом видео, с вами Денис Герасимов, сайт https://rek9.ru, и мы с вами продолжаем создание landing page.
Напомню, что в прошлом видео мы прикрепляли поддомен и домен к нашему будущему landing page и разбирали основные настройки. В этом видео мы уже создадим каркас нашего будущего landing page.
Главная страница админки конструктора Landing page
Давайте быстренько пробежимся, что мы тут видим на главной странице.
Мы видим наши Активные страницы, также мы можем перейти в Остановленные, Архивные, Создать нашу страницу, перейти также в Статистику и посмотреть Заявки.
Также мы видим здесь, что мы можем перейти в основные Настройки, Скопировать, отправить В архив – удалить, и Старт А/В теста. А/В тест – это такая вещь, которая позволяет нам протестировать разные варианты landing page и определить, какой из них лучше конвертирует в заявки, звонки либо подписчиков. Собственно, Копия нужна как раз для того, чтобы скопировать наш вариант landing page, внести в него какие-то изменения, и уже запустить А/В тест.
Также мы видим кнопку на Статистику, она дублируется, и быстрый просмотр. Обратим внимание на верхний landing page, и мы видим, например, что у меня вчера было 30 посетителей, сегодня 26, и вчера и сегодня по одной заявке – тут сразу видно и конверсию нашей страницы приземления.
Также мы можем остановить страницу, или заново ее запустить, и давайте уже перейдем в Редактор, посмотрим, что мы увидим там.
Редактор конструктора Landing page
Нажимаем кнопку Редактор, и мы видим также А/В тестирование (что оно сейчас отключено), Мультилендинг – это такая вещь, которая позволяет на одной странице приземления, в зависимости от параметров определенных URL, которые мы можем передавать с помощью utm-меток, изменять информацию на уже самой странице приземления.
Давайте я покажу вам, как это делается. Например, параметр URL у нас utm_medium, и там, помимо cpc либо cpm, т.е. вариантов оплаты за клик или за тысячу показов, есть информация, что у нас кампания по Египту. И другая у нас есть кампания, например, по Турции. И если эта информация содержится в utm_medium, то мы можем уже изменить заголовок, например, «Египет из Казани», а если у нас содержится в utm_medium «turkey», то написать «Турция из Казани за такую-то цену». Т.е. очень удобно, можно на одной странице приземления разместить разную информацию. И при этом ее увидят только те, какой параметр у них есть в URL по приходу на страницу. В рамках данных видео мы не будем подробно разбирать мультилендинг, вы можете сами с ним разобраться, когда вы будете создавать свои собственные страницы приземления.
Также мы видим статус, что у нас Сохранено в черновике, кнопки Опубликовать (если мы ее нажмем, то эту страницу увидят все посетители этого домена), Закрыть (если мы нажмем, то вернемся на предыдущую страницу, где у нас размещены варианты страниц).
Дальше мы видим своего рода редактор, как в Word’е, только немного изменен: здесь текст, заголовки, просто картинку, картинку с текстом, преимущества, колонки разные, форму заявки, кнопку, HTML-код свой собственный вставить, и вставить видео с Youtube либо с Vimeo (только с двух сервисов тут пока есть), социальные кнопки мы можем тут вставить, и таймер обратного отсчета. Можем здесь вернуться назад либо пройти вперед.
Еще обращу ваше внимание, что здесь можно изменить стиль, т.е. изменить тип верстки нашего будущего landing page. Я выбираю Адаптивная вот с таким размером экрана. Это говорит о том, что на размер экрана меньше 768 пикселей мой сайт landing page будет сужаться, а при большом экране будет выглядеть как раз, как я его создаю. И здесь также можно изменить текст, т.е. шрифты, которые есть в системе, я, например, использую Roboto Slab, также цветовую схему можно использовать свою. Обращу ваше внимание, что цветовая схема меняется в зависимости от того, какой фон вы выберете для блока товара.
Создание макета Landing page
Давайте приступим уже, собственно, к созданию макета нашего будущего landing page.
Он начинается с шапки. Я выберу сразу Шапка+Оффер (вы можете отдельно взять Шапку, потом Оффер), и его вставлю. Кликнул, и обратите внимание, что он вам уже что-то напоминает. Вернемся наверх, и видите – почти то же самое. Вот так этот блок выглядит, и давайте я накидаю дальше, что у меня будет.
У меня дальше идут Цифры. После них блок с Ценами, только давайте я сделаю этот блок не такой (блок Таблица цен), а таблицу с товарами (блок Товары). Потому что я обратил внимание, что на этот блок цен люди приходят, кликают, и им что-то не нравится, они после этого уходят со страницы. Я это узнал с помощью Вебвизора. Мы поговорим в одном из следующих видео, что такое Вебвизор и как его установить. Я вместо блока с ценами поставлю список товаров и настрою А/В тестирование, и посмотрю, где у меня конверсия будет лучше, и этот вариант страницы оставлю для приема трафика.
Также обратите внимание, что здесь у каждого блока появляется меню (можно переместить вниз/вверх, удалить, либо копировать), панель с настройками (где мы можем поменять фон, отступы и меню, по меню мы тоже поговорим отдельно, потому что это нужная вещь, ее можно использовать для той же контекстной рекламы, для быстрых ссылок). Также блок можно переключить – второй из трех, третий из трех, и они меняются. Мне больше понравился первый вариант, он напоминает таблицу цен, и я сделаю так же — тут дешевый, тут средний товар, а тут – дорогой.
После списка товаров у меня идут Отзывы, при этом отзывы тоже есть разных вариантов, я выберу вот такой, второй из трех, потому что здесь есть поле Место работы, а я буду сюда вносить ссылку на профиль Вконтакте, чтобы вызвать больше доверия людей.
После отзывов идет Шаги, как мы работаем, при этом здесь всего три шага, чтобы изменить их на пять, я нажимаю желтую кнопочку с инструментом и ставлю цифру 5.
После Шагов идет Адрес (Карта). Чтобы изменить карту, нужно уменьшить и выбрать ваш город (Казань), потом увеличить, и поставить значок, где находится ваш офис. Вот здесь находится офис моего заказчика.
И после карты добавим Подвал. Вот так это выглядит, и давайте уже нажмем Опубликовать.
Сохранено и опубликовано – наш статус, и теперь перейдем на страницу нашего landing page – egipet.ticotravel.ru, и вы видите, как выглядит наша страница приземления.
Вот так быстро мы создали каркас нашего landing page, но конечно, он еще не готов. Нужно вносить изменения в текст, т.е. изменять контент, чем мы и займемся в следующем видео. И еще я вам покажу, как подобрать другое изображение на фон и его немного изменить в фотошопе, потому что изображение, которое мы найдем, скорее всего будет тяжелое.
Встретимся в следующем видео, где будем уже работать с изображениями.
Приветствую вас в этом видео, с вами Денис Герасимов, сайт https://rek9.ru, и мы с вами продолжаем создавать landing page.
Напомню, что в предыдущих видео мы прикрепляли домен к нашему конструктору landing page, разбирали основные настройки landing page и создали макет нашего будущего landing page.
В этом видео мы с вами будем работать с изображениями. Давайте приступим.
Изменяем логотип landing page
Для того, чтобы изменить логотип, либо какое-то изображение, которое вы видите, надо просто на него нажать. Давайте изменим наш логотип на какой-либо другой. Здесь есть категории, внутренние коллекции с изображениями, что очень удобно, и допустим, вам хочется что-нибудь из «Люди, медицина» – вы ставите череп и сохраняете, таким образом, у вас будет логотип с черепом.
Но у меня уже есть свой логотип, то есть у меня есть дизайнерский лендинг, есть сайт, с которого я могу взять логотип, и я этим моментом воспользуюсь. Логотип сохранить очень легко – ПКМ – Сохранить картинку как… и сохранить на компьютере. Давайте загрузим сюда изображение, оно у меня уже сохранено, открываю, и вы видите, что у меня загрузилось изображение с логотипом. Но есть у него такой недостаток – само изображение черное, а у меня текст весь белый.
Что надо сделать, чтобы изменить черный на белый? Для этого надо сам логотип открыть в Фотошопе, т.е. вам потребуется редактор Адобе Фотошоп, и выбрать инструмент Выделение, еще у него есть горячая клавиша (М), я выбираю прямоугольную область, прицеливаюсь и выделяю текст. Дело в том, что я могу и черепашке изменить цвет, но она при этом будет не очень хорошо смотреться. Я изменю только текст, и поэтому выбираю область, где у нас будет текст. Далее иду в Изображение – Коррекция – Цветовой тон/Насыщенность, или горячие клавиши (Ctrl)+(U). Пункт яркость перевожу в крайнее правое положение, и вы видите, что у нас надпись поменялась с черной на белую. Соглашаюсь с изменениями и сохраняю данное изображение под новым именем (Сохранить для Web). При этом выбираю формат PNG-24, чтобы у меня был фон прозрачный (если будет JPEG, то фон зальется белым). Называю его ticologowhite, сохранить.
Теперь я перехожу в наш конструктор, и загружу уже изображение с белым текстом, и вы видите, что оно уже достаточно симпатичное стало.
Меняем фоновое изображение в landing page
Что сделать, чтобы изменить фоновое изображение? Сделать это достаточно просто, выбираете в меню – настройки, и здесь также есть категории, нам нужна Природа, выбираем что-то связанное с морем, например, такое.
Кстати, обратите внимание, когда я изменил фон, у нас изменилась цветовая схема в этом блоке. Например, я выберу другое изображение, и вы видите, что фон стал желтым, имейте это в виду. И поэтому, когда будете загружать свое изображение, может так случиться, что фон формы не будет вам подходить, вернее, заливка и кнопка может не подходить к изображению. Кстати, поэтому я выбираю этот конструктор, потому что тут сразу происходит изменение цвета, что влияет на посетителей, и им уже достаточно комфортно находиться на странице приземления. Если вы будете landing page делать сами, например, вы знаете html и css, то у вас может быть просто не сочетание цветов, из-за этого на landing page вашим посетителям может быть не комфортно, и соответственно, падает конверсия, имейте это в виду.
Обработка фонового изображения landing page в photoshop
Предположим, меня не устраивает этот фон. Допустим, я не нашел здесь хорошего изображения моря. Что мне делать?
Мне нужно перейти на сам landing page, т.е. открыть его, и в браузере Chrome или Mozilla Firefox выбрать Просмотр кода элемента. Здесь мне нужно посмотреть, где здесь в стилях прописан фон. Я уже знаю, где он находится – он находится сразу после тега <body>. Вот этот блок находится в <div>’е, и здесь изображение на фоне – я нахожу его, и это фотоаппарат, это подтверждает мои догадки. Далее я открываю это изображение фоном в другой вкладке, и сохраняю к себе на компьютер, в ту же папку. Далее я перехожу в папку и открываю Свойства. Здесь меня интересует размер изображения, и сколько оно весит. Запоминаем цифры – 1600х1067, весит 228 КБ.
Далее иду в браузер, в гугл, поиск по картинкам. Давайте найдем изображение Египта. Идем в Инструменты поиска – Размер – Точный размер – 1600х1067, поиск. Меня интересуют нейтральные изображения (чтобы они не слишком привлекали к себе внимание), чтобы они совпадали с Египтом и вызывали ассоциации (чтобы человек понимал, что попал «туда»).
Зачем люди ездят в Египет? Во-первых, это Красное море, возможно их интересует дайвинг, возможно просто красивое море. Я думаю, люди реже смотрят пирамиды, поэтому исключаем этот вид. Хотя, это не факт, а моя гипотеза, это надо тестировать. И смотрим, что нам подходит. При этом я желаю, чтобы было, еще раз подчеркну, нейтральное изображение, то есть немного элементов на нем. Например, вот это. Кстати, обратите внимание, именно это изображение я выбрал для предыдущего лендинга. А мы давайте подберем какое-нибудь другое. Но если я переключаюсь, здесь не будет желаемый размер, имейте это в виду. Давайте уточним поиск «египет отель», предположим, нам нравится вот это изображение. Открываем его в полном размере. Т.к. если я сразу сохраню его себе, то будет маленькое изображение, несоответствие размеров. Поэтому открываем в полном размере, увеличиваем, Сохранить как…
Далее это изображение нужно открыть в Фотошопе. Потому что, скорее всего, оно весит намного больше, чем 228 КБ, поэтому нам надо его пересохранить в другом формате (Сохранить для Web). Действительно, оно весит 4,8 МБ. Если мы его сохраним в PNG, оно будет весить 1,9 МБ. Нам важно, чтобы изображение на фоне весило немного, чтобы лендинг не грузился долго. Поэтому надо его сохранить с ухудшением качества. Я выберу JPEG, и если я выберу среднее качество (30, при этом максимальное 100), то оно будет весить 193,3 КБ. Давайте посмотрим, сильно ли потеряло качество изображение – нет, поэтому я так и пересохраню.
Давайте перейдем в наш конструктор и загрузим изображение, измененное в Фотошопе, на фон. Единственный нюанс, перед этим нужно выбрать изображение, которое изменит фон заливки на более подходящий нам. В данном случае оранжевый цвет заливки подходит нам. Он контрастирует на фоне моря, и у нас на изображении есть цвета, близкие к этому цвету – соломенные зонтики, песок.
В этом видео все, в следующем видео мы уже будем работать с контентом: менять текст и изменять настройки формы.
Встретимся в следующем видео, в котором я вас уже жду.
Приветствую вас в этом видео, с вами Денис Герасимов, сайт https://rek9.ru, и мы с вами продолжаем создавать landing page на конструкторе сайтов с бесплатным тестовым периодом. За эти две недели вы можете понять, стоит ли вам покупать платный доступ.
Напомню, что в предыдущих видео мы прикрепляли домен к нашему конструктору landing page, создавали макет нашего будущего landing page и работали с изображениями, то есть вы уже знаете, как здесь менять изображение и создавать макет.
Редактируем контент Landing page
В этом видео мы уже поговорим про редактирование текстовой информации, и на что обратить внимание, когда вы будете писать текст, и немного затронем работу с формами. Давайте приступим.
Я буду копировать текст, чтобы его не набирать на клавиатуре, что сэкономит наше время. Отмечу, что в этих двух строчках нужно посетителю, который попал на ваш landing page, дать сразу понять, куда он попал.
В номере телефона — его можно сразу удалить, если у вас его нет, но желательно, чтобы он был – это и облегчит прохождение модерации, и немного увеличит конверсию. При этом отмечу, что лучше добавлять номер региональный, т.е. если вы из Казани, то с кодом города. Также я добавлю сюда поясняющую строчку, что агентство работает с 10 до 19, если вы хотите добавить сюда еще информацию, например, кнопку <Заказать звонок>, вы можете просто перетащить ее отсюда, и ее уже изменить под ваши требования.
Итак, шапку мы изменили, вы увидели, что это достаточно просто, теперь перейдем к заголовку.
Заголовок landing page
В заголовке страницы должно быть ваше УТП – уникальное торговое предложение, чем вы отличаетесь от других. Вообще, этот момент везде должен присутствовать, что вы, в принципе, такие же, как и все, но немножко лучше, что у вас лучше заказывать какой-то товар. Обратите внимание, я оставил первую букву и последнюю, чтобы у меня не изменился размер текста. Здесь я вставлю поясняющую информацию, при этом не буду много места занимать, поэтому хочу, чтобы размер был небольшой, при этом я уберу полужирный шрифт, и выделю только цену, скидки и подарочные сертификаты, потому что люди любят скидки и подарки.
Блок с оффером на landing page
Далее у нас идет блок с чек-боксом, и здесь можно добавить или удалить элементы. Задача моего landing page – чтобы человек пришел в офис, т.е. не какую-то бесплатную информацию он получил. Все это понятно, это рекомендуют делать, но я сконцентрирован на том, чтобы человек пришел в офис, и ему уже в офисе продали тур, потому что он с наибольшей вероятностью там продастся. По телефону очень трудно продать услугу, хотя, конечно, это можно сделать, исключения всегда бывают. Поэтому у меня весь landing page сконцентрирован на задаче, чтобы человек пришел в офис. Я готов даже больше платить за рекламу, за лида, но задача такая: приди в офис. Поэтому я пишу везде – Записаться на подбор тура в офис. Здесь у нас Имя, Электронная почта, и здесь у нас элемент – мы настроим, что мы хотим не электронную почту, а телефон, и пускай это у нас будет обязательное поле. Здесь у нас будет текстовое поле, и мы напишем Удобная вам дата для посещения офиса.
Потом, видите, я акцентирую внимание на том, что офис у турагентства в Парк Хаусе, в этом торговом комплексе присутствует АШАН, и люди, естественно, в этот Ашан приходят. Я на этом акцентирую внимание. Теперь давайте изменим изображение, вот, например, магазинчик, или даже вот такую корзинку. «Опытные менеджеры, наши менеджеры регулярно бывают в тех местах, куда мы отправляем туристов», т.е. вы должны на landing page общаться с вашими посетителями, говорить с ним с уважением, но при этом не забывать, что вы хотите им что-то продать. Поставим вот такую девушку. И еще у нас есть «Только проверенные туроператоры». Вы знаете, что сейчас ситуация не очень хорошая с туристическим рынком, некоторые туроператоры банкротятся, и некоторые авиакомпании тоже, так что этот момент может быть для кого-то важным. Итак, вот видите, мы уже изменили шапку с оффером, и сделали это очень быстро.
Блок с цифрами на landing page
Давайте приступим к блоку Индивидуальному подход, копируем, вставляем. И цифры тоже имеют значение для посетителей, потому что они убеждают их, что мы – реальная компания, т.е. турагентство реально существует, и у него можно заказывать. Люди не хотят заказывать у новых продавцов, они хотят заказывать у проверенных, чтобы не быть обманутым. Быть обманутым – это страх посетителей, поэтому с этим страхом надо работать. 17 надежных туроператоров, эти цифры реальные. А в этих цифрах, как вы понимаете, есть лукавство, но некоторые цифры — это правда. А сейчас мы немножко откатимся, потому что, вы видите, у меня размер цифр изменился, мне этого не нужно. Вот эта цифра нацелена на то, чтобы посетители покупали тур именно дорогой, 10-дневный, можете увеличить его до 14-ти дней, чтобы люди почувствовали свою ущербность, если они хотят, например, на 3 дня поехать, и заказывали у нас более дорогой тур на большее количество ночей. При этом не нужно противоречить, например, писать 10 дней – обычно туры рассчитываются по ночам, поэтому надо акцент делать на ночь.
Список товаров на landing page
Итак, Список товаров – тоже по-другому здесь этот блок (Цены на туры). И я акцентирую, что это цена на двух взрослых человек, т.е. доплат нет. Давайте продолжим редактировать этот landing page в следующем видео, в котором я вас уже жду.
Приветствую вас в этом видео, с вами Денис Герасимов, сайт https://rek9.ru, и мы с вами продолжаем создание landing page.
Блок товаров на Landing page
Напомню вам, что мы остановились на блоке с товарами и ценами, и в этом видео мы как раз продолжим редактирование этого блока. В этом блоке я обычно использую модель трех товаров, трех цен, она обычно выгляди вот так, где я посетителям рассказываю, что есть товары с дешевой ценой, и у него такие характеристики, товар со средней ценой и дорогой товар. И посетителю становится ясно, что дешевый товар имеет ряд недостатков по сравнению со средним и дорогим, и в итоге, скорее всего, заказывает средний товар, вот тут он как раз выделяется.
В этом же видео я вам расскажу про такой же блок, только с изображением товара. Я считаю, что он будет лучше продавать, но это, естественно, надо тестировать. В вашем случае товары будут свои, в моем – я продаю туры, и беру информацию о ценах в одном агрегаторе туров. Адрес у него вот такой – sletat.ru, здесь я выбираю город вылета – Казань, т.к. я продаю туры в Египет из Казани, выставляю все характеристики по умолчанию, цены на двух взрослых, от 6 ночей, все курорты, все отели, любая категория отеля, любая категория питания – и нажимаю Найти. Здесь происходит поиск, и на этом агрегаторе собирается информация со всех туроператоров. Итак, поиск завершен, и мне показывает, что найдено 760 туров, самый дешевый по цене 54 801 руб. – Показать – и самый дешевый мы как раз и возьмем, и эту цену укажем здесь. Далее мне просто надо внести информацию об отеле, скопировать его. Давайте перейдем в карточку тура, здесь возьму отель и внесу его, напишу, что это трехзвездочный отель в Хургаде. Далее мне нужно описание отеля, здесь в карточке тура есть, скопировать – вставить. Еще мне надо здесь указать, какое питание и сколько ночей. Здесь завтрак/ужин и иногда обед на выбор, и 6 ночей.
Работа с изображением товара на landing page
Еще мне здесь необходимо указать изображение отеля. С этого сайта я не буду брать, т.к. здесь указан бренд, поэтому я скопирую заново отель и перейду в гугл — поиск по картинкам и выберу какое-то изображение, сохраню его, назову, как мне удобно, и загрузим это изображение в конструктор. Видно, что изображение добавилось, но у него есть белые поля. Как поступить в таком случае? Я выбираю <Просмотреть код элемента>, и выделяю этот блок целиком, и мы видим, что тут размер появляется 347х150 пикселей. Поэтому я перехожу в папку, выделяю сохраненное изображение и открываю с помощью Адобе Фотошоп. Соглашаюсь со встроенным профилем, и выбираю инструмент Рамка (горячая клавиша <C>), и ввожу 347х150, и вы видите, что края немножко изменяются, и кадрируете по вкусу, я возьму пальму целиком. Файл – Сохранить для Веб – выбираю получше качество, JPEG и сохраняю. Еще в итоге мы сэкономим на размере изображения. Загрузим наше изображение в конструктор, и видим, что более симпатично стал наш товар выглядеть.
Товар со средней ценой на landing page
Теперь мы выберем тур подороже, перейдем в поиск, и давайте выберем от 10 ночей. Итак, у нас 57 тысяч тур. Давайте еще усложним поиск, либо выберем от 60 000. Т.е. лучше выбрать кратную цифру, если в первом товаре 54 цифра фигурирует, то лучше тут 60, а тут 70. И вот есть тур за 60 тыс. руб. Sand Beach 3* завтрак/ужин, неинтересно, я считаю, давайте хотя бы 4* выберем. Итак, 4* есть у нас Tropicana Tivoli, перейдем в карточку тура, скопирую цену и думаю, что нам все подходит, даже курорт другой. Цену изменим, название, курорт, описание отеля. В итоге чтобы красиво потом выглядело, надо будет отсюда некоторые слова удалить, чтобы масштабы одинаковые были. 10 ночей, завтрак/ужин. Надо добавить изображение, поиск по картинкам, давайте первую выберем. Я люблю, чтобы море на фоне было. Здесь тоже логотип есть, но он может быть, обрежется, когда мы обработаем в фотошопе. Назвать, сохранить, загрузим сюда, и обработаем сначала. Открыть с помощью Фотошоп, ок, рамка уже есть у нас, подтверждаем, сохраняем. Переходим снова в наш конструктор, выбираем. Видите, уже как стало симпатично.
Дорогой товар на landing page
И осталось нам уже тур подобрать за 70 000. Давайте возьмем только 5* и категория питания <Все включено>, и как раз за 70 000 тур Golden 5 Paradise Resort 5*, нас устраивает такой вариант. Копируем цену, вставляем название, информацию об отеле, о питании, количество ночей. И теперь нам нужно изображение. Идем в поиск по картинкам, вставляем, выбираем, сохраняем. И сразу ее открываем в фотошопе, соглашаемся, <сохранить для web>, но здесь у нас большое изображение, потому что мы только пропорции изменили, а надо изменить изображение 347х150, сохранить, возвращаемся в конструктор и вставляем. И видите, вот так симпатично теперь все выглядит.
Отзывы на landing page
Отзывы я возьму в группе, так как особенность группы в том, что у нее несколько страниц, нажму сочетание <Ctrl+F>, и наберу слово Египет, чтобы взять отзывы, например, от Альберта, который летал в Египет с детьми. Чем хорошо брать отзывы в группе – тем, что они короткие, не нужно особо думать. Вставлю вот сюда. При этом я могу сразу же здесь в группе и имя взять, и возраст, его ссылку на профиль, он возраст не указал, посмотрим по профилю, поставим 27 лет. Возьмем его изображение, сохраним и добавим сюда. Вот так добавляются отзывы. Остальные отзывы я добавлю без вас. Как мы работаем – тоже трогать не будем.
Адрес и телефон на landing page
Давайте вместе добавим <Наш адрес и информацию в Подвале>. Копирую, вставляю. Также копирую номер телефона и информацию, когда работаем. Здесь есть такой момент, когда вы делаете landing page для сбора подписчиков, вам необходимо указать политику конфиденциальности.
Как добавить политику конфиденциальности на landing page?
Как в этом конструкторе лендингов указать ссылку на Политику конфиденциальности? Делается это следующим образом: берете кнопку, тянете ее, куда хотите установить, например, сюда, далее переходите в настройки, Вид, делаете Положение – Слева, Стиль – Ссылка, Действие – Показать окно без формы. Теперь, когда нажимаете на ссылку, у вас всплывает вот такое окно. И сюда уже можно добавить Политику конфиденциальности, в Заголовке назовете ее, а сюда вставите текст Политики. Это все хорошо работает, естественно, «Отправить заявку!» необходимо тоже изменить на Политику конфиденциальности. Так это все делается.
Редактирование формы landing page
Посмотрим сейчас формы: Заказ обратного звонка, Имя, Номер телефона, Время для звонка, все понятно. И здесь при выборе товара «Карточка товара» нужно изменить «Заявка на бронирование тура», и остальная информация нас устраивает. Все берется отсюда, единственное, электронная почта нам не нужна, нам нужен номер телефона.
На этом это видео заканчивается, и в следующем, заключительном, видео мы уже настроим метрику на наш сайт и установим цели.
Встретимся в следующем видео, в котором я вас уже жду.
Приветствую вас в этом видео, с вами Денис Герасимов, сайт https://rek9.ru, и мы с вами создаём landing page.
Напомню, что в предыдущих видео мы привязывали домен к нашему конструктору landing page, создавали макет landing page, обрабатывали изображение в фотошопе, добавляли текстовую информацию на наш landing page, добавляли товары, и перед вами заключительное видео, в котором мы добавим счетчик Яндекс.Метрики и добавим цели на наш landing page.
Добавляем Метрику и цели на наш landing page
Я без вас уже здесь добавил Отзывы, «Как мы работаем» – изменил изображения и текст, также убрал «Политику конфиденциальности» – здесь ссылка была. И еще вот здесь стер слово «Ваша» и опубликовал. Для этого надо нажать кнопку «Опубликовать», и вы увидите статус «Сохранено и опубликовано», а до этого было написано «Сохранено в Черновике», и вот так наш landing page уже видят все посетители этой страницы. Видите, очень даже симпатично, и она готова для приема трафика. Только есть один нюанс – необходимо добавить сюда счетчик Яндекс.Метрики.
Конечно, конструктор позволяет нам отслеживать конверсию и статистику по посещениям, но нам необходимо добавить внешнюю статистику, такую как Яндекс.Метрика, для того, чтобы в будущем настраивать на наш landing page Я.Директ, и настроить цели, чтобы мы могли отслеживать эффективность ключевых слов и объявлений, которые мы настроим в будущем в Яндекс.Директ.
Настройка Яндекс.Метрики для landing page
Давайте приступим к настройке Метрики, для этого надо перейти в Метрику, залогиниться, и если у вас есть счетчики, то вы уже увидите ряд сайтов. У меня сейчас счетчиков нет, поэтому я его добавлю, назову его «Египет Тикотревел» и добавлю сайт. Если у нас несколько сайтов, как в моем случае, то можно добавить и зеркала. Но я делать этого сейчас не буду, и обязательно ставим галочку «Уведомлять меня о проблемах в работе сайта». Если наш сайт станет недоступен, то придет уведомление на электронную почту, и мы сможем что-то предпринять. Например, у нас куплена реклама где-нибудь в тизерных либо баннерных сетях, и чтобы не тратить бюджет понапрасну, мы можем отключить, когда наш сайт недоступен, поэтому необходимо знать, когда сайт доступен, а когда – нет. Выставляем время, которое вам требуется, принимаем условия соглашения, нажимаем «Продолжить», и далее выбираем галочку «Вебвизор» и на этом все. Я убираю обычно «Информер». И нажимаем Сохранить.
И мы получили в итоге код нашего счетчика. Его копируем, идем в конструктор, идем в настройки нашего landing page – «Метрика и скрипты» – добавляем сюда номер нашего счетчика и сохраняем. Вот так добавляется Я.Метрика, как видите, все легко и просто.
Добавляем цели на landing page
Теперь наша задача – добавить цели. Цели для того, чтобы отслеживать эффективность рекламной кампании. Для этого надо перейти снова в редактор, и мы добавим цели на отправку вот этой формы, на клик кнопки «Купить». Как вы знаете, после нажатия этой кнопки всплывает такое окно, и мы еще добавим цель «Отправить заявку». И добавим цель на «Заказать звонок». Таким образом, мы сможем отслеживать, какие посетители нажимали на эти кнопки. В итоге у нас получается 4 цели. Давайте их создадим.
Цель на событие в Я.Метрике для отправки формы в landing page
Перейдем в Я.Метрику, в раздел Цели, и нажмем «Добавить цель». Цель первая будет у нас «Отправка заявки». И дальше мы переходим в Событие и пишем любой уникальный текст, который вам придет в голову. Я обычно использую латинские буквы, и пишу «formmain», это означает Главная форма. Нажимаю «Добавить», теперь перехожу обратно в конструктор landing page и выбираю кнопку «Отправить заявку», нажимаю значок гаечного ключа, и тут есть вкладка Цели. Туда перехожу, «Цель для Я.Метрики», и туда вставляю только что скопированный идентификатор.
Цель для кнопки «Купить»
Теперь мы создадим цель на нажатие кнопки «Купить», так и назовем ее «clickbutton». Копирую эту цель, добавляю и идем уже в Карточку товаров. Тут около кнопки Купить при наводе мышки появляется значок гаечного ключа, выбираю цели, «Цель для Я.Метрики», вставляю.
Цель для всплывающей формы
Создаем цель для нашей формы, которая всплывает при нажатии на кнопку «Купить». «Отправка заявки на бронирование», Событие – formz, копирую, и навожу на кнопку «Отправить заявку», перехожу во вкладку Цели, вставляю только что скопированный идентификатор цели. И теперь нам осталось добавить последнюю цель, это «Заказать звонок».
Цель для кнопки «Заказать звонок»
Перехожу в Я.Метрику, «Добавить цель», «Заказать звонок», Событие – formzv, при этом я не буду уже добавлять дополнительную цель, просто мне достаточно узнать, кто из людей хотел заказать себе звонок. Т.е при нажатии на «Заказать звонок» можно еще добавить цель на отправку формы, но я этого делать не буду, просто ограничусь четырьмя целями.
Заключение
При этом у вас возникнет вопрос, например, мы же добавили цель на одну кнопку из трех, а на остальные не добавили цель? Вот давайте попробуем, посмотрим, что у нас здесь есть, на вторую кнопку нажмем и видим, что цель для Я.Метрики здесь уже установлена. Т.е. добавив в одну кнопку, цель продублируется во все кнопки. Также если мы нажмем на кнопку <Купить> и посмотрим «Отправить заявку!», то здесь тоже цель проставлена. Все, теперь нажимаем «Опубликовать», обновим нашу страничку, перейдем в Я.Метрику все сохраним, и перейдем в Счетчики. И мы увидим, что через некоторое время здесь появятся данные. Код счетчика корректно установлен, и если мы несколько раз пообновляем страницу, то уже счетчик покажет наши посещения.
Вот, собственно, и все, что я хотел вам рассказать. Спасибо вам за просмотр этого видео!
Если вам все понравилось, то ставьте лайки, добавляйтесь ко мне в подписчики, и если у вас возникли какие-то вопросы, то оставляйте свои вопросы в комментариях к этим статьям или видео. Буду рад на них ответить.
Всего доброго, увидимся в следующих видео!
Все видео в одном плейлисте