Что такое iframe и почему их отслеживание важно?
<iframe> (Inline Frame) – это HTML-элемент, позволяющий встраивать одно HTML-документ в другой. Это часто используется для встраивания видео, карт, форм или другого контента с внешних сайтов. Отслеживание взаимодействия пользователей с iframe-контентом критически важно для получения полной картины поведения пользователя на вашем сайте. Без этого анализа вы можете упустить важные данные о вовлеченности и конверсиях.
Проблемы при отслеживании iframe и как GTM помогает их решить
Одной из основных проблем является то, что контент внутри iframe, как правило, находится в другом домене. Это создает сложности с доступом к DOM (Document Object Model) iframe из родительской страницы из-за ограничений безопасности браузера (Same-Origin Policy). Google Tag Manager (GTM) позволяет обойти эти ограничения, используя postMessage API для безопасной передачи данных между iframe и родительской страницей, а затем отправлять эти данные в Google Analytics.
Обзор необходимых инструментов: Google Tag Manager и Google Analytics
Для отслеживания iframe потребуется:
- Google Tag Manager (GTM): Для управления тегами и триггерами на вашем сайте и в iframe.
- Google Analytics (GA): Для анализа собранных данных.
Настройка Google Tag Manager для отслеживания iframe
Установка GTM на основной сайт (родительскую страницу)
Убедитесь, что GTM установлен на родительской странице, содержащей iframe. Код GTM должен быть размещен сразу после открывающего тега <body> на всех страницах сайта. Этот код можно найти в интерфейсе GTM.
Проверка правильности установки GTM
Чтобы проверить, правильно ли установлен GTM, используйте расширение для Chrome, например, Google Tag Assistant. Оно покажет, какие теги GTM срабатывают на странице.
Создание пользовательских событий (Custom Events) для взаимодействия с iframe
Определите, какие взаимодействия с iframe вы хотите отслеживать (например, отправка формы, клики по кнопкам, просмотр видео). Для каждого из этих взаимодействий необходимо будет создать пользовательское событие (Custom Event), которое будет отправляться из iframe на родительскую страницу.
Отправка данных из iframe в Google Tag Manager
Настройка PostMessage API для передачи данных между iframe и родительской страницей
postMessage API – это механизм безопасной междоменной коммуникации. Он позволяет скриптам из разных источников обмениваться данными.
Реализация JavaScript-кода в iframe для отправки данных
Внутри iframe необходимо реализовать JavaScript-код, который будет отправлять данные на родительскую страницу при возникновении определенных событий. Вот пример кода:
/**
* Функция для отправки данных на родительскую страницу.
* @param {string} eventName - Название события.
* @param {object} data - Объект с данными для отправки.
*/
function sendDataToParent(eventName: string, data: object): void {
if (window.parent) {
window.parent.postMessage({
event: eventName,
data: data
}, '*'); // Рекомендуется указать целевой домен вместо '*'
}
}
// Пример отправки данных при отправке формы
const form = document.getElementById('myForm');
if (form) {
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(form);
const formDataObject: { [key: string]: string } = {};
formData.forEach((value, key) => formDataObject[key] = value.toString());
sendDataToParent('formSubmit', formDataObject);
});
}
Важно: Вместо '*' в postMessage рекомендуется указывать целевой домен родительской страницы для повышения безопасности.
Примеры данных, которые можно отслеживать: отправка формы, клики, просмотры видео
Можно отслеживать:
- Отправку форм: Передавать данные формы.
- Клики по кнопкам: Передавать ID кнопки и текст.
- Просмотры видео: Передавать процент просмотренного видео, название видео.
Настройка триггеров и тегов в Google Tag Manager
Создание триггера на основе пользовательского события (Custom Event)
В GTM необходимо создать триггер, который будет срабатывать при получении сообщения от iframe. Тип триггера – Пользовательское событие (Custom Event). В поле Имя события укажите имя события, которое вы отправляете из iframe (например, 'formSubmit').
Настройка тега Google Analytics для отправки данных об iframe
Создайте тег Google Analytics (обычно GA4 Event), который будет отправлять данные о взаимодействии с iframe в Google Analytics. В настройках тега используйте переменные GTM для получения данных, переданных из iframe через postMessage API.
Например, если вы отправляете данные о форме, можно создать переменные GTM для получения значений полей формы и передать их в качестве параметров события GA.
Тестирование и отладка отслеживания iframe с помощью GTM Preview Mode
Используйте режим предварительного просмотра GTM (Preview Mode) для тестирования и отладки отслеживания iframe. В этом режиме вы можете видеть, какие теги срабатывают, какие данные они отправляют, и какие ошибки возникают. Убедитесь, что триггер срабатывает при получении сообщения от iframe, и что тег Google Analytics отправляет правильные данные.
Расширенные возможности и советы по отслеживанию iframe
Отслеживание нескольких iframe на одной странице
Если на странице несколько iframe, необходимо идентифицировать, из какого iframe пришло сообщение. Можно передавать дополнительный параметр (например, iframeId) в сообщении postMessage.
Обработка ошибок и отладка проблем с отслеживанием
Проверяйте консоль браузера на наличие ошибок JavaScript как на родительской странице, так и в iframe. Убедитесь, что имена событий и переменные в GTM соответствуют именам событий и данным, отправляемым из iframe.
Использование Data Layer для структурирования данных из iframe
Вместо непосредственной отправки данных в Google Analytics можно отправлять данные в Data Layer GTM. Это позволяет более гибко настраивать теги и использовать данные для других целей (например, для персонализации контента).
function sendDataToDataLayer(eventName: string, data: object): void {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': eventName,
'eventData': data
});
}
// Пример использования:
sendDataToDataLayer('videoView', { videoName: 'MyVideo', watchedPercentage: 50 });
В GTM настройте триггер на событие videoView и тег, который будет отправлять данные из eventData в Google Analytics.
Альтернативные методы отслеживания (если PostMessage API недоступен)
В редких случаях postMessage API может быть недоступен или заблокирован. В этом случае можно рассмотреть альтернативные методы, такие как:
- Взаимодействие через прокси-сервер: Использовать серверную часть для передачи данных между iframe и родительской страницей. Этот метод сложнее в реализации.
- Совместное использование домена: Если это возможно, разместить iframe и родительскую страницу на одном домене. В этом случае ограничения Same-Origin Policy не будут применяться.
Однако, postMessage API – это наиболее рекомендуемый и безопасный способ отслеживания iframe.