Это старая версия документа!


Настройка счетчика Яндекс.Метрики для фрейма 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-аналитики или отправлять данные в рекламные системы для оптимизации маркетинговых активностей. В данной инструкции вы узнаете, как интегрировать виджет с аналитикой и социальными сетями.

Настройка счетчика Яндекс.Метрики на сайте

Создание Счетчика в Яндекс.Метрике

1. Подготовительные действия

  • Ваша учетная запись Яндекс (Яндекс.ID). Если ее нет, необходимо зарегистрироваться.
  • Определение основных доменов сайта, для которых будет собираться статистика.

2. Процедура создания

  1. Зайдите в личный кабинет Яндекс.Метрики и нажмите кнопку «Добавить счетчик»
  1. На странице нового счетчика заполните обязательные поля:
  • Имя счетчика: – Укажите понятное название для идентификации (например, «Основной сайт company.com»).
  • Адрес сайта: – Введите основной домен без http: или https: (например, example.ru). Кириллические домены вводите кириллицей .
  • Часовой пояс: – Выберите параметры, по которым будет вестись отчетность.
  • Валюта:
  1. Настройте дополнительно:
  • Вебвизор, карта скроллинга, аналитика форм – рекомендуется включить для детального анализа поведения пользователей.
  • Автоматические цели – позволяет автоматически отслеживать клики по email, телефонам и другим элементам.
  • Электронная коммерция – активируйте, если сайт является интернет-магазином.
  • Контентная аналитика – полезна для блогов и контент-проектов.

1. Настройки электронной торговли внутри личного кабинета Яндекс.Метрики и на сайте: Чтобы данные в электронную торговлю начали поступать, необходимо убедиться, что код на сайте и настройки вашего счетчика позволяют это делать. Для этого:

  1. Зайдите в личный кабинет Яндекс.Метрики
  2. Перейдите в раздел настройки
  3. Убедитесь, что у вас включена настройка «Электронная коммерция». Или включите ее и сохраните. Имя контейнера данных должно быть равно «dataLayer».

- Убедитесь, что код на странице настройки соответствует тому, что размещен у вас на сайте. (Если ранее код на сайте не был установлен, то не беспокойтесь, внутри файла GTM при импорте подключается сразу правильный код).

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

3. Настройки целей в Яндекс.Метрике:

  1. Перейдите в раздел «Цели», нажмите «Добавить цель».
  2. В появившемся окне впишите название цели.
  3. Выберите тип «Тип условия» - «JavaScript-событие»
  4. Укажите «Идентификатор цели», равный одному из представленных в таблице ниже, в зависимости от того, какую цель хотите создать.
Название Идентификатор цели
Открытие виджета 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>


tlpro/integrations.1758882603.txt.gz · Последнее изменение: 2025/09/26 13:30 — n.zalozin