Это старая версия документа!
Настройка счетчика Яндекс.Метрики для фрейма Ticketland
Особенности настройки счетчика для встраиваемого фрейма Ticketland требуют специального подхода, так как фрейм работает в изолированном контексте.
❗ ВАЖНО: Для корректного отслеживания в фрейме требуется дополнительная настройка, отличная от стандартной установки на сайте.
Особенности отслеживания в iframe
Проблемы стандартной установки
При обычной установке кода Яндекс.Метрики в iframe могут возникнуть следующие проблемы:
- Потеря данных о источниках трафика
- Некорректное определение рефереров
- Проблемы с cookies и идентификацией посетителей
- Ограничения браузеров для кросс-доменных iframe
Рекомендуемое решение
Использование параметров URL для передачи данных из родительской страницы во фрейм.
Настройка счетчика для фрейма
Шаг 1: Создание отдельного счетчика
Рекомендуется создать отдельный счетчик специально для фрейма:
1. Перейдите в [[https://metrika.yandex.ru/list|Яндекс.Метрику]] 2. Нажмите "Добавить счетчик" 3. Настройки: - **Имя счетчика:** "Фрейм Ticketland - [название сайта]" - **Адрес сайта:** Укажите основной домен сайта - **Часовой пояс:** Ваш регион
Шаг 2: Модификация кода iframe
Добавьте параметры в URL фрейма для передачи данных из родительской страницы:
<!-- Стандартный код iframe --> <iframe src="https://ticketland.ru/widget?event=123"></iframe> <!-- Модифицированный код с передачей параметров --> <iframe src="https://ticketland.ru/widget?event=123&ymuid=<?php echo $yandex_uid; ?>&ref=<?php echo urlencode($_SERVER['HTTP_REFERER']); ?>"></iframe>
Шаг 3: Специальный код для фрейма
Используйте этот модифицированный код Яндекс.Метрики внутри фрейма:
<!-- Yandex.Metrika counter для фрейма --> <script type="text/javascript"> // Получаем параметры из URL var urlParams = new URLSearchParams(window.location.search); var externalRef = urlParams.get('ref'); var externalYmuid = urlParams.get('ymuid'); (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); // Настройка для фрейма с внешними параметрами ym(12345679, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true, trackHash: true, ut: "noindex", // Передача внешних параметров params: { externalRef: externalRef || document.referrer, externalYmuid: externalYmuid } }); // Специальная обработка для фрейма if (window.parent !== window) { ym(12345679, 'params', { iframe: true, parentHost: document.referrer ? new URL(document.referrer).hostname : 'direct' }); } </script> <noscript><div><img src="https://mc.yandex.ru/watch/12345679" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
Шаг 4: Передача данных между окнами
Для кросс-доменной коммуникации добавьте этот код на родительскую страницу:
// Код для родительской страницы window.ticketlandFrameTracker = { init: function(iframeId) { var iframe = document.getElementById(iframeId); var ymuid = this.getYandexUid(); // Обновляем src iframe с параметрами var src = iframe.src; if (src.indexOf('?') === -1) { src += '?'; } else { src += '&'; } src += 'ymuid=' + ymuid + '&ref=' + encodeURIComponent(document.referrer); iframe.src = src; }, getYandexUid: function() { var matches = document.cookie.match(/_ym_uid=([^;]+)/); return matches ? matches[1] : ''; } }; // Инициализация при загрузке фрейма document.addEventListener('DOMContentLoaded', function() { window.ticketlandFrameTracker.init('ticketland-frame'); });
Отслеживание конверсий в фрейме
Настройка целей для покупки билетов
В интерфейсе Метрики создайте цели:
1. **"Начало оформления заказа"** - когда пользователь выбирает билеты 2. **"Заполнение данных"** - на этапе ввода персональных данных 3. **"Успешная оплата"** - завершение покупки
Код для отслеживания событий в фрейме
// Пример отслеживания событий покупки function trackTicketPurchase(eventData) { ym(12345679, 'reachGoal', 'ticket_purchase', { event_id: eventData.eventId, ticket_count: eventData.ticketCount, total_amount: eventData.amount, currency: eventData.currency }); } // Отслеживание шагов воронки function trackFunnelStep(stepName, stepData) { ym(12345679, 'params', { funnel_step: stepName, step_data: JSON.stringify(stepData) }); }
Решение специфических проблем фрейма
Проблема: Блокировка третьих-party cookies
Решение: Использование первого-party cookies через прокси:
// Альтернативный метод идентификации var visitorId = generateVisitorId(); // Генерация собственного ID ym(12345679, 'userParams', { VisitorID: visitorId, FirstVisit: new Date().toISOString() });
Проблема: Потеря источника трафика
Решение: Явная передача UTM-меток:
// Передача UTM-параметров var utmParams = { utm_source: getUrlParam('utm_source'), utm_medium: getUrlParam('utm_medium'), utm_campaign: getUrlParam('utm_campaign') }; ym(12345679, 'params', utmParams);
Проверка работы в фрейме
Методы отладки
1. **Проверка в консоли фрейма:** - Откройте инструменты разработчика - Перейдите в контекст фрейма - Проверьте наличие запросов к mc.yandex.ru
2. **Проверка параметров:** - Добавьте `?__ym_debug=1` в URL фрейма - Проверьте передаваемые параметры
3. **Мониторинг в реальном времени:** - Используйте отчет "Мониторинг" в Метрике - Фильтруйте по hostname фрейма
Пример корректной работы
[Яндекс.Метрика] counter 12345679 hit https://ticketland.ru/widget?event=123 [Яндекс.Метрика] Параметры: {externalRef: "https://example.com", iframe: true} [Яндекс.Метрика] Цель достигнута: ticket_purchase
Интеграция с электронной коммерцией
Настройка данных о покупках
Для точного отслеживания ROI настройте передачу данных о заказах:
// Передача данных о заказе ym(12345679, 'reachGoal', 'purchase', { orderPrice: 2500, orderId: 'ORD-12345', currency: 'RUB', products: [ { id: 'TICKET-001', name: 'Билет на концерт', price: 1250, quantity: 2 } ] });
FAQ по фрейму Ticketland
❓ Почему не отслеживаются посетители во фрейме?
Ответ: Возможно, блокируются кросс-доменные запросы. Проверьте настройки CORS и используйте передачу параметров через URL.
❓ Как отслеживать источники трафика для фрейма?
Ответ: Передавайте referrer и UTM-метки через параметры URL при загрузке фрейма.
❓ Нужен ли отдельный счетчик для фрейма?
Ответ: Рекомендуется использовать отдельный счетчик для чистоты данных и избежания дублирования.
❓ Как настроить цели для этапов покупки?
Ответ: Используйте JavaScript-события на каждом этапе воронки покупки в коде фрейма.
🎫 Совет: Регулярно тестируйте отслеживание, совершая тестовые покупки через фрейм и проверяя данные в реальном времени.
Интеграции с виджетом
Продавая билеты на своём сайте, зачастую возникает потребность анализировать продажи средствами web-аналитики или отправлять данные в рекламные системы для оптимизации маркетинговых активностей. В данной инструкции вы узнаете, как интегрировать виджет с аналитикой и социальными сетями.
❗
Настройка счетчика Яндекс.Метрики на сайте
Актуальная документация Яндекса по подключению, созданию, настройке и администрированию Яндекс.Метрики
https://yandex.ru/support/metrica/ru/general/check-counter — Проверка счетчика
https://yandex.ru/support/metrica/ru/general/check-counter — Отладчик работы счетчика Метрики
Создание Счетчика в Яндекс.Метрике
1. Подготовительные действия
- Ваша учетная запись Яндекс (Яндекс.ID). Если ее нет, необходимо зарегистрироваться.
- Определение основных доменов сайта, для которых будет собираться статистика.
2. Процедура создания
- Зайдите в личный кабинет Яндекс.Метрики и нажмите кнопку «Добавить счетчик»
- На странице нового счетчика заполните обязательные поля:
- Имя счетчика: – Укажите понятное название для идентификации (например, «Основной сайт company.com»).
- Адрес сайта: – Введите основной домен без http: или https: (например, example.ru). Кириллические домены вводите кириллицей .
- Часовой пояс: – Выберите параметры, по которым будет вестись отчетность.
- Валюта: –
- Настройте дополнительно:
- Вебвизор, карта скроллинга, аналитика форм – рекомендуется включить для детального анализа поведения пользователей.
- Автоматические цели – позволяет автоматически отслеживать клики по email, телефонам и другим элементам.
- Электронная коммерция – активируйте, если сайт является интернет-магазином.
- Контентная аналитика – полезна для блогов и контент-проектов.
1. Настройки электронной торговли внутри личного кабинета Яндекс.Метрики и на сайте: Чтобы данные в электронную торговлю начали поступать, необходимо убедиться, что код на сайте и настройки вашего счетчика позволяют это делать. Для этого:
- Зайдите в личный кабинет Яндекс.Метрики
- Перейдите в раздел настройки
- Убедитесь, что у вас включена настройка «Электронная коммерция». Или включите ее и сохраните. Имя контейнера данных должно быть равно «dataLayer».
- Убедитесь, что код на странице настройки соответствует тому, что размещен у вас на сайте. (Если ранее код на сайте не был установлен, то не беспокойтесь, внутри файла GTM при импорте подключается сразу правильный код).
- В случае необходимости, замените код на своем сайте, если ранее настройка электронной торговле не была подключена.
3. Настройки целей в Яндекс.Метрике:
- Перейдите в раздел «Цели», нажмите «Добавить цель».
- В появившемся окне впишите название цели.
- Выберите тип «Тип условия» - «JavaScript-событие»
- Укажите «Идентификатор цели», равный одному из представленных в таблице ниже, в зависимости от того, какую цель хотите создать.
Название | Идентификатор цели |
Открытие виджета | tl_open_frame |
Добавление в корзину | tl_add_to_cart |
Покупка | tl_purchase |
Интеграция с социальными сетями
В рамках интеграции ниже можно подключить счетчики ВК и МайТаргет. События фрейма интегрированы только со Вконтакте: при открытии фрейма уходит событие VK.Goal('conversion'), при добавлении в корзину VK.Goal('purchase');, при покупке VK.Goal('purchase');.
</del>- Скачайте файл интеграции по ссылке https://drive.google.com/file/d/1dmzekYcQ4hwCUrtzUyx7t4hbQGJv_6u4/view?usp=sharing - Откройте вашу панель управления GTM и нажмите «Администрирование». - Выберите пункт настройки «Импортировать контейнер» - Выберите скачанный в пункте 1 файл. Выберите рабочую область «Существующая» → «Default Workspace» и вариант импорта «Объединить» → «Перезаписать конфликтующие теги, триггеры и переменные.» В конце нажмите «Подтвердить». - Далее перейдите в раздел переменные - Внесите id ваших пикселей в настройках переменных. - Опубликуйте версию контейнера, нажав в верхнем правом углу кнопку «Опубликовать» - В появившемся окне нажимте кнопку «Опубликовать» повторно, а также кнопку «Далее». После этого настройки контейнера успешно применятся.
После этого данные начнут поступать в рекламные кабинеты. По необходимости отключите ненужные теги.</del>