При маскировке партнерской ссылки через фрейм сайт искажается на мобильных, что делать?

Приветствую!

Фреймовый сайт на своем домене – хороший способ маскировки партнерских ссылок.

• На него можно ставить счетчик Яндекс.Метрики и другие полезные скрипты.
• Он позволяет обходить блокировки партнерских ссылок соцсетями и почтовыми спам-фильтрами.
• Он исключает редирект, который тоже не везде пропускают.

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

Мой подписчик обратил внимание на этот нюанс и поспособствовал решению проблемы. А решение подсказал Александр, знакомый тех. специалист, по совместительству читатель моего блога. Спасибо ему за это!

Проблема в том, что когда маскируешь ссылку на партнерский сайт через код iframe, съезжает мобильная верстка. То есть, просто по партнерской ссылке сайт с адаптацией под мобильные нормально отображается и на компе, и на телефоне. А если маскируешь его через фрейм, то на телефоне он отображается коряво.

Вот несколько примеров:

Как должно быть:

Как получается через фрейм:

Чтобы решить проблему, Александр подсказал добавить в код фрейма следующую строку:

<meta name="viewport" content="width=device-width, initial-scale=1">

Добавляется она перед тегом <title> .

То есть, полный код фреймового сайта выглядит вот так:

Именно в таком виде он сохраняет мобильную верстку сайта.

Скачать этот шаблон фреймового сайта вы можете здесь.

Пример маскировки партнерской ссылки через фрейм и загрузка на хостинг

Для закрепления материала замаскируем партнерскую ссылку фреймом и загрузим на хостинг. Откройте шаблон с помощью блокнота Notepad++ (он бесплатный, можно скачать в интернете).

Чтобы открыть, нужно кликнуть по фрейму правой кнопкой мыши и в меню выбрать «Открыть в блокноте».

В шаблоне фрейма нужно заменить заголовок и партнерскую ссылку.

Затем сохранить отредактированный шаблон, как новый файл, чтобы исходный остался для маскировки других ссылок. Нажимаем «Файл» — «Сохранить как».

Сохраняем файл с названием index.html!

Далее создаем на рабочем столе папку (называем ее латиницей, коротко в соответствии с тем, что предлагаем по партнерской ссылке). В моем случае – название pdf30000. В эту папку левой кнопкой мыши перетягиваем наш фрейм – файл index.html.

Архивируем папку. Жмем по ней правой кнопкой мыши, затем «Добавить в архив», выбираем zip-архив.

После этого идем на хостинг (я использую Timeweb), в панели управления заходим в «Файловый менеджер», далее в корневую папку сайта, куда хотим загрузить фрейм.

Чтобы точно определить корневую папку, зайдите в раздел «Сайты» и посмотрите, к какой директории привязан ваш домен. Название директории – название корневой папки.

Открываем папку двойным кликом мыши, в ней папку public_html и туда перетаскиваем наш архив с компьютера.

Распаковываем и получаем в корневой директории сайта папку с фреймом.

Замаскированный через фрейм партнерский сайт открываем по адресу ваш домен/название папки. У меня это: innew.ru/pdf30000. При этом клик учитывается в партнерке, так как внутри фрейма «вшита» партнерская ссылка.

Обязательно проверьте !

И также проверьте, как фрейм отображается на мобильном телефоне!

К статье я подготовила наглядный видеоурок:

Еще полезное по теме:

Как поставить Метрику на фрейм.
Сайт для фреймов, редиректов и готовых комплектов.
Мой бесплатный курс «Продвижение партнерок по шагам»

ЕЩЁ ВАЖНАЯ ИНФОРМАЦИЯ ПО ФРЕЙМАМ: на некоторых лендингах не работает учёт в iFrame — причина в обновлениях браузеров, а именно в ограничении передачи Cookie между доменами. Поэтому прежде чем размещать рекламу — проверьте учет кликов, подписок через фрейм с ваших тестовых почтовых ящиков.

Друзья, всегда рада вашим вопросам и комментариям.

С уважением, Виктория Карпова