Iframes как найти на сайте - Avtoru.top - решение различных проблем

Время на прочтение
11 мин

Количество просмотров 167K

Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.

Хотя все современные браузеры поддерживают данный тег, многие разработчики пишут бесконечные статьи, не советуя им пользоваться. Я считаю, что плохая репутация, которая сформировалась, около данного тега не должна мешать вам использовать его. У данного тега есть много хороших примеров применения. Кроме того, iframe не так сложно защитить, поэтому вам не придется беспокоиться о заражении компьютера вашего пользователя.

Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.

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

Что такое iframe и зачем мы его используем?

Разработчики в основном используют тег iframe для встраивания другого HTML-документа в текущий.

Скорее всего, вы пересекались с ним, когда вам нужно было добавить сторонний виджет (например, знаменитую кнопку «Нравится» на Facebook), видео с YouTube, или рекламный раздел на вашем веб-сайте.

Например, приведенный ниже код будет отображать квадрат размером 500px с главной страницей Google:

<iframe src="https://www.google.com/" height="500px" width="500px"></iframe>

Вот еще один пример, в котором мы показываем кнопку, чтобы твитнуть вашу веб-страницу в Twitter:

<iframe src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"></iframe>

Когда вы думаете о iframe, вы должны иметь в виду, что он позволяет вам встраивать независимый HTML-документ с его контекстом просмотра.Таким образом, он будет изолирован от JavaScript и CSS родительского элемента. Это одна из веских причин использования iframe — обеспечить определенную степень разделения между вашим приложением и содержимым iframe.

Тем не менее, как вы увидите дальше в этом руководстве, разделение не так что б идеально.Iframe все еще может вести себя раздражающим или злонамеренным образом.
Как пример — вызывать всплывающее окно или автоматически воспроизводить видео.

(*Привет онлайн-казино, и сайтам любителей клубники )

Чтобы проиллюстрировать, насколько удобна эта изоляция от JavaScript и CSS, давайте взглянем на эти две ситуации:

1)В приложении пользователь может создавать электронные письма и сохранять их в качестве шаблонов. На определенной странице мне нужно было перечислить их, чтобы он мог просмотреть и выбрать одно из них. Но чтобы не допустить влияния CSS-кода текущего сайта на стиль этих шаблонов, я поняла, что необходимо использование iframe с атрибутом srcdoc . Это представилось самым чистым решением.

<iframe srcdoc="<html><body>The content you see here will never be affected by the CSS of its parent container. It supposed to be rendered in black on a white background.</body></html>"></iframe>

*Примечание srcdoc

Позволяет установить содержимое фрейма непосредственно в атрибуте. Значение должно иметь корректный синтаксис HTML, по желанию содержать <!DOCTYPE> и <html> , а также любое количество пробелов, переносов строк, комментариев и других элементов. При одновременном использовании атрибутов src и srcdoc, атрибут src игнорируется .

2)Другая ситуация, когда iframe спасли мне жизнь, возникла, когда пришлось создавать WYSIWYG-редактор для клиента. Проблема была связана с тем, что при помощи этих редакторов вы должны найти способ сохранить возможность производить фокус и выделение, когда пользователь нажимает на любые кнопки в интерфейсе.

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

Атрибуты, которые стоило бы знать работая с iframe

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

