Итак, как сделать iframe и отобразить чужой сайт на своем домене? Рано или поздно, специалист по интернет рекламе может столкнуться с необходимостью настроить отображение чужого сайта на своем домене.

Это бывает нужно, например, чтобы установить свой счетчик Яндекс Метрики или Google Analytics, либо код ретаргетинга ВК или FB.

 


Тег <iframe>

Iframe – это, если говорить простыми словами, встроенная рамка (область), содержащая контент с внешних источников (сайтов).

Например, чтобы отобразить на своем домене мой сайт, достаточно прописать в index.php:

<iframe src="https://kelansky.ru"></iframe>

Как сделать iframe на чужой сайт

“Установить” чужой сайт на свой домен через iframe крайне просто.

Достаточно создать файл index.php, прописать в нём следующий код iframe и разместить на своем хостинге в нужном домене:

<html>
<body style="margin:0px; padding: 0px;">
<div class="myframe">
<iframe src="https://kelansky.ru/?utm_source=<?php echo $_GET['utm_source'];?>&utm_medium=<?php echo $_GET['utm_medium'];?>&utm_campaign=<?php echo $_GET['utm_campaign'];?>&utm_term=<?php echo $_GET['utm_term'];?>&utm_content=<?php echo $_GET['utm_content'];?>" frameborder="0" scrolling="yes" height="100%" width="100%"></iframe>
</div>
<!-- Yandex.Metrika counter -->
Здесь можно указать счетчик Яндекс Метрики.
<!-- /Yandex.Metrika counter -->
</body>
</html>

В коде заменяем https://kelansky.ru на свой сайт.

Параметры UTM-меток указываем при необходимости. Данные параметры позволят передавать в метрику исходного (чужого сайта) ваши UTM-метки. Это бывает нужно чтобы отслеживать источники конверсий в личном кабинете партнерки.

Например, при использовании данных параметров в Яндекс Директ:

utm_source=<?php echo $_GET['utm_source'];?>- передает источник трафика

utm_medium=<?php echo $_GET['utm_medium'];?> - передает тип трафика (cpc, cpm)

utm_campaign=<?php echo $_GET['utm_campaign'];?> - передает название/номер рекламной кампании

utm_term=<?php echo $_GET['utm_term'];?> - передает ключевое слово/фразу

utm_content=<?php echo $_GET['utm_content'];?> - передает номер объявления

 


Убираем рамку iframe

Чтобы при вставке тега iframe на сайт у нас не было прокрутки или у iframe не отображалась рамка, нужно добавить в тег iframe атрибуты:

frameborder="0" scrolling="yes" height="100%" width="100%"

где:

frameborder – ширина рамки iframe

scrolling – включена отключена прокрутка iframe

height – высота iframe (в нашем случае высота на 100% экрана, т.к. мы отображаем весь сайт)

width – ширина iframe (аналогично 100%)

 


Отслеживание событий через <iframe>

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

А вот тут не всё так просто. Мы не можем только со своей стороны настроить отслеживание событий, т.к. сайт чужой, и соответственно, доступа к его коду у нас нет.

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

 

Для этого нам нужно будет настроить в Яндекс Метрике (если говорить о Метрике) в качестве цели JavaScript событие и в коде сайта в теге кнопки прописать:

onsubmit="yaCounterХХХХХХХХ.reachGoal('SOBYTIE'); return true;"

где yaCounterХХХХХХХХ – номер счетчика Яндекс Метрики (указываем номер вместо ХХХ),

а SOBYTIE – идентификатор события, которое мы указали в Метрике в качестве цели.

Как сделать iframe

После этого, все нажатия на кнопку для вашей Яндекс Метрики должны начать работать.

Более подробно узнать о настройке целей в Яндекс Метрике можно здесь.


Как видите, использовать iframe достаточно просто.

 

Если остались какие-то вопросы – пишите их в комментариях, либо лично мне.

Не получается установить iframe? – тоже пишите, помогу.

 

Всем успехов!