<iframe

  src="https://google.com/"    <!-- Устанавливает адрес документа для встраивания --> 

  srcdoc="<p>Some html</p>"    <!-- Устанавливает HTML-содержимое страницы для отображения --> 

  height="100px"               <!-- Устанавливает высоту iframe в пикселях -->

  width="100px"                <!-- Устанавливает ширину iframe в пикселях -->

  name="my-iframe"          <!-- Устанавливает имя iframe (в основном используется для ссылки на элемент в JavaScript -->

  allow="fullscreen"           <!-- Устанавливает политику объектов для iframe.-->

  referrerpolicy="no-referrer" <!-- Настройте реферер для отправки при получении содержимого iframe -->

  sandbox="allow-same-origin"  <!-- Устанавливает ограничения iframe (подробнее об этом ниже) -->
></iframe>

Вы можете найти больше, чем перечисленные выше, но имейте в виду, что они больше не поддерживаются в HTML5: align, frameborder, longdesc, marginheight, marginwidth и scrolling…

*Примечание. По умолчанию элемент iframe имеет рамку вокруг него. Чтобы удалить его, вы можете использовать атрибут style, чтобы установить свойство CSS border в none.

<iframe src="https://logrocket.com/" style="border: none;"></iframe>

iframe события и общение

Загрузка и ошибки

Поскольку iframe является документом, вы можете использовать большинство глобальных обработчиков событий. Когда вы запускаете iframe, есть пара событий, которые могут пригодятся для улучшения работы. Например, отображение счетчика или отдельное сообщение, чтобы помочь пользователю:

load event — cобытие загрузки. Оно запускается, когда iframe полностью загружен. Другими словами, все статические ресурсы были загружены, и все элементы в дереве DOM вызвали событие load.

Событие ошибки — error event которое вызывается при сбое загрузки.

Вы можете прослушивать их с помощью атрибутов onload и onerror соответственно:

<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>

Если хотите, то вы можете добавить слушателей в свой iframe программно.

// Для нового iframe
const iframe = document.createElement("iframe");

iframe.onload = function() {
  console.log("iframe загрузился");
};
iframe.onerror = function() {
  console.log("Что-то пошло не так, давай, ищи ошибку!");
};

iframe.src = "https://logrocket.com/";
document.body.appendChild(iframe);

// Для существующего iframe
const iframe = document.querySelector('.my-iframe');

iframe.onload = function() {
  console.log("iframe загрузился");
}
iframe.onerror = function() {
  console.log("Что-то пошло не так, давай, ищи ошибку!");
}

Общение с фреймами

Довольно легко отправлять сообщения между родителем и iframe. Вы должны использовать функцию postMessage, которая описана в MDN здесь.

От родителя к фрейму

Отправьте сообщение от родительского элемента:

const myiframe = document.getElementById('myIframe');

myIframe.contentWindow.postMessage('message', '*');

И послушайте его в iframe:

window.onmessage = function(event){
    if (event.data == 'message') {
        console('Message received!');
    }
};

От iframe к родителю

Отправьте сообщение из iframe:

window.top.postMessage('reply', '*')

И прослушай это у родителя:

window.onmessage = function(event){
    if (event.data == 'reply') {
        console('Reply received!');
    }
};

Примечание: имейте в виду, что вы можете оказаться в некоторых хитрых ситуациях, когда вам нужно что-то отладить, так как сообщения запускаются и забываются (fire-and-forget) (иначе говоря. — нет реальной обработки ошибок).

Безопасность

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

Таким образом, вы повышаете риск потенциальной уязвимости в вашем приложении или просто сталкиваетесь с плохим пользовательским интерфейсом (например, раздражающим автоматическим воспроизведением видео).

К счастью, вы можете занести в черный список или белый список конкретные функции.

Вы должны использовать sandbox (песочницу) и allow(допустимые) атрибуты.

! Помните, хорошее эмпирическое правило — всегда предоставлять минимальный уровень возможностей, необходимый ресурсу для его работы. Эксперты по безопасности называют эту концепцию «принципом наименьших привилегий».

Атрибут sandbox

Вот полный список флагов песочницы и их назначение:

Вы несете ответственность, какие привилегии вы можете предоставить каждому iframe.

Например, если вашему iframe нужно только отправить формы и открыть новые модальные окна, вот как вы настроите атрибут песочницы:

<iframe sandbox="allow-forms allow-modals" src="https://www.something.com/"></iframe>

В случае, когда атрибут песочницы настроен, а одна функция не работает правильно в ресурсе, это может быть связано с отсутствием определенного флага.
Убедитесь, что вы знаете о них больше, чтобы отладить вещи быстро.
Кроме того, имейте в виду, что использование пустого атрибута «песочница» полностью создаст «песочницу» для iframe.

Это означает, что JavaScript внутри iframe не будет выполняться, а все перечисленные выше привилегии будут ограничены (*например, создание новых окон или загрузка плагина).

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

<iframe sandbox="allow-forms allow-modals" src="https://www.something.com/"></iframe>

Примечание. Атрибут песочницы не поддерживается в Internet Explorer 9 и более ранних версиях.

Атрибут allow

Этот атрибут allow в настоящее время является экспериментальным и поддерживается только браузерами на основе Chromium. Это позволяет вам разрешить определенные функции белого списка, такие как доступ iframe к акселерометру, информации об аккумуляторе или камере.

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

Я суммировала самые популярные в таблице ниже:

Что нужно знать о фреймах

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

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

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

<iframe>
  <p>Твой браузер устарел для отображения элемента iframe</p>
</iframe>

Как вы можете сделать так, чтобы iframe был частью родительского документа (т.е. без границ и полос прокрутки)?

Для этой цели был введен бесшовный атрибут seamless. Он все еще экспериментален и плохо поддерживается в браузерах (это понимают только Chromium).

*Примечание Он также не является частью спецификации W3C HTML5 на момент написания этой статьи. Ознакомиться тут

<iframe seamless src="https://logrocket.com/"></iframe>

Могут ли iframes повлиять на SEO моего сайта?

Я мало что знала об этом, поэтому мне пришлось немного покопаться. Есть много спекуляций вокруг этой темы.

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

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

Таким образом, лучше всего предположить, что контент, отображаемый с помощью iframes, может быть не проиндексирован или недоступен для отображения в результатах поиска Google. Обходным путем может быть предоставление дополнительных текстовых ссылок на контент, который они отображают, чтобы робот Googlebot мог сканировать и индексировать этот контент.

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

Могут ли фреймы повлиять на скорость загрузки моего сайта?

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

Чтобы избежать того, что ваши фреймы замедляют работу ваших страниц, хорошим способом является их ленивая загрузка (т.е. загрузка их только тогда, когда они необходимы, например, когда пользователь прокручивает рядом с ними).Этого легко добиться, просто добавив в тег атрибут loading = «lazy».

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

<iframe src = "https://logrocket.com/" loading = "lazy"> </ iframe>

Примечание. Атрибут loading = «lazy» также работает с тегом img, если вы еще этого не знали.

Как я могу сделать iframe отзывчивым?

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

Мы могли бы посвятить целое руководство относительно множества способов сделать ваш iframe отзывчивым. Вместо этого я просто сошлюсь на две отличные статьи:

Эта первая статья (возможно, с самым простым решением) покажет вам, как этого добиться, обернув свой iframe в другой элемент HTML и добавив в него несколько свойств CSS.
Эта вторая статья покажет вам, как сделать iframe отзывчивым, имея дело с соотношениями сторон.
Существует также библиотека Iframe Resizer, но имейте в виду, что она поставляется с множеством дополнительных функций, которые вам могут и не понадобиться, и просто раздуют ваш код.

Примечание. Если вы используете библиотеку начальной загрузки в своем проекте, есть embed-responsive и встроенные embed-responsive-16by9, которые вы можете использовать прямо из коробки, чтобы адаптировать свои фреймы.

<div class="embed-responsive embed-responsive-16by9">
  <iframe src="https://logrocket.com/" loading="lazy"></iframe>
</div>

Как предотвратить появление белой вспышки во время загрузки iframe

Да, друзья мои, для этого есть решение. В этой статье Крис Койер делится небольшим фрагментом, который скрывает все iframes на странице с помощью некоторого CSS-кода и удаляет его до тех пор, пока окно не будет загружено, а затем сделает их видимыми.

Как перезагрузить содержимое iframe

Легче лёгкого! Поскольку вы можете получить доступ к элементу окна iframe с помощью contentWindow, вы должны сделать это:

// Get the iframe
const iframe = document.getElementById('myIframe');  
// Reload the iframe
iframe.contentWindow.location.reload();

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

Если у вас есть что добавить в эту статью, вы можете связаться со мной в комментариях ниже или просто пинговать меня в Twitter @RifkiNada

Сделаем web лучше.

Источник

Скрытый фрейм на сайте можно долгое время не замечать. Как удалить iframe. Эффективный поиск скрытых ссылок с помощью программ.

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

Как правило, скрытые ссылки имеют стиль display:none.

Еще может быть, как в статье «На сайте обнаружены iframe вставки из браузера?»

Как найти скрытый iframe display

Самый простой шаг – это посмотреть исходный HTML код страницы в браузере. Обратите внимание конец кода. Нет ли там странных стилей и ссылок, которые вы не ставили.
В браузере есть веб-инспектор, проверьте и через него свой сайт. В опере идем «Инструменты разработчика» — «Веб-инспектор».
Еще один способ обнаружения скрытого iframe – это сделать скриншот в любом сервисе, но не ограничивая размеры, а полностью на всю высоту. Если у вас есть это окно в самом низу, то вы сразу увидите под футером бесконечную белую простынь.
Посмотрите сайт в разных браузерах. Есть еще плагины для браузеров, которые тоже облегчают поиск. Например, Firebug для браузера Firefox.

Я обнаружила проблему благодаря пунктам 3 и 4, и провела анализ по 1 и 2 шагу.

Главный вопрос – это понять, откуда появляется эта страница во фрейме.

Если вы используете бесплатные темы, то морально готовы к разным сюрпризам. Но я скачала тему с официального сайта Drupal. Тема arctica, на основе которой создаются собственные. Это адаптивный шаблон, прекрасно смотрится на устройствах с различным расширением. Она проходит тест на скорость при проверке в гугле на «проверку удобства просмотра на мобильных устройствах».

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

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

Второе, проверить все файлы темы в любимом блокноте, если ничего не найдено.

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

Из софта: попробуйте поискать с помощью «NoHiddenLinks».

Как убрать скрытые фреймы с Total Commander

Очень эффективно использовать файловый менеджер, например, Total Commander.

Скачайте все файлы сайта к себе на компьютер.

Идем в меню «Команды» — «Поиск файлов». Укажите путь к папке вашего сайта или только темы и добавьте слова, по которым нужно произвести поиск.

Т.к. в коде присутствует стиль display:none, то достаточно было указать именно это. Но можно указать ссылку из кода, если она там присутствует.

Ищет тотал коммандер быстро и вы получаете список файлов с заданными словами. Здесь же из программы можно открыть каждый файл и уже в нем найти всю строку.

Затем удалить и проверить сайт на работоспособность и исчезло ли окно фрейма.

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

Источник

Ниже вы найдете обновленное руководство о том, как SEO-специалисты, профессионалы контекстной рекламы и эксперты по цифровому маркетингу могут использовать краулер Screaming Frog (также называемый поисковым роботом, пауком или ботом) для оптимизации своего рабочего процесса.

Оглавление статьи

1 Основы краулинга
- 1.1 Как сканировать весь сайт
- 1.2 Как сканировать один подкаталог
- 1.3 Как сканировать определенный набор поддоменов или подкаталогов
- 1.4 Я хочу получить список всех страниц моего сайта
- 1.5 Я хочу получить список всех страниц в определенном подкаталоге
- 1.6 Как найти все поддомены на сайте и проверить внутренние ссылки.
- 1.7 Как сканировать сайт электронной коммерции или другой крупный сайт
- 1.8 Как сканировать сайт, расположенный на старом сервере — или как просканировать сайт, не положив его
- 1.9 Как просмотреть сайт, на котором используются файлы cookie
- 1.10 Как сканировать, используя другой пользовательский агент
- 1.11 Как сканировать страницы, требующие аутентификации
2 Внутренние ссылки
- 2.1 Мне нужна информация обо всех внутренних и внешних ссылках на моем сайте (якорный текст, директивы, ссылки на страницу и т.д.).
- 2.2 Как найти неработающие внутренние ссылки на странице или сайте
- 2.3 Как найти неработающие исходящие ссылки на странице или сайте (или все исходящие ссылки в целом)
- 2.4 Как найти ссылки, которые перенаправляются
3 Контент сайта
- 3.1 Как определить страницы с “тонким” контентом
- 3.2 Мне нужен список ссылок на изображения на определенной странице
- 3.3 Как найти изображения, у которых отсутствует alt-текст, или изображения, у которых alt-текст длинный
- 3.4 Как найти все CSS файлы на моем сайте
- 3.5 Как найти каждый файл JavaScript на моем сайте
- 3.6 Как определить все плагины jQuery, используемые на сайте, и на каких страницах они используются
- 3.7 Как найти, где на сайте внедрен flash
- 3.8 Как найти все внутренние PDF файлы, на которые есть ссылки на сайте
- 3.9 Как понять сегментацию контента внутри сайта или группы страниц
- 3.10 Как найти страницы, на которых есть кнопки поделиться в соцсетях
- 3.11 Как найти страницы, использующие iframes
- 3.12 Как найти страницы, содержащие встроенное видео или аудио содержимое
4 Мета-данные и директивы
- 4.1 Как определить страницы с длинными заголовками, мета-описаниями или URL-адресами
- 4.2 Как найти дублирующиеся заголовки страниц, мета-описания или URL-адреса
- 4.3 Как найти дублированный контент и/или URL, которые необходимо переписать/перенаправить/канонизировать
- 4.4 Как определить все страницы, которые включают мета-директивы, например: nofollow/noindex/noodp/canonical и т.д.
- 4.5 Как проверить, что мой файл robots.txt работает так, как нужно
- 4.6 Как найти или проверить разметку Schema или другие микроданные на моем сайте
5 Sitemap
- 5.1 Как создать XML Sitemap
- 5.2 Создание карты сайта XML путем загрузки URL-адресов
- 5.3 Как проверить существующий XML Sitemap
6 Устранение общих неполадок
- 6.1 Как определить, почему определенные разделы моего сайта не индексируются или не ранжируются
- 6.2 Как проверить, была ли миграция/редизайн моего сайта успешной
- 6.3 Как найти медленно загружающиеся страницы на моем сайте
- 6.4 Как найти вредоносное ПО или спам на моем сайте
7 PPC и аналитика
- 7.1 Как проверить, что мой код Google Analytics находится на каждой странице или на определенном наборе страниц моего сайта
- 7.2 Как проверить список PPC URLs в массовом порядке
8 Скраппинг
- 8.1 Как произвести скраппинг метаданных для списка страниц
- 8.2 Как найти на сайте все страницы, содержащие определенное посадочное место
9 Переписывание URL
- 9.1 Как найти и удалить идентификатор сеанса или другие параметры из моих просмотренных URL
- 9.2 Как переписать URL (например: заменить .com на .co.uk, или писать все URL в нижнем регистре)
10 Исследование ключевых слов
- 10.1 Как узнать, какие страницы наиболее ценны для моих конкурентов
- 10.2 Как узнать, какой анкорный текст используют мои конкуренты для внутренней перелинковки
- 10.3 Как узнать, какие мета ключевые слова (если таковые имеются) добавили мои конкуренты на свои страницы
11 Линкбилдинг
- 11.1 Как проанализировать список перспективных мест размещения ссылок
- 11.2 Как найти неработающие ссылки, чтобы использовать их для аутрич-возможностей
- 11.3 Как проверить мои обратные ссылки и просмотреть анкорный текст
- 11.4 Я нахожусь в процессе очистки своих обратных ссылок и мне нужно проверить, что ссылки удаляются в соответствии с запросом
- 11.5 Бонусный раунд
- 11.6 Как редактировать метаданные
- 11.7 Как просканировать сайт с JavaScript
12 Просмотр оригинального HTML и рендеринга HTML
- 12.1 Заключительные замечания

Основы краулинга

Как сканировать весь сайт

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

По умолчанию Screaming Frog сканирует только тот поддомен, который вы указали. Любые дополнительные поддомены, которые встречает паук, будут рассматриваться как внешние ссылки. Для того чтобы просканировать дополнительные поддомены, необходимо изменить настройки в меню Configuration паука. Установив флажок ‘Crawl All Subdomains’, вы убедитесь, что паук просматривает все ссылки на другие поддомены вашего сайта, которые он встречает.

Шаг 1:

Шаг 2:

Кроме того, если вы начинаете поиск из определенной подпапки или подкаталога, но при этом хотите, чтобы Screaming Frog просмотрел весь сайт, установите флажок «Crawl Outside of Start Folder».

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

Профессиональный совет:

Чтобы сэкономить время и дисковое пространство, не забывайте о ресурсах, которые могут не понадобиться в процессе сканирования. Веб-сайты содержат ссылки не только на страницы. Снимите флажки с Изображений, CSS, JavaScript и SWF ресурсов, чтобы уменьшить размер краулинга.

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

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

Если вы хотите начать поиск в определенной папке, но продолжить поиск по остальной части поддомена, обязательно выберите «Crawl Outside Of Start Folder» в настройках конфигурации паука перед вводом конкретного начального URL.

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

Если вы хотите ограничить краулинг определенным набором поддоменов или подкаталогов, вы можете использовать RegEx, чтобы установить эти правила в настройках Include или Exclude в меню Configuration.

Исключение:

В этом примере мы сканировали все страницы на сайте seerinteractive.com, исключая страницы «О сайте» на каждом поддомене.

Шаг 1:

Перейдите в меню Configuration > Exclude (Конфигурация > Исключить); используйте регулярное выражение с подстановочным знаком, чтобы определить URL-адреса или параметры, которые вы хотите исключить.

Шаг 2:

Проверьте регулярное выражение, чтобы убедиться, что оно исключает те страницы, которые вы ожидали исключить, прежде чем начать сканирование:

Включение:

В приведенном ниже примере мы хотели просканировать только подпапку «Команда» на сайте seerinteractive.com. Снова используйте вкладку «Тест» для проверки нескольких URL-адресов и убедитесь, что RegEx правильно настроен для вашего правила включения.

Это отличный способ краулинга по большим сайтам; на самом деле, Screaming Frog рекомендует этот метод, если вам нужно разделить и подчинить себе краулинг по большому домену.

Я хочу получить список всех страниц моего сайта

По умолчанию Screaming Frog настроен на сканирование всех изображений, JavaScript, CSS и флеш-файлов, которые встречаются пауку. Чтобы проверять только HTML, вам нужно снять флажки ‘Check Images’, ‘Check CSS’, ‘Check JavaScript’ и ‘Check SWF’ в меню Spider Configuration.

Запуск паука с этими настройками без галочек, по сути, предоставит вам список всех страниц вашего сайта, на которые ведут внутренние ссылки.

После завершения сканирования перейдите на вкладку ‘Internal’ («Внутренние») и отфильтруйте результаты по «HTML». Нажмите «Экспорт», и вы получите полный список в формате CSV.

Совет профессионала:

Если вы склонны использовать одни и те же настройки для каждого краулинга, Screaming Frog теперь позволяет сохранять параметры конфигурации:

Я хочу получить список всех страниц в определенном подкаталоге

В дополнение к снятию флажков ‘Check Images’, ‘Check CSS’, ‘Check JavaScript’ и ‘Check SWF’, вы также должны снять флажок ‘Check Links Outside Folder’ в настройках конфигурации паука. Запуск паука с этими настройками без галочки даст вам список всех страниц в вашей начальной папке (если они не являются страницами-сиротами) Примечание: страницы-сироты — это страницы, которые не связаны ни с одной другой страницей / разделом сайта, поэтому если пользователь попал на неё, он не сможет перейти с этой страницы на другую.

Как найти все поддомены на сайте и проверить внутренние ссылки.

Существует несколько различных способов найти все поддомены на сайте.

Способ 1:

Используйте Screaming Frog для определения всех поддоменов на данном сайте. Перейдите в раздел Configuration > Spider и убедитесь, что выбрана опция «Crawl all Subdomains». Как и при описанном выше сканировании всего сайта, это поможет сканировать все поддомены, на которые есть ссылки на сайте. Однако это не поможет найти поддомены, которые являются “сиротливыми” или на которые нет ссылок.

Метод 2:

Используйте Google для определения всех проиндексированных поддоменов.

С помощью расширения Scraper Chrome и некоторых операторов расширенного поиска можно найти все индексируемые поддомены для данного домена.

Шаг 1:

Начните с использования оператора поиска site: в Google, чтобы ограничить результаты конкретным доменом. Затем используйте оператор поиска -inurl, чтобы сузить результаты поиска, удалив основной домен. Вы должны увидеть список субдоменов, которые были проиндексированы в Google и не содержат основного домена.

Шаг 2:

Используйте расширение Scraper, чтобы извлечь все результаты в лист Google. Просто щелкните правой кнопкой мыши URL в поисковой выдаче, нажмите «Scrape Similar» и экспортируйте в Google Doc.

Шаг 3:

В Google Doc используйте следующую функцию, чтобы обрезать URL до поддомена:

=LEFT(A2,SEARCH(«/»,A2,9))

По сути, приведенная выше формула должна помочь отсечь любые подкаталоги, страницы или имена файлов в конце сайта. Эта формула, по сути, говорит sheets или Excel возвращать то, что находится слева от косой черты. Начальное число 9 является важным, потому что мы просим начать поиск косой черты после 9-го символа. Это учитывает протокол: https://, длина которого составляет 8 символов.

Дедублируйте список и загрузите его в Screaming Frog в режиме списка — вы можете вставить список доменов вручную, использовать функцию вставки или загрузить CSV.

Способ 3:

Введите URL корневого домена в инструменты, помогающие искать сайты, которые могут существовать на том же IP, или в поисковые системы, созданные специально для поиска поддоменов, например FindSubdomains. Создайте бесплатную учетную запись, чтобы войти в систему и экспортировать список поддоменов. Затем загрузите список в Screaming Frog с помощью режима списка.

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

Как сканировать сайт электронной коммерции или другой крупный сайт

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

В версии 11.0 Screaming Frog позволил пользователям сохранять все данные на диске в базе данных, а не просто хранить их в оперативной памяти. Это впервые открыло возможность обхода очень больших сайтов.

В версии 12.0 краулер автоматически сохраняет данные в базе данных. Это позволяет получить к ним доступ и открыть их с помощью команды «File > Crawls» в меню верхнего уровня — на случай, если вы запаникуете и задумаетесь, куда делась команда open!

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

Во-первых, вы можете увеличить объем памяти, выделяемой пауку.

Во-вторых, вы можете разбить краулинг по подкаталогам или сканировать только определенные части сайта с помощью настроек Include/Exclude («Включить/Исключить»).

В-третьих, вы можете отказаться от просмотра изображений, JavaScript, CSS и flash. Отменив выбор этих опций в меню Конфигурация, вы можете сэкономить память, выполняя сканирование только HTML.

Профессиональный совет:

До недавнего времени Screaming Frog SEO Spider мог приостановиться или упасть при просмотре большого сайта. Теперь, когда хранение базы данных установлено по умолчанию, вы можете восстановить краулинг, чтобы продолжить работу с того места, на котором остановились. Кроме того, вы можете получить доступ к URL-адресам, поставленным в очередь. Это может дать вам представление о дополнительных параметрах или правилах, которые необходимо исключить при краулинге большого сайта.

Как сканировать сайт, расположенный на старом сервере — или как просканировать сайт, не положив его

В некоторых случаях старые серверы могут быть не в состоянии обрабатывать стандартное количество запросов URL в секунду. На самом деле, мы рекомендуем на всякий случай включить ограничение на количество URL-адресов для просмотра в секунду, чтобы проявить уважение к серверу сайта. Лучше всего сообщить клиенту о том, что вы планируете провести сканирование сайта, на всякий случай, если у него есть защита от неизвестных пользовательских агентов. С одной стороны, им может понадобиться внести ваш IP или User Agent в белый список до того, как вы пройдете по сайту. Худший сценарий может заключаться в том, что вы посылаете слишком много запросов на сервер и непреднамеренно разрушаете сайт.

Чтобы изменить скорость краулинга, выберите «Speed» в меню «Configuration» и во всплывающем окне выберите максимальное количество потоков, которые должны работать одновременно. В этом же меню вы можете выбрать максимальное количество URL-адресов, запрашиваемых в секунду.

Профессиональный совет:

Если вы обнаружите, что в результате вашей проверки возникает много ошибок сервера, перейдите на вкладку ‘Advanced’ в меню Spider Configuration и увеличьте значение ‘Response Timeout’ и ‘5xx Response Retries’, чтобы получить лучшие результаты.

Как просмотреть сайт, на котором используются файлы cookie

Хотя поисковые боты не принимают cookies, если вы сканируете сайт и вам нужно разрешить cookies, просто выберите ‘Allow Cookies’ во вкладке ‘Advanced’ в меню Spider Configuration.

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

Чтобы выполнить поиск с использованием другого агента пользователя, выберите ‘User Agent’ в меню ‘Configuration’, затем выберите поискового бота из выпадающего списка или введите желаемые строки агента пользователя.

Поскольку Google теперь ориентируется на мобильные устройства, попробуйте просмотреть сайт под именем Googlebot Smartphone или измените User-Agent, чтобы он имитировал Googlebot Smartphone. Это важно по двум разным причинам:

Краулинг, имитирующий пользовательский агент Googlebot Smartphone, может помочь определить любые проблемы, возникающие у Google при краулинге и рендеринге содержимого вашего сайта.
Использование модифицированной версии агента Googlebot Smartphone поможет вам отличить ваши краулинги от краулингов Google при анализе журналов сервера.

Как сканировать страницы, требующие аутентификации

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

Аутентификация на основе форм — очень мощная функция, и для ее эффективной работы может потребоваться рендеринг JavaScript. Примечание: Аутентификация на основе форм должна использоваться редко и только опытными пользователями. Краулер запрограммирован на переход по каждой ссылке на странице, поэтому потенциально это может привести к ссылкам на выход из системы, создание сообщений или даже удаление данных.

Чтобы управлять аутентификацией, перейдите в раздел Configuration > Authentication.

Чтобы отключить запросы на аутентификацию, отмените выбор ‘Standards Based Authentication’ в окне ‘Authentication’ в меню Configuration.

Внутренние ссылки

Мне нужна информация обо всех внутренних и внешних ссылках на моем сайте (якорный текст, директивы, ссылки на страницу и т.д.).

Если вам не нужно проверять изображения, JavaScript, flash или CSS на сайте, отмените выбор этих опций в меню Spider Configuration, чтобы сэкономить время обработки и память.

После того как паук закончит проверку, воспользуйтесь меню Bulk Export, чтобы экспортировать CSV ‘All Links’. Это позволит вам получить все местоположения ссылок, а также соответствующий якорный текст, директивы и т.д.

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

Чтобы быстро подсчитать количество ссылок на каждой странице, перейдите на вкладку «Internal» и отсортируйте по «Outlinks». Все, что превышает 100, может потребовать пересмотра.

Как найти неработающие внутренние ссылки на странице или сайте

Если вам не нужно проверять изображения, JavaScript, flash или CSS сайта, снимите выделение этих опций в меню конфигурации паука, чтобы сэкономить время обработки и память.

После того как паук закончит сканирование, отсортируйте результаты на вкладке «Internal» по «Status Code». Любые 404, 301 или другие коды статуса будут легко просматриваться.

При нажатии на любой отдельный URL-адрес в результатах сканирования вы увидите изменение информации в нижнем окне программы. Перейдя на вкладку ‘In Links’ в нижнем окне, вы увидите список страниц, которые ссылаются на выбранный URL, а также якорный текст и директивы, используемые в этих ссылках. Вы можете использовать эту функцию для выявления страниц, на которых необходимо обновить внутренние ссылки.

Чтобы экспортировать полный список страниц, содержащих неработающие или перенаправленные ссылки, выберите «Redirection (3xx) In Links» или «Client Error (4xx) In Links» или «Server Error (5xx) In Links» в меню «Advanced Export», и вы получите экспорт данных в формате CSV.

Чтобы экспортировать полный список страниц, содержащих неработающие или перенаправленные ссылки, зайдите в меню Bulk Export. Прокрутите вниз до кодов ответов и просмотрите следующие отчеты:

No Response Inlinks (Входящие ссылки без ответа)
Redirection (3xx) Inlinks (Перенаправление (3xx) Входящие ссылки)
Redirection (JavaScript) Inlinks (Перенаправление (JavaScript) Внутренние ссылки)
Redirection (Meta Refresh) Inlinks (Перенаправление (Meta Refresh) Входящие ссылки)
Client Error (4xx) Inlinks (Ошибка клиента (4xx) Входящие ссылки)
Server Error (5xx) Inlinks (Ошибка сервера (5xx) Ссылки)

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

Как найти неработающие исходящие ссылки на странице или сайте (или все исходящие ссылки в целом)

После удаления выбора ‘Check Images’, ‘Check CSS’, ‘Check JavaScript’ и ‘Check SWF’ в настройках конфигурации паука, убедитесь, что ‘Check External Links’ остается выбранным.

После того как паук закончит сканирование, перейдите на вкладку ‘External’ в верхнем окне, отсортируйте по ‘Status Code’ и вы легко сможете найти URL с кодами состояния, отличными от 200. Если щелкнуть на любом отдельном URL-адресе в результатах сканирования, а затем перейти на вкладку ‘In Links’ в нижнем окне, вы найдете список страниц, которые указывают на выбранный URL-адрес. Вы можете использовать эту функцию для определения страниц, на которых необходимо обновить исходящие ссылки.

Чтобы экспортировать полный список исходящих ссылок, нажмите «Внешние ссылки» на вкладке «Массовый экспорт».

Для получения полного списка всех местоположений и якорного текста исходящих ссылок выберите ‘All Outlinks’ в меню ‘Bulk Export’. Отчет «All Outlinks» будет включать исходящие ссылки на ваши поддомены; если вы хотите исключить ваш домен, перейдите к отчету «External Links», о котором говорилось выше.

Как найти ссылки, которые перенаправляются

После того, как паук закончил сканирование, выберите вкладку ‘Response Codes’ в главном пользовательском интерфейсе и отфильтруйте по Status Code. Поскольку Screaming Frog использует регулярные выражения для поиска, используйте следующие критерии в качестве фильтра: 301|302|307. Это должно дать вам довольно солидный список всех ссылок, которые вернулись с каким-либо перенаправлением, независимо от того, был ли контент постоянно перемещен, найден и перенаправлен, или временно перенаправлен из-за настроек HSTS (это вероятная причина 307 перенаправления в Screaming Frog). Отсортируйте по ‘Status Code’, и вы сможете разбить результаты по типам. Перейдите на вкладку ‘In Links’ в нижнем окне, чтобы просмотреть все страницы, на которых используется перенаправляющая ссылка.

Если вы экспортируете данные непосредственно с этой вкладки, вы увидите только те данные, которые показаны в верхнем окне (исходный URL, код состояния и место, куда перенаправляет ссылка).

Чтобы экспортировать полный список страниц, включающих перенаправляющие ссылки, вам нужно выбрать ‘Redirection (3xx) In Links’ в меню ‘Advanced Export’. В результате вы получите CSV, содержащий расположение всех ваших перенаправленных ссылок. Чтобы показать только внутренние перенаправления, отфильтруйте столбец ‘Destination’ в CSV, чтобы включить только ваш домен.

Совет:

Используйте VLOOKUP между двумя вышеуказанными экспортными файлами, чтобы сопоставить столбцы Source и Destination с окончательным местоположением URL.

Пример формулы:

=VLOOKUP([@Destination],’response_codes_redirection_(3xx).csv’!$A$3:$F$50,6,FALSE)

(Где ‘response_codes_redirection_(3xx).csv’ — CSV файл, содержащий URL перенаправления, а ’50’ — количество строк в этом файле).

Контент сайта

Как определить страницы с “тонким” контентом

После того, как паук закончил сканирование, перейдите на вкладку ‘Internal’, отфильтруйте по HTML, затем прокрутите страницу вправо до столбца ‘Word Count’. Отсортируйте столбец ‘Word Count’ от низкого к высокому, чтобы найти страницы с низким содержанием текста. Вы можете перетащить столбец ‘Word Count’ влево, чтобы лучше сопоставить низкие значения количества слов с соответствующими URL-адресами. Нажмите кнопку «Export» на вкладке «Internal», если вы предпочитаете работать с данными в формате CSV.

Мне нужен список ссылок на изображения на определенной странице

Если вы уже просканировали весь сайт или подкаталог, просто выберите страницу в верхнем окне, затем нажмите на вкладку ‘Image Info’ в нижнем окне, чтобы просмотреть все изображения, которые были найдены на этой странице. Изображения будут перечислены в столбце «To».

Совет профессионала:

Щелкните правой кнопкой мыши на любой записи в нижнем окне, чтобы скопировать или открыть URL-адрес.

Кроме того, вы можете просмотреть изображения на одной странице, выполнив поиск только по этому URL. Убедитесь, что глубина просмотра установлена на ‘1’ в настройках конфигурации паука, затем, когда страница будет просмотрена, перейдите на вкладку ‘Images’, и вы увидите все изображения, которые нашел паук.

Как найти изображения, у которых отсутствует alt-текст, или изображения, у которых alt-текст длинный

Во-первых, вы должны убедиться, что опция ‘Check Images’ выбрана в меню Spider Configuration. После того, как паук закончит поиск, перейдите на вкладку ‘Images’ и отфильтруйте изображения по ‘Missing Alt Text’ или ‘Alt Text Over 100 Characters’. Вы можете найти страницы, на которых находится любое изображение, нажав на вкладку ‘Image Info’ в нижнем окне. Страницы будут перечислены в колонке ‘From’.

Наконец, если вы предпочитаете CSV, используйте меню ‘Bulk Export’ для экспорта ‘All Images’ или ‘Images Missing Alt Text Inlinks’, чтобы увидеть полный список изображений, где они расположены и любой связанный с ними alt text или проблемы с alt text.

Кроме того, используйте правую боковую панель для перехода к разделу «Images»; здесь вы можете легко экспортировать список всех изображений с отсутствующим alt-текстом.

Как найти все CSS файлы на моем сайте

В меню Spider Configuration выберите ‘Crawl’ и ‘Store’ CSS перед просмотром, затем, когда просмотр будет завершен, отфильтруйте результаты во вкладке ‘Internal’ по ‘CSS’.

Как найти каждый файл JavaScript на моем сайте

В меню Spider Configuration выберите ‘Check JavaScript’ перед просмотром, затем, когда просмотр будет завершен, отфильтруйте результаты во вкладке ‘Internal’ по ‘JavaScript’.

Как определить все плагины jQuery, используемые на сайте, и на каких страницах они используются

Во-первых, убедитесь, что опция ‘Check JavaScript’ выбрана в меню Spider Configuration. После того как паук закончит поиск, отфильтруйте вкладку ‘Internal’ по ‘JavaScript’, а затем выполните поиск по ‘jquery’. В результате вы получите список файлов плагинов. При необходимости отсортируйте список по ‘Address’ для более удобного просмотра, затем просмотрите ‘InLinks’ в нижнем окне или экспортируйте данные в CSV, чтобы найти страницы, на которых используется файл. Они будут находиться в колонке ‘From’.

Также вы можете использовать меню ‘Advanced Export’ для экспорта CSV ‘All Links’ и отфильтровать столбец ‘Destination’, чтобы показать только URL-адреса с ‘jquery’.

Профессиональный совет:

Не все плагины jQuery вредны для SEO. Если вы видите, что на сайте используется jQuery, лучше всего убедиться, что контент, который вы хотите проиндексировать, включен в исходный текст страницы и передается при ее загрузке, а не после. Если вы все еще не уверены, погуглите плагин, чтобы получить больше информации о том, как он работает.

Как найти, где на сайте внедрен flash

В меню Spider Configuration выберите ‘Check SWF’ перед началом сканирования, затем, когда сканирование будет завершено, отфильтруйте результаты на вкладке ‘Internal’ по ‘Flash’.

Это становится все более важным для поиска и идентификации содержимого, передаваемого с помощью Flash, и предложения альтернативного кода для этого содержимого. Chrome находится в процессе повсеместного отказа от Flash; это действительно то, что следует использовать для выявления проблем с критическим содержимым и Flash на сайте.

Примечание: Этот метод позволяет найти только файлы .SWF, связанные со страницей. Если Flash подтягивается через JavaScript, вам нужно будет использовать специальный фильтр.

Как найти все внутренние PDF файлы, на которые есть ссылки на сайте

После того, как паук закончил поиск, отфильтруйте результаты во вкладке ‘Internal’ по ‘PDF’.

Как понять сегментацию контента внутри сайта или группы страниц

Если вы хотите найти страницы вашего сайта, содержащие определенный тип контента, установите пользовательский фильтр для отпечатка HTML, уникального для данной страницы. Это нужно сделать *до* запуска паука.

Как найти страницы, на которых есть кнопки поделиться в соцсетях

Чтобы найти страницы, содержащие кнопки поделиться в соцсетях, вам нужно установить пользовательский фильтр перед запуском паука. Чтобы установить пользовательский фильтр, перейдите в меню Конфигурация и нажмите ‘Custom’. Оттуда введите любой фрагмент кода из источника страницы.

В приведенном выше примере я хотел найти страницы, содержащие кнопку Facebook «Мне нравится», поэтому я создал фильтр для facebook.com/plugins/like.php.

Как найти страницы, использующие iframes

Чтобы найти страницы, использующие iframe, установите пользовательский фильтр для <iframe перед запуском паука.

Как найти страницы, содержащие встроенное видео или аудио содержимое

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

Мета-данные и директивы

Как определить страницы с длинными заголовками, мета-описаниями или URL-адресами

После того, как паук закончил сканирование, перейдите на вкладку ‘Page Titles’ и отфильтруйте их по ‘Over 60 Characters’, чтобы увидеть слишком длинные заголовки страниц. То же самое можно сделать на вкладке ‘Meta Description’ или на вкладке ‘URI’.

Как найти дублирующиеся заголовки страниц, мета-описания или URL-адреса

После того, как паук закончил поиск, перейдите на вкладку ‘Page Titles’, затем отфильтруйте их по ‘Duplicate’. То же самое можно сделать на вкладках ‘Meta Description’ или ‘URI’.

Как найти дублированный контент и/или URL, которые необходимо переписать/перенаправить/канонизировать

После того, как паук закончил поиск, перейдите на вкладку ‘URI’, затем отфильтруйте по ‘Underscores’, ‘Uppercase’ или ‘Non ASCII Characters’ для просмотра URL, которые потенциально могут быть переписаны в более стандартную структуру. Отфильтруйте по ‘Duplicate’ и вы увидите все страницы, которые имеют несколько версий URL. Фильтр по ‘Параметрам’ позволяет увидеть URL-адреса, содержащие параметры.

Кроме того, если вы перейдете на вкладку ‘Internal’, отфильтруете по ‘HTML’ и прокрутите колонку ‘Hash’ в крайнем правом углу, вы увидите уникальную серию букв и цифр для каждой страницы. Если вы нажмете кнопку «Экспорт», вы сможете использовать условное форматирование в Excel, чтобы выделить дублирующиеся значения в этом столбце, что в конечном итоге покажет вам страницы, которые идентичны и требуют внимания.

Как определить все страницы, которые включают мета-директивы, например: nofollow/noindex/noodp/canonical и т.д.

После того, как паук закончил сканирование, перейдите на вкладку ‘Directives’. Чтобы увидеть тип директивы, просто прокрутите страницу вправо и посмотрите, какие столбцы заполнены, или воспользуйтесь фильтром, чтобы найти любой из следующих тегов:

index
noindex
follow
nofollow
noarchive
nosnippet
noodp
noydir
noimageindex
notranslate
unavailable_after
refresh

Как проверить, что мой файл robots.txt работает так, как нужно

По умолчанию, Screaming Frog будет соблюдать инструкции robots.txt. В первую очередь, он будет следовать директивам, сделанным специально для пользовательского агента Screaming Frog. Если нет директив специально для агента пользователя Screaming Frog, то паук будет следовать любым директивам для Googlebot, а если нет специальных директив для Googlebot, то паук будет следовать глобальным директивам для всех агентов пользователя. Паук будет следовать только одному набору директив, поэтому если есть правила, установленные специально для Screaming Frog, он будет следовать только этим правилам, а не правилам для Googlebot или любым глобальным правилам. Если вы хотите заблокировать определенные части сайта от паука, используйте обычный синтаксис robots.txt с агентом пользователя ‘Screaming Frog SEO Spider’. Если вы хотите игнорировать robots.txt, просто выберите эту опцию в настройках конфигурации паука.

Configuration > Robots.txt > Settings

Как найти или проверить разметку Schema или другие микроданные на моем сайте

Чтобы найти каждую страницу, которая содержит разметку Schema или любые другие микроданные, вам необходимо использовать пользовательские фильтры. Просто нажмите на ‘Custom’ → ‘Search’ в меню конфигурации и введите искомый след.

Чтобы найти каждую страницу, содержащую разметку Schema, просто добавьте следующий фрагмент кода в пользовательский фильтр: itemtype=http://schema.org

Чтобы найти определенный тип разметки, вам придется уточнить его. Например, используя пользовательский фильтр для ‘span itemprop=»ratingValue»‘, вы получите все страницы, содержащие разметку Schema для оценок.

Начиная с версии Screaming Frog 11.0, SEO-паук также предлагает нам возможность сканировать, извлекать и проверять структурированные данные непосредственно из краулинга. Проверяйте любые структурированные данные JSON-LD, Microdata или RDFa в соответствии с рекомендациями Schema.org и спецификациями Google в режиме реального времени по мере сканирования. Чтобы получить доступ к инструментам проверки структурированных данных, выберите опции в разделе «Config > Spider > Advanced».

В главном интерфейсе появится вкладка «Структурированные данные» (Structured Data), которая позволяет переключаться между страницами, содержащими структурированные данные, отсутствующими структурированными данными, а также страницами с ошибками проверки или предупреждениями:

Вы также можете экспортировать проблемы со структурированными данными в массовом порядке, посетив раздел «Reports > Structured Data > Validation Errors & Warnings.».

Sitemap

Как создать XML Sitemap

После того, как паук закончил сканирование вашего сайта, нажмите на меню «Sitemaps» и выберите «XML Sitemap».

Открыв настройки конфигурации XML Sitemap, вы сможете включить или исключить страницы по кодам ответа, последним изменениям, приоритету, частоте изменений, изображениям и т.д. По умолчанию Screaming Frog включает только URL-адреса 2xx, но это хорошее правило — всегда перепроверять.

В идеале, ваша XML sitemap должна включать только единственную, предпочтительную (каноническую) версию каждого URL со статусом 200, без параметров или других дублирующих факторов. После внесения всех изменений нажмите кнопку OK. Файл XML sitemap загрузится на ваше устройство, и вы сможете отредактировать соглашение об именовании по своему усмотрению.

Создание карты сайта XML путем загрузки URL-адресов

Вы также можете создать XML sitemap, загрузив URL-адреса из существующего файла или вставив их вручную в Screaming Frog.

Измените «Режим» с «Паук» на «Список» и нажмите на выпадающий список «Загрузить», чтобы выбрать любой из вариантов.

Нажмите кнопку «Старт», и Screaming Frog начнет просматривать загруженные URL-адреса. После того, как URL будут просмотрены, вы будете следовать тому же процессу, что и выше.

Как проверить существующий XML Sitemap

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

Перейдите в меню ‘Mode’ в Screaming Frog и выберите ‘List’. Затем нажмите «Upload» в верхней части экрана, выберите «Download Sitemap» или «Download Sitemap Index», введите URL-адрес карты сайта и начните сканирование. После того как паук закончит сканирование, вы сможете найти любые перенаправления, ошибки 404, дублированные URL и многое другое. Вы можете легко экспортировать выявленные ошибки.

Выявление отсутствующих страниц в XML Sitemap

Вы можете настроить параметры краулинга для обнаружения и сравнения URL-адресов в XML-карте сайта с URL-адресами в краулинге сайта.

Перейдите в ‘Configuration’ -> ‘Spider’ в главной навигации и внизу есть несколько опций для XML sitemaps — автоматическое обнаружение XML sitemaps через файл robots.txt или ручной ввод ссылки XML sitemap в поле. *Важное замечание — если ваш файл robots.txt не содержит надлежащих ссылок назначения на все XML sitemap, которые вы хотите получить, вы должны ввести их вручную.

После обновления настроек краулинга XML Sitemap перейдите к разделу «Crawl Analysis» в навигации, затем нажмите «Configure» и убедитесь, что кнопка Sitemaps отмечена. Сначала необходимо выполнить полное сканирование сайта, затем вернуться в «Crawl Analysis» и нажать кнопку Start.

После завершения Crawl Analysis вы сможете увидеть любые несоответствия, например, URL-адреса, которые были обнаружены в ходе полного обхода сайта и отсутствуют в XML sitemap.

Устранение общих неполадок

Как определить, почему определенные разделы моего сайта не индексируются или не ранжируются

Интересуетесь, почему определенные страницы не индексируются? Во-первых, убедитесь, что они не были случайно помещены в robots.txt или помечены как noindex. Затем необходимо убедиться, что пауки могут добраться до страниц, проверив внутренние ссылки. Страница, на которую нет внутренней ссылки на вашем сайте, часто называется «сиротской”.

Для того чтобы определить все подобные страницы, выполните следующие действия:

Перейдите в ‘Configuration’ -> ‘Spider’ в главной навигации, там внизу есть несколько опций для XML sitemap — Автоматическое обнаружение XML sitemap через ваш файл robots.txt или ручной ввод ссылки XML sitemap в поле. *Важное замечание — если ваш файл robots.txt не содержит надлежащих ссылок назначения на все XML sitemap, которые вы хотите получить, вам следует ввести их вручную.
Перейдите в раздел ‘Configuration → API Access’ → ‘Google Analytics’ — с помощью API вы можете получить данные аналитики для определенного аккаунта и вида. Чтобы найти страницы-«сироты» из органического поиска, убедитесь, что проведена сегментация по ‘Organic Traffic’

Вы также можете зайти в General → ‘Crawl New URLs Discovered In Google Analytics’, если хотите, чтобы URLs, обнаруженные в GA, были включены в полный обход сайта. Если эта функция не включена, вы сможете просматривать новые URL, полученные из GA, только в отчете Orphaned Pages (“сиротским” страницам).

Перейдите в раздел ‘Configuration → API Access’ → ‘Google Search Console’ — с помощью API вы можете получить данные GSC для определенного аккаунта и вида. Чтобы найти страницы-«сироты», вы можете искать URL-адреса, получающие клики и впечатления, которые не включены в ваш краулинг.
Вы также можете зайти в General → ‘Crawl New URLs Discovered In Google Search Console’, если хотите, чтобы URLs, обнаруженные в GSC, были включены в полный обход сайта. Если эта функция не включена, вы сможете просматривать новые URL-адреса, полученные из GSC, только в отчете Orphaned Pages.
Выполните сканирование всего сайта. После завершения обхода перейдите в меню ‘Crawl Analysis –> Start’ и дождитесь его завершения.
Просмотрите “сиротские” URL-адреса на каждой из вкладок или экспортируйте все осиротевшие URL-адреса оптом, перейдя в Reports → Orphan Pages.

Если у вас нет доступа к Google Analytics или GSC, вы можете экспортировать список внутренних URL в файл .CSV, используя фильтр ‘HTML’ на вкладке ‘Internal’.

Откройте CSV-файл и на втором листе вставьте список URL, которые не индексируются или плохо ранжируются. Используйте VLOOKUP, чтобы проверить, были ли URL из вашего списка на втором листе найдены в ходе сканирования.

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

У @ipullrank есть отличный Whiteboard Friday на эту тему, но общая идея в том, что вы можете использовать Screaming Frog для проверки того, перенаправляются ли старые URL, используя режим ‘List’ для проверки кодов состояния. Если старые URL-адреса выдают 404, то вы будете знать, какие URL-адреса еще нужно перенаправить.

Как найти медленно загружающиеся страницы на моем сайте

После того, как паук закончил сканирование, перейдите на вкладку ‘Response Codes’ и отсортируйте по столбцу ‘Response Time’ от высокого к низкому, чтобы найти страницы, которые могут страдать от низкой скорости загрузки.

Как найти вредоносное ПО или спам на моем сайте

Во-первых, вам нужно определить посадочное место вредоносного ПО или спама. Далее, в меню Конфигурация, нажмите на ‘Custom’ → ‘Search’ и введите посадочное место, которое вы ищете.

Вы можете ввести до 10 различных посадочных мест для каждого сканирования. Наконец, нажмите OK и перейдите к просмотру сайта или списка страниц.

Когда паук закончит сканирование, выберите вкладку «Custom» в верхнем окне, чтобы просмотреть все страницы, содержащие ваши посадочные места. Если вы ввели более одного пользовательского фильтра, вы можете просмотреть каждый из них, изменив фильтр на результатах.

PPC и аналитика

Как проверить, что мой код Google Analytics находится на каждой странице или на определенном наборе страниц моего сайта

Начните с выбора Пользовательских фильтров в разделе Конфигурация.

Определите, что вы хотите искать в фильтрах. Обычно один фильтр показывает страницы, содержащие нужную информацию, а другой — страницы, не содержащие ее. Например, фильтры 1 и 2 обычно представляют собой страницы, содержащие или не содержащие номер UA.

Для примера ниже использован номер UA компании SEER: UA-11852503-1.

Если сайт использует кросс-доменное отслеживание, поскольку он охватывает несколько доменов или субдоменов, возьмите строку кода для кросс-доменного отслеживания и поместите ее в фильтры 3 и 4. Сделайте один фильтр Contains, а другой — Does Not Contain.

Для примера ниже использованы setDomainName’, ‘seerinteractive.com.

Для фильтра 5 попробуйте добавить фрагмент из второй части кода GA. Я был удивлен количеством сайтов, которые отбрасывают вторую часть и сохраняют только верхнюю часть кода.

Для примера ниже использован google-analytics.com/ga.js.

После того как все настройки выполнены, введите URL-адрес в Screaming Frog и нажмите кнопку Start.

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

Как проверить список PPC URLs в массовом порядке

Сохраните ваш список в формате .txt или .csv, затем измените настройки ‘Mode’ на ‘List’.

Затем выберите файл для загрузки и нажмите ‘Start’ или вставьте список вручную в Screaming Frog. Посмотрите код состояния каждой страницы на вкладке «Internal».

Скраппинг

Как произвести скраппинг метаданных для списка страниц

Итак, вы собрали кучу URL, но вам нужно больше информации о них? Установите режим ‘List’, затем загрузите список URL в формате .txt или .csv. После того, как паук закончит работу, вы сможете увидеть коды статуса, исходящие ссылки, количество слов и, конечно же, метаданные для каждой страницы из вашего списка.

Как найти на сайте все страницы, содержащие определенное посадочное место

Сначала вам нужно определить посадочное место. Далее, в меню Конфигурация, нажмите на ‘Custom’ → ‘Search’ или ‘Extraction’ и введите посадочное место, которое вы ищете.

Вы можете ввести до 10 различных посадочных мест для каждого краулинга. Наконец, нажмите OK и приступайте к краулингу сайта или списка страниц. В приведенном ниже примере я хотел найти все страницы, на которых в разделе цен написано «Пожалуйста, позвоните», поэтому я нашел и скопировал HTML-код из источника страницы.

Когда паук закончит краулинг, выберите вкладку «Custom» в верхнем окне, чтобы просмотреть все страницы, содержащие ваше посадочное место. Если вы ввели более одного пользовательского фильтра, вы можете просмотреть каждый из них, изменив фильтр в результатах.

Ниже приведены дополнительные общие посадочные места, которые вы можете соскраппить с веб-сайтов и которые могут быть полезны для вашего SEO-аудита:

http://schema.org — Поиск страниц, содержащих schema.org
youtube.com/embed/|youtu.be|<video|player.vimeo.com/video/|wistia.(com|net)/embed|sproutvideo.com/embed/|view.vzaar.com|dailymotion.com/embed/|players.brightcove.net/|play.vidyard.com/|kaltura.com/(p|kwidget)/ — Поиск страниц, содержащих видеоконтент.

Профессиональный совет:

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

Переписывание URL

Как найти и удалить идентификатор сеанса или другие параметры из моих просмотренных URL

Чтобы определить URL с идентификатором сессии или другими параметрами, просто выполните сканирование вашего сайта с настройками по умолчанию. Когда паук закончит работу, перейдите на вкладку «URI» и отфильтруйте «Parameters», чтобы просмотреть все URL-адреса, содержащие параметры.

Чтобы убрать параметры из URL, которые вы сканируете, выберите в меню конфигурации ‘URL Rewriting’, затем на вкладке ‘Remove Parameters’ нажмите ‘Add’, чтобы добавить параметры, которые вы хотите убрать из URL, и нажмите ‘OK’. Вам придется запустить паука снова с этими настройками, чтобы переписывание произошло.

Как переписать URL (например: заменить .com на .co.uk, или писать все URL в нижнем регистре)

Чтобы переписать любой URL, выберите ‘URL Rewriting’ в меню Configuration, затем во вкладке ‘Regex Replace’ нажмите ‘Add’, чтобы добавить RegEx для того, что вы хотите заменить.

После добавления всех необходимых правил вы можете протестировать правила на вкладке ‘Тест’, введя тестовый URL в поле ‘URL before rewriting’. ‘URL after rewriting’ будет автоматически обновлен в соответствии с вашими правилами.

Если вы хотите установить правило, чтобы все URL возвращались в нижнем регистре, просто выберите ‘Lowercase discovered URLs’ на вкладке ‘Options’. Это устранит дублирование URL с заглавными буквами.

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

Исследование ключевых слов

Как узнать, какие страницы наиболее ценны для моих конкурентов

Как правило, конкуренты пытаются увеличить популярность ссылок и привлечь трафик на свои наиболее ценные страницы, размещая на них внутренние ссылки. Любой SEO-мыслящий конкурент, вероятно, также будет ссылаться на важные страницы из своего блога. Чтобы найти ценные страницы конкурентов, просмотрите их сайт, а затем отсортируйте вкладку «Internal» по столбцу «Inlinks» от наибольшего к наименьшему, чтобы увидеть, на каких страницах больше всего внутренних ссылок.

Чтобы просмотреть страницы, на которые ведут ссылки из блога конкурента, снимите флажок ‘Check links outside folder’ («Проверять ссылки вне папки») в меню «Конфигурация паука» и просмотрите папку/поддомен блога. Затем на вкладке ‘External’ отфильтруйте результаты, используя поиск по URL-адресу основного домена. Прокрутите список вправо и отсортируйте его по колонке ‘Inlinks’, чтобы увидеть, на какие страницы чаще всего ссылаются.

Профессиональный совет:

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

Как узнать, какой анкорный текст используют мои конкуренты для внутренней перелинковки

В меню ‘Bulk Export’ выберите ‘All Anchor Text’, чтобы экспортировать CSV, содержащий весь анкорный текст на сайте, где он используется и на что он ссылается.

Как узнать, какие мета ключевые слова (если таковые имеются) добавили мои конкуренты на свои страницы

После того, как паук закончил работу, посмотрите на вкладку ‘Meta Keywords’, чтобы увидеть все мета ключевые слова, найденные для каждой страницы. Отсортируйте по столбцу ‘Meta Keyword 1’, чтобы упорядочить список по алфавиту и визуально отделить пустые записи, или просто экспортируйте весь список.

Линкбилдинг

Как проанализировать список перспективных мест размещения ссылок

Если вы провели скраппинг или иным образом составили список URL, которые необходимо проверить, вы можете загрузить и просмотреть их в режиме ‘List’, чтобы собрать больше информации о страницах. Когда паук закончит сканирование, проверьте коды состояния на вкладке «Response Codes» и просмотрите исходящие ссылки, типы ссылок, якорный текст и директивы nofollow на вкладке «Outlinks» в нижнем окне. Это даст вам представление о том, на какие сайты и как ссылаются эти страницы. Чтобы просмотреть вкладку «Outlinks», убедитесь, что интересующий вас URL выбран в верхнем окне.

Конечно, вы захотите использовать пользовательский фильтр, чтобы определить, ссылаются ли эти страницы уже на вас.

Вы также можете экспортировать полный список внешних ссылок, нажав на «All Outlinks» в «Bulk Export Menu». Это не только покажет вам ссылки на внешние сайты, но и покажет все внутренние ссылки на отдельных страницах в вашем списке.

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

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

Как проверить мои обратные ссылки и просмотреть анкорный текст

Загрузите список обратных ссылок и запустите паука в режиме ‘List’. Затем экспортируйте полный список исходящих ссылок, нажав на ‘All Out Links’ в ‘Advanced Export Menu’. В результате вы получите URL-адреса и якорный текст/alt-текст для всех ссылок на этих страницах. Затем вы можете использовать фильтр в столбце ‘Destination’ в CSV, чтобы определить, есть ли на вашем сайте ссылки и какой якорный текст/alt текст включен.

Я нахожусь в процессе очистки своих обратных ссылок и мне нужно проверить, что ссылки удаляются в соответствии с запросом

Установите пользовательский фильтр, содержащий URL вашего корневого домена, затем загрузите список обратных ссылок и запустите паука в режиме ‘List’. Когда паук закончит сканирование, выберите вкладку ‘Custom’, чтобы просмотреть все страницы, которые все еще ссылаются на вас.

Бонусный раунд

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

Скопировать или открыть URL
Повторно просканировать URL или удалить его из просмотра
Экспортировать информацию об URL, входящие ссылки, исходящие ссылки или информацию об изображении для этой страницы.
Проверить индексацию страницы в Google, Bing и Yahoo
Проверить обратные ссылки страницы в Majestic, OSE, Ahrefs и Blekko
Посмотреть кэшированную версию/дату кэширования страницы
Посмотреть более старые версии страницы
Проверить валидность HTML страницы
Открsnm robots.txt для домена, на котором расположена страница
Искать другие домены на том же IP

Аналогично, в нижнем окне, щелкнув правой кнопкой мыши, вы можете:

Скопировать или открыть URL-адрес в столбце «To» или «From» для выбранной строки.

Как редактировать метаданные

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

Загрузите URL, заголовки и метаописания в Screaming Frog с помощью документа .CSV или Excel
Если вы уже выполнили сканирование своего сайта, вы можете экспортировать URL-адреса, перейдя в раздел ‘Reports → SERP Summary’. Это позволит легко отформатировать URL-адреса и мета-описания, которые вы хотите повторно загрузить и отредактировать.
Mode → SERP → Upload File
Редактирование метаданных в Screaming Frog

Массовый экспорт обновленных метаданных для отправки непосредственно разработчикам для обновления

Как просканировать сайт с JavaScript

Все чаще сайты строятся с использованием JavaScript-фреймворков, таких как Angular, React и т. д. Google настоятельно рекомендует использовать решение для рендеринга, поскольку Googlebot все еще с трудом справляется с содержимым на javascript. Если вы обнаружили сайт, построенный с использованием javascript, следуйте приведенным ниже инструкциям, чтобы сканировать его.

‘Configuration → Spider → Rendering → JavaScript

Измените настройки рендеринга в зависимости от того, что вы ищете. Вы можете настроить время ожидания, размер окна (мобильное, планшетное, настольное и т.д.).
Нажмите OK и сканируйте сайт.

В нижней навигации перейдите на вкладку Rendered Page («Рендеринг страницы»), чтобы посмотреть, как отображается страница. Если страница отображается некорректно, проверьте наличие заблокированных ресурсов или увеличьте лимит тайм-аута в настройках конфигурации. Если ни один из этих способов не помогает решить проблему рендеринга страницы, возможно, необходимо выявить более серьезную проблему.

Вы можете просмотреть и экспортировать в массовом порядке все заблокированные ресурсы, которые могут влиять на краулинг и рендеринг вашего сайта, перейдя в раздел ‘Bulk Export’ → ‘Response Codes’.

Просмотр оригинального HTML и рендеринга HTML

Если вы хотите сравнить исходный HTML и рендеринг HTML, чтобы выявить любые несоответствия или убедиться, что важное содержимое находится в DOM, перейдите в ‘Configuration’ → ‘Spider’ -> ‘Advanced’ и нажмите store HTML & store rendered HTML.

В нижнем окне вы сможете увидеть необработанный и преобразованный HTML. Это может помочь выявить проблемы с тем, как ваше содержимое отображается и просматривается краулерами.

Заключительные замечания

В заключение, я надеюсь, что это руководство даст вам лучшее представление о том, что Screaming Frog может сделать для вас. Оно сэкономило мне бесчисленное количество часов, поэтому я надеюсь, что оно поможет и вам!

Кстати, я не связан со Screaming Frog; я просто считаю, что это потрясающий инструмент.

Источник: https://www.seerinteractive.com/blog/screaming-frog-guide/

Источник

Что такое Ифраме?

IFrame — это веб-страница, встроенная в другую веб-страницу, или документ HTML, встроенный в другой документ HTML.

IFrame часто используется для вставки содержимого из другого источника, такого как реклама, в веб-страницу. Тег < iframe > указывает встроенный фрейм.

В этом уроке вы узнаете —

Как определить iframe:
Как переключать элементы в фреймах с помощью команд веб-драйвера:
Концепция вложенных фреймов (Frames inside Frames):

Как определить iframe:

Мы не можем обнаружить кадры, просто просматривая страницу или проверяя Firebug.

Обратите внимание на изображение ниже. Отображаемая реклама — это Iframe, мы не можем найти или распознать его, просто проверив Firebug. Итак, вопрос в том, как вы можете определить iframe?

Мы можем идентифицировать фреймы, используя методы, приведенные ниже:

Щелкните правой кнопкой мыши на элементе, если вы найдете вариант, например «This Frame», тогда это iframe (см. Диаграмму выше).
Щелкните правой кнопкой мыши на странице и выберите «Просмотр исходного кода страницы» и «Поиск с помощью iframe». Если вы можете найти любое имя тега с помощью «iframe», то это означает, что страница состоит из iframe.

На диаграмме выше вы можете видеть, что опция « Этот фрейм » доступна при щелчке правой кнопкой мыши, поэтому теперь мы уверены, что это iframe.

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

Int size = driver.findElements(By.tagName("iframe")).size();

Как переключать элементы в фреймах с помощью команд веб-драйвера:

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

По индексу
По имени или идентификатору
По веб-элементу

Переключиться на кадр по индексу:

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

Индекс iframe начинается с «0».

Предположим, что если на странице 100 кадров, мы можем переключиться на iframe с помощью индекса.

. Driver.switchTo () кадр (0);
. Driver.switchTo () рамы (1);

Переключиться на кадр по имени или идентификатору:

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

driver.switchTo () кадр ( «iframe1»).
driver.switchTo (). frame («идентификатор элемента»);

Пример переключения на iframe через ID:

Давайте рассмотрим пример отображения iframe на изображении ниже. Наше требование — щелкнуть по фрейму.

Мы можем получить доступ к этому iframe через следующий URL: http://demo.guru99.com/test/guru99home/

Невозможно щелкнуть iframe напрямую через XPath, поскольку это iframe. Сначала мы должны переключиться на фрейм, а затем мы можем нажать, используя xpath.

Шаг 1)

WebDriver driver = new FirefoxDriver();

driver.get("http://demo.guru99.com/test/guru99home/");

driver.manage().window().maximize();

Мы инициализируем драйвер Firefox.
Перейдите на сайт «guru99», который состоит из iframe.
Развернуло окно.

Шаг 2)

driver.switchTo().frame("a077aa5e");

На этом шаге нам нужно узнать идентификатор iframe, проверив Firebug.
Затем переключитесь на iframe через ID.

Шаг 3)

driver.findElement(By.xpath("html/body/a/img")).click();

Здесь нам нужно узнать xpath элемента, по которому нужно щелкнуть.
Щелкните элемент, используя команду веб-драйвера, показанную выше.

Вот полный код:

public class SwitchToFrame_ID {
public static void main(String[] args) {

		WebDriver driver = new FirefoxDriver(); //navigates to the Browser
	    driver.get("http://demo.guru99.com/test/guru99home/"); 
	       // navigates to the page consisting an iframe

	       driver.manage().window().maximize();
	       driver.switchTo().frame("a077aa5e"); //switching the frame by ID

			System.out.println("********We are switch to the iframe*******");
     		driver.findElement(By.xpath("html/body/a/img")).click();
  		    //Clicks the iframe
       
  			System.out.println("*********We are done***************");
      }
}

Вывод:

Браузер переходит на страницу, содержащую вышеупомянутый iframe, и нажимает на iframe.

Переключиться на фрейм с помощью веб-элемента:

Мы даже можем переключиться на iframe, используя веб-элемент.

. Driver.switchTo () кадр (WebElement);

Как переключиться обратно в основной кадр

Мы должны выйти из iframe.

Чтобы вернуться к родительскому фрейму, вы можете использовать switchTo (). ParentFrame () или, если вы хотите вернуться к основному (или самому родительскому) фрейму, вы можете использовать switchTo (). DefaultContent ();

	    driver.switchTo().parentFrame();
	    driver.switchTo().defaultContent();

Как переключиться через фрейм, если мы НЕ МОЖЕМ переключаться с использованием идентификатора или веб-элемента:

Предположим, что если на странице 100 фреймов и нет доступного идентификатора, в этом случае мы просто не знаем, из какого загрузочного элемента iframe загружается (это тот случай, когда мы не знаем индекс фрейма также).

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

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

Шаг 1)

WebDriver driver = new FirefoxDriver();
driver.get("http://demo.guru99.com/test/guru99home/");
driver.manage().window().maximize();

Инициализируйте драйвер Firefox.
Перейдите на сайт «guru99», который состоит из iframe.
Развернуло окно.

Шаг 2)

int size = driver.findElements(By.tagName("iframe")).size();

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

Шаг 3)

Целью этого шага было бы выяснение индекса iframe.

for(int i=0; i<=size; i++){
	driver.switchTo().frame(i);
	int total=driver.findElements(By.xpath("html/body/a/img")).size();
	System.out.println(total);
	    driver.switchTo().defaultContent();}

Выше «forloop» итерирует все iframe на странице, и он печатает «1», если наш требуемый iframe был найден, иначе возвращает «0».

Вот полный код до шага 3:

public class IndexOfIframe {
public static void main(String[] args) {
	    WebDriver driver = new FirefoxDriver();
	    driver.get("http://demo.guru99.com/test/guru99home/");  
	    driver.manage().window().maximize();
	    //driver.manage().timeouts().implicitlyWait(100, TimeUnit.SECONDS);
	    int size = driver.findElements(By.tagName("iframe")).size();

	    for(int i=0; i<=size; i++){
		driver.switchTo().frame(i);
		int total=driver.findElements(By.xpath("html/body/a/img")).size();
		System.out.println(total);
	    driver.switchTo().defaultContent();}}}

Выполните эту программу, и результат будет таким:

Вывод:

Проверьте вывод, вы можете найти серии 0 и 1.

Где бы вы ни находили «1» в выводе, это индекс фрейма, по которому загружается элемент.
Поскольку индекс iframe начинается с «0», если вы находите 1 на 1- ^м месте, тогда индекс равен 0.
Если вы найдете 1 в 3- ^м месте, индекс равен 2.

Мы можем закомментировать цикл for, как только мы найдем индекс. Шаг 4)

driver.switchTo().frame(0);

Как только вы найдете индекс элемента, вы можете переключить фрейм с помощью приведенной выше команды.
driver.switchTo (). frame (индекс, найденный на шаге 3);

Шаг 5)

driver.findElement(By.xpath("html/body/a/img")).click();

Приведенный выше код щелкает элемент iframe или элемент iframe.

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

public class SwitchToframe   {
public static void main(String[] args) throws NoSuchElementException{
	    WebDriver driver = new FirefoxDriver();
	    driver.get("http://demo.guru99.com/test/guru99home/");  
	    driver.manage().window().maximize();
	    //int size = driver.findElements(By.tagName("iframe")).size();
	
	/*for(int i=0; i<=size; i++){
	    driver.switchTo().frame(i);
	    int total=driver.findElements(By.xpath("html/body/a/img")).size();
		System.out.println(total);
	    driver.switchTo().defaultContent(); //switching back from the iframe
	 }*/
	            
		//Commented the code for finding the index of the element
	    driver.switchTo().frame(0); //Switching to the frame
		System.out.println("********We are switched to the iframe*******");
		driver.findElement(By.xpath("html/body/a/img")).click();
		
		//Clicking the element in line with Advertisement
	    System.out.println("*********We are done***************");
	        }
	    }

Вывод: браузер переходит на страницу, содержащую вышеупомянутый iframe, и нажимает на iframe.

Концепция вложенных фреймов (Frames inside Frames):

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

Сначала мы должны переключиться на внешний фрейм либо по индексу, либо по идентификатору iframe.
Как только мы переключаемся на внешний фрейм, мы можем найти общее количество фреймов внутри внешнего фрейма, и
Мы можем переключиться на внутренний фрейм любым из известных способов.

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

HTML-код для вышеупомянутого вложенного фрейма показан ниже.

Приведенный выше HTML-код четко объясняет тег iframe (выделен зеленым цветом) внутри другого тега iframe, указывая на наличие вложенных элементов iframe.

Ниже приведены шаги для переключения на внешнюю рамку и печати текста на внешней рамке: Шаг 1)

	WebDriver driver=new FirefoxDriver();
	    driver.get("Url");
	    driver.manage().window().maximize();
	    driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);
	    int size = driver.findElements(By.tagName("iframe")).size();
	    System.out.println("Total Frames --" + size);
	    
		// prints the total number of frames 
		driver.switchTo().frame(0); // Switching the Outer Frame    		
	    System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText());

Переключитесь на внешнюю раму.
Печатает текст на внешней рамке.

Как только мы переключимся на внешнюю раму, мы должны знать, присутствует ли какая-либо внутренняя рама внутри внешней рамы

Шаг 2)

size = driver.findElements(By.tagName("iframe")).size();
    // prints the total number of frames inside outer frame           
    System.out.println("Total Frames --" + size);

Находит общее количество фреймов внутри внешнего фрейма.
Если был найден размер ‘0’, то внутри кадра нет внутренней рамки.

Шаг 3)

driver.switchTo().frame(0); // Switching to innerframe
System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());

Переключиться на внутреннюю раму
Печатает текст на внутренней рамке.

Вот полный код:

public class FramesInsideFrames {
public static void main(String[] args) {
WebDriver driver=new FirefoxDriver();
	    driver.get("Url");
	    driver.manage().window().maximize();
	    driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);

	    int size = driver.findElements(By.tagName("iframe")).size();
	    System.out.println("Total Frames --" + size);
               
		// prints the total number of frames 
		driver.switchTo().frame(0); // Switching the Outer Frame    		
	    System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText());

		//Printing the text in outer frame
		size = driver.findElements(By.tagName("iframe")).size();
	    // prints the total number of frames inside outer frame           
                                                                                                          
	    System.out.println("Total Frames --" + size);
	    driver.switchTo().frame(0); // Switching to innerframe
	    System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());
		
		//Printing the text in inner frame
		driver.switchTo().defaultContent();
	}
}

Вывод : вывод приведенного выше кода будет печатать текст во внутреннем кадре и внешнем кадре.

Источник

В этой статье я собрал все лучшие мировые практики, примеры и способы отслеживания различных действий в iframe с помощью Google Tag Manager, актуальные на сегодняшний день. Материал большой, но интересный! Приятного чтения.

Что такое iframe?
Есть ли на вашем сайте iframe?
Можно ли отслеживать действия в iframe?
Отслеживание iframe с помощью Google Tag Manager
- 1. Отслеживание событий от дочернего фрейма к родительскому
- 2. Передача идентификатора клиента от родительскому фрейма к дочернему
  - Настройка родительской страницы
  - Настройка дочерней страницы
- Создание триггеров, переменных и тегов
Резюме
Список используемой литературы

Что такое iframe?

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

Пример сайта (kinopoisk.ru)

Не все эти элементы на странице могут быть созданы вами (вашей командой или разработчиком) и располагаться на том же домене, что и ваш сайт. И ни ко всем им у вас может быть доступ, особенно когда речь идет о сторонних решениях. Например, на сайте kinopoisk.ru есть возможность приобрести билеты в кино. Не покидая сайт (на Кинопоиске используется виджет от Яндекс Афиши widget.afisha.yandex.ru), вы можете выбрать понравившийся вам фильм, кинотеатр, удобную дату и время, места в зрительном зале и оплатить покупку:

Покупка билетов в кино

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

Пример формы с онлайн-оплатой и вводом банковских реквизитов

Виджет от платежного агрегатора, который вы используете на сайте, как правило, устанавливается через iframe (но могут быть и другие реализации). Видео YouTube, код которого вы копируете с сайта и вставляете к себе, то же добавляется через iframe:

Встраивание видео YouTube через iframe

Так что же такое iframe? Iframe (от англ. inline frame) — один из двух тегов языка HTML (есть теги <iframe> и <frame>), обозначающих фрейм, то есть отдельный/независимый HTML-документ, позволяющий встраивать на веб-страницу документы, видео и интерактивные медиафайлы и прочие части содержимого из других источников. Используя тег <iframe>, вы можете добавить на свой сайт элемент с другого сайта. Например, Google Форму, песню с SoundCloud:

Или даже отчет Google Data Studio:

Другими словами, Iframe — веб-сайт (страница, документ или конкретный элемент), который загружается внутри другого веб-сайта. Тег <iframe> используется, преимущественно, для встраивания другого HTML-документа в текущий. Поскольку не все решения, которые существуют на рынке, необходимо разрабатывать с нуля, мы можем взять уже готовое и внедрить к себе на сайт через iframe. Это безопасный способ для ваших пользователей взаимодействовать со сторонними веб-сайтами, не покидая ваш сайт.

Код с iframe может иметь такой вид:

А на сайте выглядеть так:

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

align — определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом;
allowtransparency — устанавливает прозрачный фон фрейма, через который виден фон страницы;
frameborder — устанавливает, отображать границу вокруг фрейма или нет;
height — высота фрейма;
hspace — горизонтальный отступ от фрейма до окружающего контента;
marginheight — отступ сверху и снизу от содержания до границы фрейма;
marginwidth — отступ слева и справа от содержания до границы фрейма;
name — имя фрейма;
sandbox — позволяет задать ряд ограничений на контент загружаемый во фрейме;
scrolling — способ отображения полосы прокрутки во фрейме;
seamless — определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа;
src — путь к файлу, содержимое которого будет загружаться во фрейм;
srcdoc — хранит содержимое фрейма непосредственно в атрибуте;
vspace — вертикальный отступ от фрейма до окружающего контента;
width — ширина фрейма.

Есть ли на вашем сайте iframe?

Самый простой способ проверить существование тега <iframe> на странице — это перейти на нее, открыть в браузере консоль разработчика, потом и на вкладку Console и написать следующий код, нажав Enter:

document.getElementsByTagName(‘iframe’)

Метод getElementsByTagName возвращает коллекцию элементов, учитывая имя тега. Поскольку мы хотим найти все элементы с тегом <iframe>, то в скобках введите именно такой тег:

Количество найденных iframe на странице

Выделяя курсором мыши поочередно каждый из них, он будет подсвечиваться на странице:

Подсвеченный iframe

С помощью конструкции:

document.getElementsByTagName(‘iframe’).length

или аналогичной конструкции в jQuery:

$(‘iframe’).length // вариант №1

jQuery(‘iframe’).length // вариант №2

В консоли разработчика вам вернется значение количества iframe, найденных на странице:

Количество найденных элементов iframe на странице

Вы также можете перейти в инспектор элементов и в структуре DOM-дерева выделить тот элемент, который считаете Iframe. Если у него будет присутствовать тег <iframe>, то значит он встроен в ваш сайт как отдельный/независимый HTML-элемент.

Пример тега <iframe> в инспекторе элементов (Inspect Element)

Другой способ убедиться в том, что перед вами действительно Iframe — это выделить нужный элемент и с помощью контекстного меню (правая клавиша мыши). Если там присутствует вариант Просмотр кода фрейма и Перезагрузить фрейм, то данный элемент на странице является фреймом:

Просмотр кода фрейма

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

Пример кода фрейма стороннего решения

По сути, это веб-сайт (страница, документ или конкретный элемент), который загружается внутри другого веб-сайта.

Можно ли отслеживать действия в iframe?

Когда вы захотите отслеживать действия в <iframe>, будь то это клик по кнопке или отправка формы, стандартные способы настройки триггеров и тегов в Google Tag Manager перестают работать, а в режиме отладки на шкале событий вы, скорее всего, не увидите никаких действий. Поскольку Iframe — это веб-сайт (страница, документ или конкретный элемент), который загружается внутри другого веб-сайта, то в нем тоже должен быть установлен контейнер GTM. Если его там нет, то у вас нет никаких способов трекинга событий в нет.

Исходя из этого, существует всего два варианта:

когда у вас нет доступа к исходному коду iframe -> вы не можете отслеживать события с помощью Google Tag Manager;
когда у вас есть доступ к исходному коду iframe -> вы можете отслеживать события с помощью диспетчера тегов Google.

К сожалению, но это так. Если у вас нет доступа к стороннему решению/виджету (например, Ticketscloud или виджеты от Elfsight), вы не можете установить в него GTM, то и настроить передачу данных между веб-сайтами вы не сможете. Представьте, что на вашем сайте образовалась черная дыра.

Когда у вас есть доступ к исходному коду iframe — у вас на сайте черная дыра

Единственный способ, при котором возможно отслеживание действий в iframe — это попросить разработчиков данного решения установить внутрь их iframe контейнер Google Tag Manager, и тогда вы сможете отслеживать необходимые события. Но как показывает практика, это делается крайне редко, даже по официальному запросу к той компании, которая предоставляет доступ к своему виджету. Некоторые сторонние сервисы имеют возможность передавать данные в инструменты аналитики, но только при определенных условиях. Например, отслеживать события, связанные с просмотров видео на YouTube с помощью диспетчера тегов от Google, можно благодаря стандартного триггеру Видео на YouTube.

Рекомендуется к прочтению:

Отслеживание видео YouTube в Universal Analytics
Отслеживание видео YouTube в Google Analytics 4

Но что делать, когда готовых решений вашего нашего проекта в Google Tag Manager нет?

Отслеживание iframe с помощью Google Tag Manager

Если у вас есть возможность добавить в сторонний фрейм/виджет код диспетчера тегов от Google, тогда эта настройка для вас. Для удобства создайте отдельный контейнер GTM и попросите разработчика установить данный код в сторонний iframe, который вы будете размещать на своем сайте.

Схематично это будет выглядеть так:

Установка контейнера GTM и на страницу с iframe, и в сам iframe

Таким образом, контейнер Google Tag Manager должен быть установлен и на вашем сайте, включая страницу, на которой установлен iframe, и в сам iframe.

Разберем практический пример: на одном сайте (kafedra.digital) располагается вся основная информация об услуге. Виджет с формой подписки размещен на стороннем сайте (gtm-exam.ru) и устанавливается на сайт kafedra.digital с помощью <iframe>:

Сайт на одном домене, а сторонний виджет на другом

Чтобы отслеживать заполнение полей формы, отправку формы, клик по кнопке и другие взаимодействия внутри фрейма, код контейнера Google Tag Manager должен быть установлен как на сайте kafedra.digital (основном сайте), так и в iframe, то есть на домене gtm-exam.ru. Если вы не можете добавить код в iframe, вы не сможете отследить взаимодействия с ним.

Примечание: контейнер GTM, установленный на основном сайте kafedra.digital, не сможет отслеживать события пользователей, происходящие внутри iframe. Поэтому его требуется добавлять и там, и там.

Убедитесь, что код диспетчера тегов от Google установлен в iframe. Для этого выделите его и с помощью контекстного меню просмотрите код фрейма:

Просмотр кода фрейма

В нем должен быть установлен контейнер Google Tag Manager, к которому у вас есть доступ.

Код Google Tag Manager на странице, установленной через iframe

Проверить наличие установленных контейнеров GTM можно с помощью расширения Google Tag Assistant. Оно покажет вам на странице все найденные теги Google, включая контейнер самого сайта и iframe.

Google Tag Assistant

А нажав на сам контейнер iframe, в Tag Assistant вы увидите дополнительную вкладку IFrame, как раз свидетельствующую об установке контейнера таким способом.

Вкладка IFrame в Tag Assistant

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

Но перед тем, как вы будете настраивать отслеживание, необходимо определиться с последующей терминологией. Поскольку у нас есть основной сайт и сторонний виджет, установленный через iframe, то часто используют такие понятия, как родительский фрейм (parent frame) и дочерний фрейм (child frame).

Родительский фрейм — это ваш основный сайт, на котором размещена вся информация и установлен код Google Tag Manager;
Дочерний фрейм — это веб-сайт/страница, которая размещена на вашем основном сайте через iframe, и на которой тоже установлен свой код Google Tag Manager.

Родительский и дочерний фреймы

В моем примере — kafedra.digital является родительским фреймом, а форма подписки, установленная через iframe с сайта gtm-exam.ru, является дочерним фреймом. При такой реализации мы сможем отслеживать действия, которые совершают пользователи в дочернем фрейме (в iframe), отправлять об этом сообщение, а затем прослушивать его в родительском GTM и использовать в качестве триггера активации с последующей передачей данных в аналитику.

Примечание: все основные настройки будут осуществляться внутри контейнера Google Tag Manager для дочернего фрейма (в iframe), а в родительском мы будем только перехватывать эти события и отправлять информацию в счетчики аналитики.

После того, как вы установите Google Tag Manager в двух фреймах, вам необходимо определиться с перечнем отслеживаний. Клик по кнопке, отправка формы, заполнение полей или иные события?

1. Отслеживание событий от дочернего фрейма к родительскому

Предлагаю начать с самого простого — отслеживания кликов внутри iframe, например, по кнопке Отправить:

Отслеживание кликов внутри iframe

Для этого в дочернем фрейме найдите данный элемент и его уникальный атрибут, за который можно будет зацепиться и настроить условие активации триггера в контейнере Google Tag Manager. В моем блоге есть подробная статья и алгоритм отслеживания любых кликов на сайте. Прочитать ее можно здесь. Если кратко, то старайтесь придерживаться следующим настройкам:

если у элемента есть id, то в качестве условия активации триггера использовать Click ID содержит/равно
если у элемента есть class, то в качестве условия активации триггера использовать Click Classes содержит/равно
если нет 1 и 2, то в качестве условия активации триггера использовать Click Element соответствует селектору CSS

Вы можете активировать режим отладки и перейти на основной сайт, чтобы проверить текущие настройки. Примечательно, что поскольку коды контейнера GTM установлены как на сайте, так и внутри iframe, то сам режим отладки отобразит два идентификатора, между которыми вы можете переключаться:

Два контейнера GTM в режиме отладки

И когда вы перейдете на саму страницу, то при наличии двух контейнеров GTM у вас будет отображаться два блока уведомления об активированном Tag Assistant — один для основного сайта и его GTM, а другой для iframe и его GTM:

Tag Assistant Connected и для сайта, и для iframe

Именно так это и работает при наличии iframe на странице и двух контейнеров GTM.

Определившись с условием активации триггера клика по кнопке, создайте его в контейнере iframe. В моем примере клик по кнопке Отправить будет иметь такое условие:

Click Element соответствует селектору CSS

Сохраните изменения и затем создайте тег типа Пользовательский HTML, скопировав нижеприведенный код:

try {

var postObject = JSON.stringify({

event: ‘iframeClick’,

form: ‘Subscribe’

});

parent.postMessage(postObject, ‘https://site.ru’);

} catch(e) {

window.console && window.console.log(e);

}

</script>

, где вместо https://site.ru в методе parent.postMessage пропишите домен своего основного сайта (родительского фрейма). У меня это kafedra.digital:

Изменение домена на свой

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

В качестве триггера активации выберите триггер, созданный шагом ранее. Для моего примера — это Клик — Все элементы по кнопке Отправить. Итоговый тег в GTM будет выглядеть так:

Тег в контейнере iframe (дочернем фрейме)

Вы также можете изменить название события iframeClick на свое (в зависимости от того, какое событие вы отслеживаете) и передать внутри другие параметры события и их значения, а не только form: ‘Subscribe’, как в примере выше. Вы сами для себя и для своего проекта определяете перечень передаваемых данных.

Примечание: оригинал архива вы можете скачать по ссылке, а затем импортировать контейнеры к себе в диспетчер тегов Google.

Текущий код взят с сайта measureschool.com. В нем используется интерфейс postMessage. Он позволяет общаться друг с другом окнам и фреймам с разных доменов, но только в том случае, если оба сайта согласны и вызывают соответствующие JavaScript-функции. Это делает общение безопасным для пользователя.

Поскольку внешний виджет (форма с подпиской) на сайте kafedra.digital подключен через iframe с другого домена gtm-exam.ru, то нам нужен механизм отправки запроса с дочернего фрейма на родительский, который мы можем прослушать с помощью Google Tag Manager и использовать его как триггер для последующей активации тега и отправки данных в аналитику.

В результате, наше отслеживание сводится к трем основным этапам:

опубликовать сообщение из нашего дочернего iframe (gtm-exam.ru);
прослушать сообщение в нашем родительском фрейме (kafedra.digital);
когда это сообщение будет получено, отправить событие на уровень данных Google Tag Manager.

С помощью пользовательского HTML-тега, который вы создали на предыдущем шаге, как раз и отправляется это сообщение из нашего дочернего iframe. postMessage является методом нашего объекта parent, а строка кода parent.postMessage отправляет сообщение в родительский фрейм. Для этого используются два аргумента:

parent.postMessage(data, targetOrigin)

data (данные для отправки — сообщение, которое мы хотим опубликовать, должно быть строкой. Именно поэтому вы должны использовать метод JSON.stringify на сложных объектах, чтобы браузер смог это поддержать);
targetOrigin (определяет источник для окна-получателя (родительского фрейма), только окно с данного источника имеет право получить это сообщение).

Если значения в targetOrigin не совпадают с нашим родительским фреймом, сообщение не будет отправлено, поэтому убедитесь, что они верны. Если окна имеют одинаковый источник (протокол, домен, порт), то они могут делать друг с другом все, что угодно. Другими словами, мы можем отправить сообщение с https://site1.ru на https://site2.ru. Таким образом, targetOrigin будет https://site2.ru и домен получателя также будет https://site2.ru.

Все это мы и сделали в коде. Сначала объявили переменную var postObject, которой присвоили объект со строковым типом данных, и в нем передали событие с названием iframeClick и параметр form со значением Subscribe. Как только триггер активации по клику по кнопке Отправить сработает, с помощью команды parent.postMessage будет отправлено сообщение на родительский фрейм https://kafedra.digital, который мы сможем прослушать с помощью еще одного кода.

Для этого перейдите в контейнер основного сайта Google Tag Manager (не контейнер iframe!) и создайте тег типа Пользовательский HTML, скопировав нижеприведенный код:

(function(window) {

addEvent(window, ‘message’, function(message) {

try{

var data = JSON.parse(message.data);

var dataLayer = window.dataLayer || (window.dataLayer = []);

if (data.event) {

dataLayer.push({

‘event’: data.event,

‘postMessageData’: data

});

}

}catch(e){}

});

// Cross-browser event listener

function addEvent(el, evt, fn) {

if (el.addEventListener) {

el.addEventListener(evt, fn);

} else if (el.attachEvent) {

el.attachEvent(‘on’ + evt, function(evt) {

fn.call(el, evt);

});

} else if (typeof el[‘on’ + evt] === ‘undefined’ || el[‘on’ + evt] === null) {

el[‘on’ + evt] = function(evt) {

fn.call(el, evt);

};

}

})(window);

</script>

В качестве триггера активации выберите All Pages (Просмотр страницы), но можно выбрать активацию только на странице странице с iframe. В Google Tag Manager это выглядит так:

Тег на основном сайте (родительском фрейме)

В этом коде вам ничего менять не нужно. Он универсален для всех проектов.

Как только мы начали отправлять сообщение с iframe методом parent.postMessage, нам нужно начать прослушивать его в родительском фрейме. Мы можем это сделать с помощью, прикрепив EventListener к window объекту родительского фрейма. Делается это с помощью данной конструкции:

function addEvent(el, evt, fn) {

if (el.addEventListener) {

el.addEventListener(evt, fn);

} else if (el.attachEvent) {

el.attachEvent(‘on’ + evt, function(evt) {

fn.call(el, evt);

});

} else if (typeof el[‘on’ + evt] === ‘undefined’ || el[‘on’ + evt] === null) {

el[‘on’ + evt] = function(evt) {

fn.call(el, evt);

};

}

Теперь мы можем прослушать наше сообщение, используя следующий код:

addEvent(window, ‘message’, function(message) {

// Сделать/Передать что-то с сообщением

});

Когда у нас есть код для отправки и перехвата сообщения, осталось только добавить некоторую логику для обработки сообщения всякий раз, когда оно появляется. Для этого используется конструкция dataLayer.push():

addEvent(window, ‘message’, function(message) {

try{

var data = JSON.parse(message.data);

var dataLayer = window.dataLayer || (window.dataLayer = []);

if (data.event) {

dataLayer.push({

‘event’: data.event,

‘postMessageData’: data

});

}

}catch(e){}

});

Как только наш dataLayer станет доступен, вы будете готовы обработать сообщение. Строка, которая отправляется с методом parent.postMessage, хранится в свойстве data того сообщения, что вы прослушиваете. И все это помещается на уровень данных, с которым вы в дальнейшем можете работать в диспетчере тегов Google:

dataLayer.push({

‘event’: data.event,

‘postMessageData’: data

Вы можете извлечь значение из postMessageData, создав пользовательскую переменную типа Переменная уровня данных. А триггером будет являться то событие, которое вы назначили в контейнере с iframe. В моем примере — это iframeClick.

Сохранив тег, активируйте предварительный просмотр и совершите нужное событие. Если вы все сделали верно, то:

на дочернем домене (iframe) вы увидите сработанный триггер и активированный тег Sender — postMessage — Click:

Отправка сообщения с дочернего домена iframe (gtm-exam.ru)

на родительском контейнере GTM отобразится событие, которое вы обозначили в контейнере iframe. В моем примере — это iframeClick:

Прослушанное событие на родительском фрейме (kafedra.digital)

Открыв API Call, вы увидите, как на уровень данных в переменной postMessageData передались необходимые значения, включая event и form. Чтобы извлечь значение Subscribe из form, создайте переменную уровня данных с именем postMessageData.form:

Переменная уровня данных postMessageData.form

Тогда эту информацию можно будет передать в счетчики аналитики вместе с совершенным событием:

Значение переменной postMessageData.form

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

После того, как вы с помощью прослушивателя на основном сайте проверили и зафиксировали сообщение, отправляемое с iframe, а также создали переменную уровня данных для передачи дополнительной информации в аналитику, вам осталось создать триггер специального события с вашим названием. У меня — это iframeClick:

Триггер специального события

Примечание: если вы будете импортировать контейнеры от measureschool.com к себе в диспетчер тегов Google, тогда переменную и триггер создавать не нужно, она будут добавлены к вам в контейнер автоматически. Ваша задача — проверить, чтобы все настройки из архива соответствовали вашим.

После того, как вы это сделаете, останется только создать соответствующие теги для отправки отслеживаемого события в инструменты аналитики. Для Universal Analytics — это тег с типом отслеживания Событие, используя любые параметры, которые лучше всего подходят для вашей настройки отслеживания. Например, так:

Тег Universal Analytics

Для Google Analytics 4 настройки могут быть такими:

Тег Google Analytics 4

Аналогичным образом в iframe можно отслеживать не только клики по кнопкам, но и другие события — заполнение полей формы, саму отправку формы и т.д. В этом случае в дочернем фрейме и контейнере GTM вы должны создать соответствующие триггеры и добавить их к пользовательскому HTML-тегу, который будет так же отправлять сообщение о совершенном событии, а на основном домене с помощью прослушивателя мы их будем отлавливать и далее использовать для передачи данных в аналитику.

Описанный выше пример является самым простым и эффективным способом отслеживания событий в iframe, когда из дочернего фрейма мы отравляем сообщение, а на родительском фрейме просто его считываем и производим последующие настройки и отправку данных в инструменты аналитики. Самое главное — это получить доступ к iframe, а для этого нужно попросить разработчика или владельца стороннего решения, которое вы используете, установить контейнер Google Tag Manager в этот виджет.

Отдельный контейнер GTM необязателен. Вы можете использовать одну учетную запись диспетчера тегов Google и создать в одном контейнере триггеры таким образом, чтобы они срабатывали только в соответствующем фрейме. Просто это будет чуть сложнее (нужно задавать дополнительные условия по активации триггеров и тегов на соответствующих доменах), и вы можете легко запутаться.

Поскольку наша задача — не только настроить механизм отслеживания различных событий и передать эту информацию от дочернего фрейма на родительский (это лишь один из способов настройки), но еще и связать все данные, которые совершает пользователь, с его уникальным идентификатором в системе аналитики. Отслеживание взаимодействий пользователя на разных доменах (дочернем и родительском), в условиях, когда на обоих присутствуют счетчики аналитики (Universal Analytics, Google Analytics 4), тесно связано с таким понятием, как междоменное отслеживание.

Что это значит? Когда страница загружается в <iframe>, она загружается в стороннем контексте (на другом домене), и любой доступ к данным браузера пользователя внутри <iframe> потребует от браузера разрешения сторонних файлов cookie для <iframe> сайта. Другими словами, контент, размещенный через iframe, имеет другое доменное имя, которое отличается от основного домена, и нам нужен к нему доступ. В этом мы убедились практически, когда настраивали прослушиватель в контейнере диспетчера тегов Google на основном сайте.

Например, есть список разных сайтов:

osipenkov.ru
umetrics.ru
graphanalytics.ru
techniqa.ru

Если какой-либо из вышеперечисленных сайтов загрузит любой другой сайт из списка в <iframe>, это содержимое будет загружено между сайтами, и любые операции с файлами cookie на встроенной странице потребуют доступа сторонних файлов cookie.

А если список сайтов будет относиться к одному и тому же домену, например:

edu.osipenkov.ru
qa.osipenkov.ru
learn.osipenkov.ru
osipenkov.ru

То любое взаимодействие между страницами из списка выше будет происходить в контексте одного и того же сайта, и доступ к файлам cookie не будет ограничен.

Примечание: о том, как настраивается междоменное отслеживание в Universal Analytics, читайте здесь; для Google Analytics 4 — здесь.

У Симо Ахавы (simoahava.com) в блоге есть несколько статей, посвященных отслеживанию междоменных фреймов. Некоторые из них уже устарели и не актуальны (те, что связаны с передачей файлов cookie от одного домена к другому), поскольку технологии не стоят на месте, и большинство браузеров теперь имеют защиту от сторонних файлов cookie.

Блокировка сторонних файлов cookie в Google Chrome

Но самый последний материал очень полезен и имеет для нас ценность. Это отслеживание межсайтовых фреймов без файлов cookie. В нем добавлена информация про Google Analytics 4. В своей статье Симо как раз подробно описывает два способа отслеживания событий в iframe между двумя сайтами без использования файлов cookie. Один из его способов заключается в том, что дочерний фрейм отправляет каждое отдельное dataLayer сообщение родительскому фрейму, так что дочернему фрейму не нужно ничего отслеживать самому. Вместо этого родитель обрабатывает отслеживание дочернего кадра. Фактически, это то, о чем шла речь в этой статье выше. У Симо есть отдельная схема, иллюстрирующая принцип работы:

Схема передачи данных от дочернего фрейма к родительскому

Вот как работает родительская страница:

родительская страница начинает прослушивать сообщения от дочернего фрейма сразу после загрузки диспетчера тегов от Google;
как только родительская страница получает сообщение от дочернего фрейма, она отвечает своим собственным сообщением;
если дочерний фрейм отправляет сообщение в dataLayer (совместимом формате), родительская страница помещает это сообщение в свой собственный уровень данных.

А вот как реагирует дочерняя страница (iframe):

страница <iframe> начинает отправлять сообщение родительскому фрейму, как только загружается Google Tag Manager;
как только родительская страница отправит сообщение, дочерний фрейм получит его и отправит все переданные ему сообщения методом dataLayer.push() на родительскую страницу.

2. Передача идентификатора клиента от родительскому фрейма к дочернему

Другой способ, напротив, передает уникальный идентификатор пользователя (Client ID) от родительского фрейма к дочернему, то есть наоборот. У Симо есть схема, которая демонстрирует принцип работы данного способа:

Схема передачи идентификатора клиента от родительскому фрейма к дочернему

Вот как работает родительская страница:

родительская страница начинает прослушивать сообщения <iframe> сразу после загрузки диспетчера тегов от Google;
как только родительская страница получает сообщение от дочернего фрейма, она начинает опрос трекера Google Analytics до тех пор, пока не будет достигнуто максимальное время ожидания;
как только средство отслеживания Google Analytics становится доступным, родительская страница отправляет идентификатор клиента обратно в домен <iframe>.

А вот как реагирует дочерняя страница (iframe):

страница <iframe> начинает отправлять сообщение родительскому фрейму, как только загружается Google Tag Manager;
как только родительская страница ответит идентификатором клиента (или истечет время ожидания), дочерняя страница перестанет отправлять сообщение.
дочерняя страница записывает идентификатор клиента (Client ID) в dataLayer.

В блоге Симо оба решения объединены в один набор пользовательских тегов HTML, которые вам необходимо создать в своем контейнере GTM. Один — для родительской страницы, а другой — для дочерней <iframe>. Давайте сделаем это прямо сейчас.

Настройка родительской страницы

Я буду продолжать демонстрацию работы на двух сайтах — kafedra.digital (родительская страница, родительский фрейм) и gtm-exam.ru (дочерняя страница, дочерний фрейм, iframe). Перейдите в свой контейнер Google Tag Manager и создайте тег типа Пользовательский HTML, вставив следующий код:

(function() {

// Universal Analytics tracking ID whose _ga cookie to use.

// If using GA4, you can leave this setting untouched.

var trackingId = ‘UA-XXXXX-Y’;

// Maximum time in milliseconds to wait for GA tracker to load.

// Again, irrelevant for GA4.

var maxGATime = 2000;

// Set to the origin («https://www.domain.com») of the iframe you want to communicate with

var childOrigin = ‘https://www.iframe-domain.com’;

// Don’t touch anything that follows

var pollInterval = 200;

var postCallback = function(event) {

if (event.origin !== childOrigin) return;

if (event.data !== ‘childReady’ && !event.data.event) return;

if (event.data === ‘childReady’) {

// Send event that parent is ready

event.source.postMessage(‘parentReady’, event.origin);

var pollCallback = function() {

// Stop polling if maxTime reached

maxGATime -= pollInterval;

if (maxGATime <= 0) window.clearInterval(poll);

// Only proceed if GA loaded and tracker accessible

var ga = window[window[‘GoogleAnalyticsObject’]];

if (ga && ga.getAll) {

// Get tracker that matches the Tracking ID you provided

var tracker = ga.getAll().filter(function(t) {

return t.get(‘trackingId’) === trackingId;

}).shift();

// Send message back to frame with Client ID

if (tracker) {

event.source.postMessage({

event: ‘clientId’,

clientId: tracker.get(‘clientId’)

}, event.origin);

}

// Stop polling if not already done so

window.clearInterval(poll);

}

};

// Start polling for Google Analytics tracker

var poll = window.setInterval(pollCallback, pollInterval)

}

// Push dataLayer message from iframe to dataLayer of parent

if (event.data.event) {

window.dataLayer.push(event.data);

}

};

// Start listening for messages from child frame

window.addEventListener(‘message’, postCallback);

})();

</script>

Если вы используете отслеживания для Universal Analytics, то в строке:

var trackingId = ‘UA-XXXXX-Y’

Вам необходимо изменить значение идентификатора отслеживания UA-XXXXX-Y на свой собственный для родительской страницы. Взять его можно в интерфейсе Universal Analytics на уровне ресурса Администратор — Отслеживание — Код отслеживания:

Идентификатор отслеживания родительской страницы

При использовании Google Analytics 4 вы можете оставить этот параметр нетронутым.

В еще одной строке:

var childOrigin = ‘https://www.iframe-domain.com’;

Вы должны прописать домен дочерней страницы (iframe). Крайне важно, что в конце домена не должно быть косой черты, поскольку она является частью компоненты пути, а не источника. Для моего примера — это будет https://kafedra.digital. В качестве триггера активации вы можете использовать триггер на Все страницы (All Pages), а можете задать дополнительное условие, которое срабатывает только на той странице(ах), где размещен iframe. Итоговый тег в GTM будет выглядеть так:

Пользовательский HTML тег на родительской странице

Симо в своей статье подробно поясняет как работает данный код. Я не буду здесь приводить расшифровку каждой строчки, каждого куска кода. Вы можете открыть его статью и почитать подробности там. Если кратко, то когда дочерний фрейм отправляет методом postMessage на родительскую страницу, прослушиватель запускает и выполняет функцию postCallback. Если полученное сообщение не ожидалось (например, пришло из другого места <iframe> или имеет неправильное содержимое), обратный вызов останавливает выполнение. Если сообщение пришло из нужного <iframe>, первое, что нужно сделать, это уведомить дочерний фрейм о том, что родитель получил сообщение и готов начать двустороннее общение.

Затем window.setInterval начинает опрашивать родительскую страницу каждые 200 миллисекунд до 2 полных секунд по умолчанию. При каждом опросе скрипт проверяет, создан ли трекер Google Analytics. Если да, то скрипт берет уникальный идентификатор пользователя (clientId) из трекера и отправляет обратно в <iframe>, использующий event.source.postMessage(). После этого опрос вручную останавливается, чтобы избежать многократной отправки идентификатора клиента в <iframe>.

По сути, родительская страница должна ждать две вещи:

чтобы дочерняя страница сигнализировала о готовности получать сообщения;
чтобы был доступен трекер Google Analytics, чтобы с него можно было вытащить Client ID.

Последний блок кода Симо проверяет, содержит ли сообщение из дочернего фрейма объект со свойством event, и в этом случае он проталкивает весь этот объект на родительскую страницу в dataLayer. Таким образом, родительская страница будет прослушивать dataLayer, пересылаемый из встроенного <iframe>.

Теперь вы можете создавать теги, триггеры и переменные, которые реагируют на эти сообщения. Все триггеры будут иметь триггер специального события. Это связано с тем, что все события, отправленные из фрейма, будут добавляться с префиксом iframe.

Например, если вы хотите активировать тег при нажатии на кнопку Отправить в <iframe> (мой пример выше), триггер на родительской странице будет выглядеть так:

События с префиксом iframe.

Но это же событие можно прослушивать и на дочерней странице. Так или иначе требуется много ручной настройки в GTM, чтобы все это заработало. Но это может сделать вашу настройку отслеживания гибкой, так как вам не нужно будет встраивать дополнительный код в файл <iframe>.

Каждое сообщение, отправленное из <iframe>, автоматически дополняется некоторой информацией на уровне страницы:

iframe: {

pageData: {

url: «https://gtm-exam.ru/dom/index.php»,

title: «Пример отслеживания отправки формы»

}

Если вы хотите обновить теги родительской страницы для использования данных <iframe> на уровне страницы, вам необходимо создать переменные уровня данных для iframe.pageData.url (URL-адрес <iframe> страницы) и iframe.pageData.title (заголовок страницы).

Как только вы все сделаете, вы готовы настроить <iframe> страницу.

Настройка дочерней страницы

В этом руководстве (Симо — в своем, я — в своем) рассматривается довольно типичный случай использования, когда с <iframe> контентом взаимодействуют только как со встроенным элементом на странице. Для этого нужно будет сделать три вещи в контейнере Google Tag Manager на <iframe> странице:

создать пользовательский тег HTML, который взаимодействует с родительской страницей;
обновить настройки для всех ваших тегов Google Analytics;
обновить триггеры для ваших тегов Google Analytics, чтобы они не срабатывали, пока не получат идентификатор клиента (Client ID) от родителя.

Выполним их все поэтапно. Создайте новый пользовательский HTML тег со следующим кодом:

100

101

(function() {

// If not in iframe, do nothing

try {

if (window.top === window.self) return;

} catch(e) {}

// Set to false to prevent dataLayer messages from being sent to parent

var sendDataLayerMessages = true;

// Set the prefix that will be used in the event name, and under which all

// the dataLayer properties will be embedded

var dataLayerMessagePrefix = ‘iframe’;

// Set to parent origin («https://www.domain.com»)

var parentOrigin = ‘https://www.parent-domain.com’;

// Maximum time in milliseconds to poll the parent frame for ready signal

var maxTime = 2000;

// Don’t touch anything that follows

var pollInterval = 200;

var parentReady = false;

var postCallback = function(event) {

if (event.origin !== parentOrigin) return;

if (event.data.event !== ‘clientId’ && event.data !== ‘parentReady’) return;

if (event.data.event === ‘clientId’) {

window.dataLayer.push({

event: ‘clientId’,

clientId: event.data.clientId

});

}

if (event.data === ‘parentReady’ && !parentReady) {

window.clearInterval(poll);

if (sendDataLayerMessages) startDataLayerMessageCollection();

parentReady = true;

}

};

var pollCallback = function() {

// If maximum time is reached, stop polling

maxTime -= pollInterval;

if (maxTime <= 0) window.clearInterval(poll);

// Send message to parent that iframe is ready to retrieve Client ID

window.top.postMessage(‘childReady’, parentOrigin);

};

var createMessage = function(obj) {

if (!Array.isArray(obj) && typeof obj === ‘object’) {

var flattenObj = JSON.parse(JSON.stringify(obj));

var message = {};

// Add metadata about the page into the message

message[dataLayerMessagePrefix] = {

pageData: {

url: document.location.href,

title: document.title

}

};

for (var prop in flattenObj) {

if (flattenObj.hasOwnProperty(prop) && prop !== ‘gtm.uniqueEventId’) {

if (prop === ‘event’) {

message.event = dataLayerMessagePrefix + ‘.’ + flattenObj[prop];

} else {

message[dataLayerMessagePrefix][prop] = flattenObj[prop];

}

if (!message.event) message.event = dataLayerMessagePrefix + ‘.Message’;

return message;

}

return false;

};

var startDataLayerMessageCollection = function() {

// Send the current dataLayer content to top frame, flatten the object

window.dataLayer.forEach(function(obj) {

var message = createMessage(obj);

if (message) window.top.postMessage(message, parentOrigin);

});

// Create the push listener for future messages

var oldPush = window.dataLayer.push;

window.dataLayer.push = function() {

var states = [].slice.call(arguments, 0);

states.forEach(function(arg) {

var message = createMessage(arg);

if (message) window.top.postMessage(message, parentOrigin);

});

return oldPush.apply(window.dataLayer, states);

};

// Start polling the parent page with «childReady» message

var poll = window.setInterval(pollCallback, pollInterval);

// Start listening for messages from the parent page

window.addEventListener(‘message’, postCallback);

})();

</script>

В строке:

var parentOrigin = ‘https://www.parent-domain.com’;

Добавьте домен родительской страницы. Крайне важно, что в конце домена не должно быть косой черты, поскольку она является частью компоненты пути, а не источника. Для моего примера — это будет https://kafedra.digital.

В качестве триггера активации используйте триггер Просмотр страницы с дополнительным условием активации, которое срабатывает только на той странице(ах), где размещен iframe:

Триггер с дополнительным условием активации

Примечание: если <iframe> — это одностраничное приложение (SPA-сайт), вы все равно должны активировать пользовательский HTML-тег только для триггера Просмотр страницы, а не при каждом изменении страницы SPA.

Итоговый тег в GTM будет выглядеть так:

Пользовательский HTML тег на дочерней странице

Подробнее о том, как работает этот код, читайте в блоге у Симо Ахавы. Если совсем кратко, то все, что добавляется в массив dataLayer внутри <iframe>, перенаправляется на родительскую страницу, чтобы родительская страница также могла обрабатывать отслеживание взаимодействий и событий внутри <iframe>.

После проделанных настроек вы можете активировать режим отладки Google Tag Manager и проверить, начали ли прослушиваться все текущие события. Если да, то на шкале отладки на родительской странице вы увидите события с префиксом iframe., а на дочерней странице событие clientId, где на уровне данных передается параметр clientId с вашим текущим идентификатором:

Режим отладки после создания двух тегов с кодами Симо

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

Уникальная иконка позволяет отличать загрузку одной страницы (и события) от другой

Родительская страница прослушивает dataLayer сообщения, пересылаемые из iframe. Это могут быть iframe.clienId, iframe.gtm.load, iframe.gtm.dom. iframe.gtm.js и т.д. Следовательно, когда вы будете создать триггеры специального события, то вам нужно это будет делать так же с префиксом iframe. Например, все то же отслеживание клика по кнопке Отправить внутри iframe вызывается событие iframe.gtm.click:

Отслеживание клика по кнопке «Отправить» (пример)

Создание триггеров, переменных и тегов

Чтобы отслеживать действия и отправлять их в Google Analytics, определите, где вы их будете отслеживать — на родительской странице или дочерней (iframe). От этого будут зависеть дальнейшие настройки. Поскольку код Симо — универсальный в плане отслеживания (вы можете настраивать отслеживания как на родительской странице, так и на дочерней), то именно вы выбираете ту реализацию, которая подходит для вашего проекта. Если вы будете отслеживать на родительской странице, то все переменные и триггеры будут идти с префиксом iframe. Если на дочерней, то достаточно обычных настроек.

Главное, чтобы ни один из ваших тегов не срабатывал, если Client ID еще недоступен. В этом и заключается основное условие корректной работы междоменного отслеживания — не разрывать сеанс от одного домена к другому, не менять источник трафика и передавать идентификатор клиента (Client ID) от одного сайта к другому. Поэтому вам потребуется обновить существующие триггеры, чтобы они не срабатывали до тех пор, пока clientId не получит допустимое значение.

Но перед этим создайте пользовательскую переменную уровня данных с именем clientId:

Переменная уровня данных clientId

Событие clientId на дочерней странице (iframe) передает на уровень данных уникальный идентификатор пользователя. Это можно наблюдать в режиме предварительного просмотра:

Client ID на дочерней странице

Для извлечения этого значения мы и создали переменную уровня данных DLV — clientId. Аналогично с родительской страницей, куда передаются события с префиксом iframe.

Client ID на родительской странице

Чтобы отслеживать данные в Google Analytics с <iframe> страницы, вам необходимо настроить все теги Google Analytics со следующими параметрами. Для Universal Analytics Поля, которые необходимо задать:

storage — none (чтобы избежать сбоя трекера, если он не может записать файл cookie идентификатора клиента);
clientId — переменная уровня данных DLV — clientId, созданная на предыдущем шаге (извлекает значение из dataLayer);

Тег Universal с дополнительными настройками

Поскольку файлы cookie в <iframe> больше не будут использоваться для сохранения Client ID, вам необходимо установить значение none для поля storage, а для поля clientId задать значение переменной уровня данных.

Примечание: если вы переопределяете настройки в каждом теге Google Analytics, то вам необходимо добавить поля storage и clientId для всех тегов вручную. Если у вас используется переменная типа Настройки Google Аналитики, тогда вам нужно сделать это один раз в ней.

Переменная «Настройки Google Аналитики»

Вам так же следует обновить триггеры для ваших тегов Google Analytics, чтобы они не срабатывали, пока не получат идентификатор клиента от родителя. Ведь если даже при просмотре страницы тег Google Analytics активируется, но Client ID не будет передан, это приведет к некорректному сбору данных в счетчике:

Тег активирован, но Client ID не был передан (ошибка)

Для этого создайте триггер типа Специальное событие с названием clientId:

Триггер специального события clientId

Для тега Universal Analytics с типом отслеживания Просмотр страницы установите такие настройки:

Тег Universal Analytics с типом отслеживания «Просмотр страницы»

Помимо полей, которые необходимо задать, в качестве триггера активации наряду с All Pages добавьте триггер специального события с clientId, а также триггер исключения от дочерней страницы iframe, в котором дополнительно укажите условие активации — DLV — clientId содержит undefined:

DLV — clientId содержит undefined

Если Client ID будет содержать undefined (не будет определен), то триггер не будет активировать тег, потому что он добавлен в качестве исключения.

Активировав режим отладки, вы можете проверить промежуточный шаг. Если бы мы использовали в теге только триггер активации All Pages (Container Loaded), тогда бы он сработал до того момента, как Client ID был бы доступен на странице. Но благодаря дополнительному триггеру специального события и триггеру исключения, которые были установлены ранее, тег Universal Analytics активируется после того, как уникальный идентификатор пользователя был определен. Следовательно, данные в аналитику будут отправлены корректно вместе с нужным Client ID пользователя:

Тег Universal Analytics с переданным значением clientId

Вернемся к примеру выше, когда мы настраиваили клик по кнопку Отправить внутри <iframe>. Используя нужный триггер (у меня это Клик — Все элементы), добавьте к нему дополнительное условие активации триггера DLV — clientId не содержит undefined согласно рекомендации Симо, чтобы он не срабатывал до тех пор, пока не получит допустимое значение Client ID.

DLV — clientId не содержит undefined

Тогда тег для Universal Analytics будет выглядеть так:

Пример тега с событием для Universal Analytics

Для Google Analytics 4 необходимо использовать способ №1, когда отслеживание событий ведется от дочернего фрейма к родительскому. Поскольку для GA3 и GA4 используются разные подходы в настройке, я рекомендую создавать два отдельных контейнера GTM и устанавливать каждый из них на соответствующий домен. Так меньше вероятность запутаться в этих отслеживаниях.

Резюме

Тема отслеживания iframe на двух разных сайта — одна из самых сложных настроек Google Tag Manager. Про это пишет и сам Симо в своей статье; могу с уверенностью подтвердить и я, после того, как на основе большей части его материала (и других авторов) пытался разобраться в том, как это все устроено, и написать свой. Безусловно, если у вас появилась такая задача, вы должны изначально продумать следующее:

возможно ли установить контейнер Google Tag Manager на iframe страницу? Если нет, то отслеживание в принципе невозможно;
в какой счетчик аналитики вы будете отправлять данные? В Universal Analytics или в Google Analytics 4? Или в оба? От этого будет зависеть дальнейшая реализация. Междоменное отслеживание в Universal Analytics выполняется как с использованием параметра связывания allowLinker, так и без использования файлов cookie, что является приоритетной настройкой из-за постоянных ограничений самих браузеров и защиты от сторонних файлов cookie;
какие события вы хотите отслеживать? Список того, что требуется отслеживать, не менее важен, чем сам способ выполнения. Если это одно событие — это одна степень сложности. Если таких событий много (и скроллинг, и клики по кнопкам, и отправка формы, и отслеживание каких-то вложенных элементов), то это совсем другой уровень настройки. Это нужно продумать с самого начала.

Все, что происходит внутри дочернего фрейма iframe, не будет известно родительскому фрейму, если только не будет отправлено сообщено iframe. И если домен iframe отличается от родительского фрейма, значения cookie будут отличаться по умолчанию.

Именно поэтому самый лучший вариант — это вообще не использовать на сайте iframe, по крайней мере специально. Но если это невозможно в силу разных обстоятельств (у вас должен стоять сторонний виджет оплаты, бронирования, какое-то решение, которое принимает обращения на сайте и т.д.), тогда сначала старайтесь использовать возможности самого сервиса. Некоторые из них имеют готовые настройки отслеживания для самых популярных система аналитики. Если такой функционал у них не заложен, попробуйте данную задачу решить командно вместе с разработчиками данного решения. Если и это затруднительно, попросите их хотя бы установить контейнер Google Tag Manager, к которому у вас есть доступ, а дальше уже выполнять отслеживание.

Ну и если после прочитанной статьи у вас осталось больше вопросов, чем ответов, то начните свое отслеживание iframe с помощью Google Tag Manager именно со способа №1 и кодов из архива от measureschool.com в самом начале статьи. И только спустя какое-то время, когда у вас появится примерное понимание как все это работает, переходить на решение от Симо Ахавы.

Список используемой литературы

Двусторонняя аналитика партнерского iframe-виджета с помощью Google Tag Manager (habr.com)
Tracking Iframes: How to Track Conversions in Iframes with Google Tag Manager (measureschool.com)
How to Track iframes with Google Tag Manager (marketlytics.com)
Tracking Form Submissions In Iframes — Google Analytics & Iframes, Pt 1 (bounteous.com)
Tracking Complex Interactions In Iframes On The Same Domain – Google Analytics & Iframes, Pt 2 (bounteous.com)
Iframe cross-domain tracking in Google Tag Manager (simoahava.com)
Tracking cross-domain iframes — Upgraded solution (simoahava.com)
Cross-Domain Measurement for iFrames in Google Analytics (measurementmarketing.io)
Setting Up Cross-Domain Measurement with Iframes, no cookies (measurementmarketing.io)

Источник