Отслеживание видео Rutube с помощью Яндекс Тег Менеджера

23 июля, 2025

Из этого руководства вы узнаете, как отслеживать события плеера Rutube и статусы проигрывания с помощью Яндекс Тег Менеджера.В моем блоге за последние полгода опубликовано более 20 материалов, посвященных настройке и отслеживанию событий с помощью Яндекс Тег Менеджера. В каждом из этих руководств подробно разбираются шаги настройки и методы проверки корректности внедрения. Ранее для отладки использовались шаблон тега Мини дебагер триггеров и переменных, а также режим _ym_debug=2 от Яндекс Метрики. С 20 ноября 2025 года в Яндекс Тег Менеджере появилась полноценная панель отладки, и часть описанных ранее подходов устарела. Поэтому, пожалуйста, пользуйтесь новой панелью отладки ЯТМ для проверки ваших настроек и обращайте внимание на актуальность информации в текущих статьях.

Видеоформаты являются одним из самых популярных и привычных способов подачи материала. Instagram*, YouTube, Rutube, Snapchat, TikTok, Telegram, прямые эфиры - все это стало частью нашей жизни. Потребление видеоконтента продолжает расти в геометрической прогрессии.

* Деятельность американской компании Meta (бывшая Facebook) запрещена в России, организация признана экстремистской.

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

Ни для кого не секрет, что YouTube сегодня - самый популярный видеохостинг в мире. Практически все, включая меня, использовали его как основной плеер для размещения видео на сайте. Однако из-за ограничений и замедления его работы на территории Российской Федерации использование этой платформы становится все более затруднительным. Именно поэтому владельцы сайтов все чаще встраивают на свои ресурсы плееры от Rutube - либо как альтернативу, либо в дополнение к YouTube.

Мои видео на Rutube (learn.osipenkov.ru)

Отсюда возникает потребность в отслеживании различных событий плеера и статусов проигрывания - запуск видео, пауза, перемотка, просмотр до конца и т.д. Как это сделать для встроенных на сайт видео Rutube, да еще и с помощью Яндекс Тег Менеджера? Можно ли настроить такие же события, которые использовались в диспетчере тегов Google со стандартным триггером Видео на YouTube? Давайте разбираться!

Другие материалы на по отслеживанию видео:

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

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

Я подготовил для вас готовый скрипт, который вы сможете легко внедрить через Яндекс Тег Менеджер (=Google Tag Manager) и отслеживать события плеера Rutube, аналогичные встраиваемому проигрывателю YouTube.

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

Итак, давайте приступим к настройке.

Содержание

Активация Тег Менеджера и пользовательского HTML

После того, как вы активировали Тег Менеджер в настройках счетчика Яндекс Метрика, перейдите на страницу Настройки - Счетчик:

Настройки - Счетчик

Включите функцию Пользовательский HTML:

Активация пользовательского HTML

Пользовательский HTML в Yandex Tag Manager (YTM) - это тип тега, который позволяет добавлять на сайт произвольный HTML-код, JavaScript или другие скрипты, которые не поддерживаются стандартными тегами и которых нет в каталоге шаблонов. Код будет выполняться при срабатывании триггера, в нем также можно использовать переменные для динамической подстановки нужных значений.

Сохраните изменения.

Создание триггера

Перейдите в Яндекс Тег Менеджер и откройте раздел Триггеры. Нажмите на кнопку Добавить триггер:

Создание триггера

В открывшемся окне выберите тип триггера Просмотр страницы:

Триггер "Просмотр страницы"

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

Дополнительное условие активации триггера

Поскольку я хочу показать настройку на примере своего сайта osipenkov.ru, где видео размещены в различных материалах и на разных страницах, я не буду уточнять условие. Вы можете поступить точно так же и не добавлять дополнительное условие активации триггера. Задайте название триггеру (например, Просмотр страницы) и сохраните его.

Создание тега “Пользовательский HTML”

Перейдите в раздел Теги и нажмите на кнопку Добавить тег:

Создание тега

В открывшемся окне выберите шаблон тега - Пользовательский HTML:

Шаблон тега "Пользовательский HTML"

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

<script>
(function() {
  // Инициализация глобального массива dataLayer, если он ещё не существует
  // dataLayer используется для передачи данных в Яндекс Тег Менеджер / Google Tag Manager
  window.dataLayer = window.dataLayer || [];

  // Объект для хранения информации о каждом проигрывателе Rutube на странице
  var rutubePlayers = {};

  // Можно выбрать один из вариантов пороговых значений для отслеживания прогресса видео
  // Вариант 1: Отслеживание прогресса по процентам от общей длительности видео
  var progressThresholdsPercent = [10, 25, 50, 75, 90];
  // Вариант 2: Отслеживание прогресса по конкретным секундам воспроизведения видео
  var progressThresholdsSeconds = [5, 15];

  // Переключатель режима отслеживания прогресса:
  // true - используются пороговые значения в процентах (progressThresholdsPercent)
  // false - используются пороговые значения в секундах (progressThresholdsSeconds)
  var usePercentThresholds = true;

  // Объект для отслеживания уже отправленных событий прогресса для каждого проигрывателя,
  // чтобы избежать повторной отправки одинаковых событий
  var reportedProgress = {};

  /**
   * Сбрасывает состояние проигрывателя до начального.
   * Это необходимо, например, после завершения видео, чтобы можно было отслеживать его повторное воспроизведение
   * @param {string} playerId - Идентификатор проигрывателя
   */
  function resetPlayerState(playerId) {
    if (rutubePlayers[playerId]) {
      rutubePlayers[playerId].lastProgressTime = 0; // Время последнего отслеживаемого прогресса
      rutubePlayers[playerId].lastCurrentTime = 0; // Текущее время воспроизведения
      rutubePlayers[playerId].lastState = ''; // Последнее известное состояние проигрывателя
      rutubePlayers[playerId].isCompleteReported = false; // Флаг, указывающий, было ли отправлено событие 'complete'
      reportedProgress[playerId] = {}; // Сброс отслеживания отправленных порогов прогресса
      // Не обнуляем video_id, video_title, video_url, duration — они могут понадобиться при повторах
    }
  }

  // Добавляем слушатель событий 'message' к объекту window
  // Это позволяет принимать сообщения от iframe-плееров Rutube
  window.addEventListener('message', function(event) {
    var message;
    try {
      // Пытаемся распарсить полученные данные как JSON
      message = JSON.parse(event.data);
    } catch (e) {
      // Если данные не являются валидным JSON, игнорируем сообщение
      return;
    }

    // Проверяем, что сообщение существует и содержит необходимые свойства
    if (!message || !message.type || !message.data) return;

    var eventType = message.type; // Тип события (например, 'player:playStart', 'player:currentTime')
    var eventData = message.data; // Данные, связанные с событием
    var playerId = eventData.playerId; // Идентификатор проигрывателя, инициировавшего событие

    // Инициализация объекта для данного проигрывателя, если он ещё не существует
    if (!rutubePlayers[playerId]) {
      rutubePlayers[playerId] = {
        video_url: '', // URL видео
        video_title: '', // Заголовок видео
        video_id: '', // ID видео
        video_duration: 0, // Длительность видео
        lastCurrentTime: 0, // Последнее известное текущее время воспроизведения
        lastState: '', // Последнее известное состояние проигрывателя
        lastProgressTime: 0, // Время последнего отслеживаемого прогресса
        isCompleteReported: false // Флаг, было ли отправлено событие 'complete'
      };
      reportedProgress[playerId] = {}; // Инициализация отслеживания отправленных порогов прогресса для нового плеера
    }

    var playerInfo = rutubePlayers[playerId]; // Получаем информацию о текущем проигрывателе

    // Блокируем обработку событий для данного плеера, если уже было отправлено событие 'complete',
    // за исключением события 'player:playStart', которое может сигнализировать о повторном воспроизведении.
    if (playerInfo.isCompleteReported && eventType !== 'player:playStart') {
      return;
    }

    // Формируем базовый объект для отправки в dataLayer
    // Эти данные будут общими для большинства событий
    var dataLayerPush = {
      'event': 'rutubeVideo', // Кастомное событие для GTM
      'video_provider': 'rutube', // Провайдер видео
      'video_url': playerInfo.video_url,
      'video_title': playerInfo.video_title,
      'video_id': playerInfo.video_id,
      'video_duration': Math.round(playerInfo.video_duration) // Округляем длительность
    };

    // Обработка различных типов событий от проигрывателя Rutube
    switch (eventType) {
      // Событие 'player:ready' срабатывает, когда плеер готов к взаимодействию
      case 'player:ready':
        // Обновляем video_id и video_url, если они доступны в данных события
        if (eventData.videoId) {
          playerInfo.video_url = 'https://rutube.ru/video/' + eventData.videoId + '/';
          playerInfo.video_id = eventData.videoId;
          dataLayerPush.video_id = eventData.videoId;
          dataLayerPush.video_url = playerInfo.video_url;
        }
        break;

      // Событие 'player:playOptionLoaded' срабатывает после загрузки опций воспроизведения
      case 'player:playOptionLoaded':
        // Обновляем video_title, video_id и video_url, если они доступны
        if (eventData.title) {
          playerInfo.video_title = eventData.title;
          dataLayerPush.video_title = eventData.title;
        }
        if (eventData.id) {
          playerInfo.video_url = 'https://rutube.ru/video/' + eventData.id + '/';
          playerInfo.video_id = eventData.id;
          dataLayerPush.video_id = eventData.id;
          dataLayerPush.video_url = playerInfo.video_url;
        }
        break;

      // Событие 'player:durationChange' срабатывает при изменении длительности видео
      case 'player:durationChange':
        playerInfo.video_duration = eventData.duration; // Обновляем длительность видео
        dataLayerPush.video_duration = Math.round(playerInfo.video_duration); // Обновляем длительность в dataLayer
        break;

      // Событие 'player:playStart' срабатывает, когда начинается воспроизведение видео
      case 'player:playStart':
        // Обновляем video_id, video_url и video_title, если они не были установлены ранее
        if (eventData.video_id && !playerInfo.video_id) {
          playerInfo.video_id = eventData.video_id;
          playerInfo.video_url = 'https://rutube.ru/video/' + eventData.video_id + '/';
          dataLayerPush.video_id = eventData.video_id;
          dataLayerPush.video_url = playerInfo.video_url;
        }
        if (eventData.title && !playerInfo.video_title) {
          playerInfo.video_title = eventData.title;
          dataLayerPush.video_title = eventData.title;
        }

        dataLayerPush.video_status = 'start'; // Статус видео: старт
        dataLayerPush.video_current_time = 0; // Текущее время: 0
        dataLayerPush.video_percent = 0; // Процент воспроизведения: 0

        // Добавляем дополнительные параметры, если они присутствуют в eventData.
        if (eventData.qa) dataLayerPush.video_qa = eventData.qa;
        if (eventData.sm) dataLayerPush.video_display_mode = eventData.sm;
        if (eventData.yclid) dataLayerPush.video_yclid = eventData.yclid;
        if (eventData.viewid) dataLayerPush.video_viewid = eventData.viewid;
        if (eventData.user) dataLayerPush.video_user_id = eventData.user;
        if (eventData.cid) dataLayerPush.video_cid = eventData.cid;
        if (eventData.pid) dataLayerPush.video_pid = eventData.pid;
        if (eventData.referer) dataLayerPush.video_referer = decodeURIComponent(eventData.referer);
        if (eventData.v) dataLayerPush.video_volume = eventData.v;
        if (eventData.q_w) dataLayerPush.video_quality_width = eventData.q_w;
        if (eventData.q_h) dataLayerPush.video_quality_height = eventData.q_h;
        if (eventData.tr) dataLayerPush.video_provider_type = eventData.tr;

        // Отправляем событие 'start' в dataLayer
        dataLayer.push(dataLayerPush);

        playerInfo.isCompleteReported = false; // Сбрасываем флаг завершения видео
        reportedProgress[playerId] = {}; // Сбрасываем отслеживание прогресса для нового старта
        break;

      // Событие 'player:changeState' срабатывает при изменении состояния проигрывателя (например, play, pause, buffering)
      case 'player:changeState':
        // Обновляем текущее время, если оно передано в событии
        playerInfo.lastCurrentTime = (eventData.time !== undefined && eventData.time !== null) ? eventData.time : playerInfo.lastCurrentTime;
        // Вычисляем текущий процент воспроизведения
        var currentPercent = playerInfo.video_duration > 0 ?
          Math.floor((playerInfo.lastCurrentTime / playerInfo.video_duration) * 100) : 0;

        // Если состояние изменилось на 'pause' и предыдущее состояние не было 'pause',
        // и видео не завершено (меньше 99%), отправляем событие 'pause'
        if (eventData.state === 'pause' && playerInfo.lastState !== 'pause' && currentPercent < 99) {
          dataLayerPush.video_status = 'pause'; // Статус видео: пауза
          dataLayerPush.video_current_time = Math.round(playerInfo.lastCurrentTime); // Текущее время
          dataLayerPush.video_percent = currentPercent; // Процент воспроизведения
          dataLayer.push(dataLayerPush);
        }

        playerInfo.lastState = eventData.state; // Обновляем последнее состояние проигрывателя
        break;

      // Событие 'player:playComplete' срабатывает при полном завершении воспроизведения видео
      case 'player:playComplete':
        // Проверяем, было ли уже отправлено событие 'complete', чтобы избежать дублирования
        if (!playerInfo.isCompleteReported) {
          dataLayerPush.video_status = 'complete'; // Статус видео: завершено
          dataLayerPush.video_current_time = Math.round(playerInfo.video_duration); // Текущее время: длительность видео
          dataLayerPush.video_percent = 100; // Процент воспроизведения: 100
          dataLayer.push(dataLayerPush); // Отправляем событие 'complete'
          playerInfo.isCompleteReported = true; // Устанавливаем флаг, что событие 'complete' было отправлено

          // Через 1 секунду сбрасываем состояние проигрывателя для возможности повторного отслеживания
          setTimeout(function() {
            resetPlayerState(playerId);
          }, 1000);
        }
        break;

      // Событие 'player:currentTime' срабатывает регулярно, сообщая текущее время воспроизведения
      case 'player:currentTime':
        playerInfo.lastCurrentTime = eventData.time; // Обновляем последнее текущее время воспроизведения

        if (Math.abs(playerInfo.lastCurrentTime - playerInfo.lastProgressTime) > 5 && playerInfo.lastProgressTime !== 0) {
          dataLayerPush.video_status = 'seek'; // Статус видео: перемотка
          dataLayerPush.video_current_time = Math.round(playerInfo.lastCurrentTime); // Текущее время
          dataLayerPush.video_percent = playerInfo.video_duration > 0 ?
            Math.floor((playerInfo.lastCurrentTime / playerInfo.video_duration) * 100) : 0; // Процент воспроизведения
          dataLayer.push(dataLayerPush); // Отправляем событие 'seek'
        }

        playerInfo.lastProgressTime = playerInfo.lastCurrentTime; // Обновляем время последнего прогресса

        // Если длительность видео известна, проверяем пороги прогресса
        if (playerInfo.video_duration > 0) {
          var currentTime = Math.floor(playerInfo.lastCurrentTime); // Текущее время в секундах
          var currentPercent = Math.floor((playerInfo.lastCurrentTime / playerInfo.video_duration) * 100); // Текущий процент

          // Игнорируем прогресс, если он уже достиг 100% (это будет обработано 'player:playComplete').
          if (currentPercent >= 100) break;

          // Отслеживание прогресса в зависимости от выбранного режима (проценты или секунды).
          if (usePercentThresholds) {
            // Режим отслеживания по процентам
            for (var i = 0; i < progressThresholdsPercent.length; i++) {
              var threshold = progressThresholdsPercent[i];
              // Если текущий процент достиг порога и событие для этого порога ещё не было отправлено
              if (currentPercent >= threshold && !reportedProgress[playerId][threshold]) {
                dataLayerPush.video_status = 'progress'; // Статус видео: прогресс
                dataLayerPush.video_current_time = currentTime; // Текущее время
                dataLayerPush.video_percent = threshold; // Процент, достигнутый порогом
                dataLayer.push(dataLayerPush); // Отправляем событие 'progress'
                reportedProgress[playerId][threshold] = true; // Помечаем порог как отправленный
              }
            }
          } else {
            // Режим отслеживания по секундам
            for (var j = 0; j < progressThresholdsSeconds.length; j++) {
              var second = progressThresholdsSeconds[j];
              // Если текущее время достигло порога в секундах и событие для этого порога ещё не было отправлено
              if (currentTime >= second && !reportedProgress[playerId]['s' + second]) {
                dataLayerPush.video_status = 'progress'; // Статус видео: прогресс
                dataLayerPush.video_current_time = currentTime; // Текущее время
                dataLayerPush.video_percent = currentPercent; // Текущий процент
                dataLayerPush.video_seconds = second; // Порог в секундах
                dataLayer.push(dataLayerPush); // Отправляем событие 'progress'
                reportedProgress[playerId]['s' + second] = true; // Помечаем порог как отправленный (используем префикс 's' для ключа)
              }
            }
          }
        }
        break;

      // Событие 'player:buffering' срабатывает, когда плеер переходит в состояние буферизации
      case 'player:buffering':
        // Обновляем текущее время, если оно передано
        playerInfo.lastCurrentTime = (eventData.time !== undefined && eventData.time !== null) ? eventData.time : playerInfo.lastCurrentTime;
        // Если предыдущее состояние не было 'buffering', отправляем событие 'buffering'
        if (playerInfo.lastState !== 'buffering') {
          dataLayerPush.video_status = 'buffering'; // Статус видео: буферизация
          dataLayerPush.video_current_time = Math.round(playerInfo.lastCurrentTime); // Текущее время
          dataLayerPush.video_percent = playerInfo.video_duration > 0 ?
            Math.floor((playerInfo.lastCurrentTime / playerInfo.video_duration) * 100) : 0; // Процент воспроизведения
          dataLayer.push(dataLayerPush); // Отправляем событие 'buffering'
        }
        playerInfo.lastState = 'buffering'; // Обновляем последнее состояние на 'buffering'
        break;
    }
  });
})();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

(function() {

// Инициализация глобального массива dataLayer, если он ещё не существует

// dataLayer используется для передачи данных в Яндекс Тег Менеджер / Google Tag Manager

window.dataLayer = window.dataLayer || [];

// Объект для хранения информации о каждом проигрывателе Rutube на странице

var rutubePlayers = {};

// Можно выбрать один из вариантов пороговых значений для отслеживания прогресса видео

// Вариант 1: Отслеживание прогресса по процентам от общей длительности видео

var progressThresholdsPercent = [10, 25, 50, 75, 90];

// Вариант 2: Отслеживание прогресса по конкретным секундам воспроизведения видео

var progressThresholdsSeconds = [5, 15];

// Переключатель режима отслеживания прогресса:

// true - используются пороговые значения в процентах (progressThresholdsPercent)

// false - используются пороговые значения в секундах (progressThresholdsSeconds)

var usePercentThresholds = true;

// Объект для отслеживания уже отправленных событий прогресса для каждого проигрывателя,

// чтобы избежать повторной отправки одинаковых событий

var reportedProgress = {};

/**

* Сбрасывает состояние проигрывателя до начального.

* Это необходимо, например, после завершения видео, чтобы можно было отслеживать его повторное воспроизведение

* @param {string} playerId - Идентификатор проигрывателя

function resetPlayerState(playerId) {

if (rutubePlayers[playerId]) {

rutubePlayers[playerId].lastProgressTime = 0; // Время последнего отслеживаемого прогресса

rutubePlayers[playerId].lastCurrentTime = 0; // Текущее время воспроизведения

rutubePlayers[playerId].lastState = ''; // Последнее известное состояние проигрывателя

rutubePlayers[playerId].isCompleteReported = false; // Флаг, указывающий, было ли отправлено событие 'complete'

reportedProgress[playerId] = {}; // Сброс отслеживания отправленных порогов прогресса

// Не обнуляем video_id, video_title, video_url, duration — они могут понадобиться при повторах

}

// Добавляем слушатель событий 'message' к объекту window

// Это позволяет принимать сообщения от iframe-плееров Rutube

window.addEventListener('message', function(event) {

var message;

try {

// Пытаемся распарсить полученные данные как JSON

message = JSON.parse(event.data);

} catch (e) {

// Если данные не являются валидным JSON, игнорируем сообщение

return;

}

// Проверяем, что сообщение существует и содержит необходимые свойства

if (!message || !message.type || !message.data) return;

var eventType = message.type; // Тип события (например, 'player:playStart', 'player:currentTime')

var eventData = message.data; // Данные, связанные с событием

var playerId = eventData.playerId; // Идентификатор проигрывателя, инициировавшего событие

// Инициализация объекта для данного проигрывателя, если он ещё не существует

if (!rutubePlayers[playerId]) {

rutubePlayers[playerId] = {

video_url: '', // URL видео

video_title: '', // Заголовок видео

video_id: '', // ID видео

video_duration: 0, // Длительность видео

lastCurrentTime: 0, // Последнее известное текущее время воспроизведения

lastState: '', // Последнее известное состояние проигрывателя

lastProgressTime: 0, // Время последнего отслеживаемого прогресса

isCompleteReported: false // Флаг, было ли отправлено событие 'complete'

};

reportedProgress[playerId] = {}; // Инициализация отслеживания отправленных порогов прогресса для нового плеера

}

var playerInfo = rutubePlayers[playerId]; // Получаем информацию о текущем проигрывателе

// Блокируем обработку событий для данного плеера, если уже было отправлено событие 'complete',

// за исключением события 'player:playStart', которое может сигнализировать о повторном воспроизведении.

if (playerInfo.isCompleteReported && eventType !== 'player:playStart') {

return;

}

// Формируем базовый объект для отправки в dataLayer

// Эти данные будут общими для большинства событий

var dataLayerPush = {

'event': 'rutubeVideo', // Кастомное событие для GTM

'video_provider': 'rutube', // Провайдер видео

'video_url': playerInfo.video_url,

'video_title': playerInfo.video_title,

'video_id': playerInfo.video_id,

'video_duration': Math.round(playerInfo.video_duration) // Округляем длительность

};

// Обработка различных типов событий от проигрывателя Rutube

switch (eventType) {

// Событие 'player:ready' срабатывает, когда плеер готов к взаимодействию

case 'player:ready':

// Обновляем video_id и video_url, если они доступны в данных события

if (eventData.videoId) {

playerInfo.video_url = 'https://rutube.ru/video/' + eventData.videoId + '/';

playerInfo.video_id = eventData.videoId;

dataLayerPush.video_id = eventData.videoId;

dataLayerPush.video_url = playerInfo.video_url;

}

break;

// Событие 'player:playOptionLoaded' срабатывает после загрузки опций воспроизведения

case 'player:playOptionLoaded':

// Обновляем video_title, video_id и video_url, если они доступны

if (eventData.title) {

playerInfo.video_title = eventData.title;

dataLayerPush.video_title = eventData.title;

}

if (eventData.id) {

playerInfo.video_url = 'https://rutube.ru/video/' + eventData.id + '/';

playerInfo.video_id = eventData.id;

dataLayerPush.video_id = eventData.id;

dataLayerPush.video_url = playerInfo.video_url;

}

break;

// Событие 'player:durationChange' срабатывает при изменении длительности видео

case 'player:durationChange':

playerInfo.video_duration = eventData.duration; // Обновляем длительность видео

dataLayerPush.video_duration = Math.round(playerInfo.video_duration); // Обновляем длительность в dataLayer

break;

// Событие 'player:playStart' срабатывает, когда начинается воспроизведение видео

case 'player:playStart':

// Обновляем video_id, video_url и video_title, если они не были установлены ранее

if (eventData.video_id && !playerInfo.video_id) {

playerInfo.video_id = eventData.video_id;

playerInfo.video_url = 'https://rutube.ru/video/' + eventData.video_id + '/';

dataLayerPush.video_id = eventData.video_id;

dataLayerPush.video_url = playerInfo.video_url;

}

if (eventData.title && !playerInfo.video_title) {

playerInfo.video_title = eventData.title;

dataLayerPush.video_title = eventData.title;

}

dataLayerPush.video_status = 'start'; // Статус видео: старт

dataLayerPush.video_current_time = 0; // Текущее время: 0

dataLayerPush.video_percent = 0; // Процент воспроизведения: 0

// Добавляем дополнительные параметры, если они присутствуют в eventData.

if (eventData.qa) dataLayerPush.video_qa = eventData.qa;

if (eventData.sm) dataLayerPush.video_display_mode = eventData.sm;

if (eventData.yclid) dataLayerPush.video_yclid = eventData.yclid;

if (eventData.viewid) dataLayerPush.video_viewid = eventData.viewid;

if (eventData.user) dataLayerPush.video_user_id = eventData.user;

if (eventData.cid) dataLayerPush.video_cid = eventData.cid;

if (eventData.pid) dataLayerPush.video_pid = eventData.pid;

if (eventData.referer) dataLayerPush.video_referer = decodeURIComponent(eventData.referer);

if (eventData.v) dataLayerPush.video_volume = eventData.v;

if (eventData.q_w) dataLayerPush.video_quality_width = eventData.q_w;

if (eventData.q_h) dataLayerPush.video_quality_height = eventData.q_h;

if (eventData.tr) dataLayerPush.video_provider_type = eventData.tr;

// Отправляем событие 'start' в dataLayer

dataLayer.push(dataLayerPush);

playerInfo.isCompleteReported = false; // Сбрасываем флаг завершения видео

reportedProgress[playerId] = {}; // Сбрасываем отслеживание прогресса для нового старта

break;

// Событие 'player:changeState' срабатывает при изменении состояния проигрывателя (например, play, pause, buffering)

case 'player:changeState':

// Обновляем текущее время, если оно передано в событии

playerInfo.lastCurrentTime = (eventData.time !== undefined && eventData.time !== null) ? eventData.time : playerInfo.lastCurrentTime;

// Вычисляем текущий процент воспроизведения

var currentPercent = playerInfo.video_duration > 0 ?

Math.floor((playerInfo.lastCurrentTime / playerInfo.video_duration) * 100) : 0;

// Если состояние изменилось на 'pause' и предыдущее состояние не было 'pause',

// и видео не завершено (меньше 99%), отправляем событие 'pause'

if (eventData.state === 'pause' && playerInfo.lastState !== 'pause' && currentPercent < 99) {

dataLayerPush.video_status = 'pause'; // Статус видео: пауза

dataLayerPush.video_current_time = Math.round(playerInfo.lastCurrentTime); // Текущее время

dataLayerPush.video_percent = currentPercent; // Процент воспроизведения

dataLayer.push(dataLayerPush);

}

playerInfo.lastState = eventData.state; // Обновляем последнее состояние проигрывателя

break;

// Событие 'player:playComplete' срабатывает при полном завершении воспроизведения видео

case 'player:playComplete':

// Проверяем, было ли уже отправлено событие 'complete', чтобы избежать дублирования

if (!playerInfo.isCompleteReported) {

dataLayerPush.video_status = 'complete'; // Статус видео: завершено

dataLayerPush.video_current_time = Math.round(playerInfo.video_duration); // Текущее время: длительность видео

dataLayerPush.video_percent = 100; // Процент воспроизведения: 100

dataLayer.push(dataLayerPush); // Отправляем событие 'complete'

playerInfo.isCompleteReported = true; // Устанавливаем флаг, что событие 'complete' было отправлено

// Через 1 секунду сбрасываем состояние проигрывателя для возможности повторного отслеживания

setTimeout(function() {

resetPlayerState(playerId);

}, 1000);

}

break;

// Событие 'player:currentTime' срабатывает регулярно, сообщая текущее время воспроизведения

case 'player:currentTime':

playerInfo.lastCurrentTime = eventData.time; // Обновляем последнее текущее время воспроизведения

if (Math.abs(playerInfo.lastCurrentTime - playerInfo.lastProgressTime) > 5 && playerInfo.lastProgressTime !== 0) {

dataLayerPush.video_status = 'seek'; // Статус видео: перемотка

dataLayerPush.video_current_time = Math.round(playerInfo.lastCurrentTime); // Текущее время

dataLayerPush.video_percent = playerInfo.video_duration > 0 ?

Math.floor((playerInfo.lastCurrentTime / playerInfo.video_duration) * 100) : 0; // Процент воспроизведения

dataLayer.push(dataLayerPush); // Отправляем событие 'seek'

}

playerInfo.lastProgressTime = playerInfo.lastCurrentTime; // Обновляем время последнего прогресса

// Если длительность видео известна, проверяем пороги прогресса

if (playerInfo.video_duration > 0) {

var currentTime = Math.floor(playerInfo.lastCurrentTime); // Текущее время в секундах

var currentPercent = Math.floor((playerInfo.lastCurrentTime / playerInfo.video_duration) * 100); // Текущий процент

// Игнорируем прогресс, если он уже достиг 100% (это будет обработано 'player:playComplete').

if (currentPercent >= 100) break;

// Отслеживание прогресса в зависимости от выбранного режима (проценты или секунды).

if (usePercentThresholds) {

// Режим отслеживания по процентам

for (var i = 0; i < progressThresholdsPercent.length; i++) {

var threshold = progressThresholdsPercent[i];

// Если текущий процент достиг порога и событие для этого порога ещё не было отправлено

if (currentPercent >= threshold && !reportedProgress[playerId][threshold]) {

dataLayerPush.video_status = 'progress'; // Статус видео: прогресс

dataLayerPush.video_current_time = currentTime; // Текущее время

dataLayerPush.video_percent = threshold; // Процент, достигнутый порогом

dataLayer.push(dataLayerPush); // Отправляем событие 'progress'

reportedProgress[playerId][threshold] = true; // Помечаем порог как отправленный

}

} else {

// Режим отслеживания по секундам

for (var j = 0; j < progressThresholdsSeconds.length; j++) {

var second = progressThresholdsSeconds[j];

// Если текущее время достигло порога в секундах и событие для этого порога ещё не было отправлено

if (currentTime >= second && !reportedProgress[playerId]['s' + second]) {

dataLayerPush.video_status = 'progress'; // Статус видео: прогресс

dataLayerPush.video_current_time = currentTime; // Текущее время

dataLayerPush.video_percent = currentPercent; // Текущий процент

dataLayerPush.video_seconds = second; // Порог в секундах

dataLayer.push(dataLayerPush); // Отправляем событие 'progress'

reportedProgress[playerId]['s' + second] = true; // Помечаем порог как отправленный (используем префикс 's' для ключа)

}

break;

// Событие 'player:buffering' срабатывает, когда плеер переходит в состояние буферизации

case 'player:buffering':

// Обновляем текущее время, если оно передано

playerInfo.lastCurrentTime = (eventData.time !== undefined && eventData.time !== null) ? eventData.time : playerInfo.lastCurrentTime;

// Если предыдущее состояние не было 'buffering', отправляем событие 'buffering'

if (playerInfo.lastState !== 'buffering') {

dataLayerPush.video_status = 'buffering'; // Статус видео: буферизация

dataLayerPush.video_current_time = Math.round(playerInfo.lastCurrentTime); // Текущее время

dataLayerPush.video_percent = playerInfo.video_duration > 0 ?

Math.floor((playerInfo.lastCurrentTime / playerInfo.video_duration) * 100) : 0; // Процент воспроизведения

dataLayer.push(dataLayerPush); // Отправляем событие 'buffering'

}

playerInfo.lastState = 'buffering'; // Обновляем последнее состояние на 'buffering'

break;

}

});

})();

</script>

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

Итоговый тег для отслеживания событий Rutube

Укажите название тегу (например, HTML - Rutube) и сохраните его.

Если описывать работу этого кода совсем просто, то он реализует отслеживание событий проигрывания видео с Rutube и отправляет их в dataLayer. Его можно использовать в таком виде как для Яндекс Тег Менеджера, так и для Google Tag Manager.

Скрипт:

создает объект rutubePlayers - хранилище информации о каждом плеере RuTube на странице (есть поддержка нескольких видео);
прослушивает события плеера Rutube, встроенного на вашем сайте через iframe (window.addEventListener('message')). Плеер может принимать и исполнять ряд команд. Команда передается плееру при помощи механизма postMessage() из кода JavaScript;
позволяет отслеживать ход просмотра с помощью процентных или временных порогов (время измеряется в секундах), которые вы самостоятельно можете задать. Повторные события одного и того же порога не отправляются повторно, не дублируются;
определяет перемотку, буферизацию, паузы и повторные запуски, а также отправляет события rutubeVideo в window.dataLayer с дополнительными параметрами видео, которые можно обработать в GTM/YTM с помощью триггера специального события и переменных уровня данных;

События, которые можно отслеживать (логика схожа с триггером Видео на YoTube в Google Tag Manager):

start - начало воспроизведения;
pause - приостановка;
seek - перемотка;
buffering - буферизация;
progress - достижение заданных порогов просмотра;
complete - завершение видео.

Каждое событие содержит дополнительные параметры:

video_provider - провайдер (всегда rutube);
video_url - URL-адрес видео;
video_title - название видео (пока не работает). К сожалению, на момент публикации этого руководства я не смог найти простой способ извлечения этой информации, у меня не срабатывает событие player:playOptionLoaded, хотя в официальной документации Rutube оно присутствует, а использовать API Rutube не представляется возможным из-за блокировки браузерами запросов CORS (Cross-Origin Resource Sharing). Поэтому нужно делать запрос с сервера (использовать серверный прокси), что для нашей задачи является усложнением;
video_id - идентификатор видео;
video_duration - длительность видео (в секундах);
video_status - статус видео в момент регистрации события;
video_current_time - текущее время просмотра видео (в секундах);
video_percent - процент просмотра.

Я также попросил чат-бота снабдить код подробными комментариями, чтобы вам было легко понять, как работает мое решение. Единственная настраиваемая опция - выбор типа пороговых значений. Я реализовал ее по аналогии с настройкой в Google Tag Manager, где можно задать отслеживание прогресса просмотра в процентах или секундах.

Ход просмотра в триггере YouTube (Google Tag Manager)

В моем примере пороговые значения для видео Rutube задаются в двух массивах в начале скрипта:

Отслеживание прогресса по процентным порогам и временным порогам

Эти пороговые значения вы можете изменить под себя. В зависимости от выбранного варианта (отслеживать прогресс в процентах или секундах), вам необходимо использовать переключатель. За это отвечает переменная usePercentThresholds.

var usePercentThresholds = true;  // true — использовать проценты, false — секунды

1	var usePercentThresholds = true; // true — использовать проценты, false — секунды

Если вы указали значение true - прогресс будет отслеживаться по процентным порогам, заданным в массиве progressThresholdsPercent. Если false - ход просмотра будет учитывать временные пороги в секундах, которые вы установили в массиве progressThresholdsSeconds.

Переключать режима отслеживания прогресса видео

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

Проверка работы скрипта

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

Предварительный просмотр

Как только это произойдет, нажмите на кнопку Открыть предварительный просмотр:

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

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

Примечание: подробнее о режиме предварительного про Тег Менеджере читайте в этом руководстве.

В отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview. Перейдите на страницу, на которой есть проигрыватель Rutube и откройте консоль разработчика (клавиша F12 или Ctrl+Shift+I). Перейдите на вкладку Console.

Консоль разработчика (Console)

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

Вставьте на вкладке Console него нижеприведенный код, чтобы активировать прослушиватель Rutube Listener, и нажмите Enter:

(function() {
  // Перехватываем push'и в dataLayer
  window.dataLayer = window.dataLayer || [];

  const originalPush = window.dataLayer.push;

  window.dataLayer.push = function() {
    for (let i = 0; i < arguments.length; i++) {
      const event = arguments[i];
      if (event && event.event === 'rutubeVideo') {
        console.log('%c[Rutube Event]', 'color: green; font-weight: bold;', event);
      }
    }
    return originalPush.apply(this, arguments);
  };

  console.log('%c[Rutube Listener] Прослушиватель dataLayer для событий Rutube теперь активен.', 'color: blue;: bold;');
})();

(function() {

// Перехватываем push'и в dataLayer

window.dataLayer = window.dataLayer || [];

const originalPush = window.dataLayer.push;

window.dataLayer.push = function() {

for (let i = 0; i < arguments.length; i++) {

const event = arguments[i];

if (event && event.event === 'rutubeVideo') {

console.log('%c[Rutube Event]', 'color: green; font-weight: bold;', event);

}

return originalPush.apply(this, arguments);

};

console.log('%c[Rutube Listener] Прослушиватель dataLayer для событий Rutube теперь активен.', 'color: blue;: bold;');

})();

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

Прослушиватель dataLayer для событий Rutube теперь активен

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

Нажмите Play. Вы сразу же в консоли должны увидеть одно или несколько событий:

Данные о регистрируемых событиях Rutube в консоли разработчика

Первое событие, как правило, это запуск видео (start). Вы можете развернуть его, нажав на иконку стрелочки. Внутри него будет содержаться вся информация о конкретном событии. События отслеживаются разные, но у всех у них одно название - rutubeVideo. Это сделано для того, чтобы в настройках Яндекс Тег Менеджера можно было создать один триггер специального события. Об этом я расскажу чуть позже.

Различать события можно по параметру video_status, в который передается название события - start, pause, seek, buffering, progress и complete:

Пример события start (начало просмотра видео)

Согласно официальной документации Rutube, с событием start (player:playStart // Первый старт проигрывания) передается большее количество параметров:

data: {
"video_id":"e30edf24ea097b45d0d469fac449478c",// идентификатор видео
"qa":true,// автокачество
"sm":"default",// отображение плера default/cinema
"yclid":"1715854197193969726",// global client id
"viewid":"339f02f2c72f0d0f2676c1ec6c069d3b",// REQUEST_ID из метаданных запроса или, если он отсутствует в запросе, тут же сгенерированный новый UUID4
"user":null,// идентификатор пользователя, если он залогинен
"cid":"d65fba3c-75a7-450d-b273-4e86b0569791",// uuid?
"pid":"c97972a0-8269-402a-82e3-0192366dc98b",// guid?
"referer":"http%3A%2F%2Flocalhost%3A8080",// страница проигрывания
"v":100,// Уровень звука
"q_w":1920,// Ширина активного уровня качества
"q_h":1080,// Высота активного уровня качества
"tr":"hls",// Тип провайдера
"playerId":"video_frame"
}

data: {

"video_id":"e30edf24ea097b45d0d469fac449478c",// идентификатор видео

"qa":true,// автокачество

"sm":"default",// отображение плера default/cinema

"yclid":"1715854197193969726",// global client id

"viewid":"339f02f2c72f0d0f2676c1ec6c069d3b",// REQUEST_ID из метаданных запроса или, если он отсутствует в запросе, тут же сгенерированный новый UUID4

"user":null,// идентификатор пользователя, если он залогинен

"cid":"d65fba3c-75a7-450d-b273-4e86b0569791",// uuid?

"pid":"c97972a0-8269-402a-82e3-0192366dc98b",// guid?

"referer":"http%3A%2F%2Flocalhost%3A8080",// страница проигрывания

"v":100,// Уровень звука

"q_w":1920,// Ширина активного уровня качества

"q_h":1080,// Высота активного уровня качества

"tr":"hls",// Тип провайдера

"playerId":"video_frame"

}

Примечание: в моем скрипте есть небольшая переработка и у каждого параметра добавлен префикс video_.

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

Пример события pause (пауза видео)

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

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

Проверка работы скрипта с помощью Google Tag Manager

Единственное, что не передается на уровень данных - это название видео (почему? Об это я писал выше). Как только найду простое и рабочее решение, обязательно обновлю свой код.

Создание триггера

Переходим к завершающим настройкам. Вернитесь в Яндекс Тег Менеджер и создайте триггер типа Специальное событие:

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

В названии события добавьте rutubeVideo:

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

Задайте название триггеру специального события (в моем примере Видео Rutube) и сохраните его.

Создание пользовательских переменных

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

Создание переменной

В шаблоне переменной выберите Переменная уровня данных:

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

В поле Имя переменной уровня данных поочередно укажите те параметры, которые вам нужны. Например, в моей другой статье по отслеживанию видео YouTube для Яндекс Метрики с помощью Google Tag Manager используются все встроенные переменные типа Видео:

Video Provider — название платформы видео (YouTube);
Video Status — статус видео в момент регистрации события. Может быть: Start, Complete, Pause, Seek, Buffering, Progress;
Video URL — URL-адрес, ссылку на видео YouTube (https://www.youtube.com/watch?v=...);
Video Title — название видео;
Video Duration — общая продолжительность видео (в секундах);
Video Current Time — текущее время видео (в секундах), в которое произошло событие;
Video Percent — значение воспроизведенного видео (в процентах) на момент, когда сработало событие;
Video Visible — значение видимости видео в окне браузера. Если видео отображается в области просмотра, результатом будет значение true, если же в другой области (например, в нижней части страницы, на фоновой вкладке) – false.

В моей реализации для Rutube все очень похоже, за исключением переменной video_title, которая пока не определяется, а также отсутствует переменная video_visible. Поэтому я предлагаю использовать следующий набор:

video_provider - провайдер (всегда rutube);
video_url - URL-адрес видео;
video_id - идентификатор видео;
video_duration - длительность видео (в секундах);
video_status - статус видео в момент регистрации события;
video_current_time - текущее время просмотра видео (в секундах);
video_percent - процент просмотра.

Именно их и нужно создать в Яндекс Тег Менеджере:

Пример переменной уровня данных video_url

После того, как вы это сделаете, в вашем контейнере Тег Менеджера должно быть семь новых переменных уровня данных:

video_provider = Video Provider
video_url = Video URL
video_id = Video ID
video_duration = Video Duration
video_status = Video Status
video_current_time = Video Current Time
video_percent = Video Percent

В ЯТМ у вас это будет выглядеть так:

Переменные уровня данных для видео Rutube

Создание целей в Яндекс Метрике

Чтобы создать цель на каждое событие видео (старт, пауза, перемотка, буферизация, завершение и т.д.), перейдите в интерфейс Яндекс Метрики в раздел Цели и создайте цель. Выберите цель типа JavaScript-событие. В поле Идентификатор цели добавьте значение, соответствующее одному из событий. Например, если вы отслеживаете событие начала просмотра видео, то таким идентификатором будет start:

Событие начала просмотра видео Rutube

Для завершения просмотра видео идентификатор цели можно задать complete, для паузы - pause, для перемотка - seek, для буферизации - buffering, для хода прогресса - progress. Напоминаю, что события, которые отслеживает мой скрипт Rutube, следующие:

start - начало воспроизведения;
pause - приостановка;
seek - перемотка;
buffering - буферизация;
progress - достижение заданных порогов просмотра;
complete - завершение видео.

Цели на все события видео Rutube

Тег события Яндекс Метрики

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

Шаблоны из каталога

И в открывшемся окне добавить тег Яндекс Метрика (Передача информации о достижении цели):

Шаблон тега - Яндекс Метрика

После этого вас вернет обратно в настройки тега. Зададим ему следующие настройки:

ID счетчика - вставьте идентификатор вашего счетчика Яндекс Метрики. Он отображается вверху страницы;
Идентификатор цели - переменная {{Video Status}} . Именно она динамически принимает разные значения статуса видео в момент регистрации события;
Название - произвольное название тега, характеризующее его действие (например: Яндекс Метрика - Rutube);
Шаблон тега - Яндекс Метрика;

Поставьте галочку рядом с Добавить поле params и введите в него следующую конструкцию (если все делали так, как я показывал в этом руководстве):

{"{{Video Provider}}":{"{{Video Status}}":{"URL видео":"{{Video URL}}","ID видео":"{{Video ID}}","Текущее время видео в секундах":"{{Video Current Time}}","Общая продолжительность видео":"{{Video Duration}}","Сколько % просмотрел видео":"{{Video Percent}}"}}}

1	{"{{Video Provider}}":{"{{Video Status}}":{"URL видео":"{{Video URL}}","ID видео":"{{Video ID}}","Текущее время видео в секундах":"{{Video Current Time}}","Общая продолжительность видео":"{{Video Duration}}","Сколько % просмотрел видео":"{{Video Percent}}"}}}

Данная конструкция - JSON-объект, вложенный с несколькими уровнями. Выглядит он вот так:

{
  "{{Video Provider}}": {
    "{{Video Actions}}": {
      "URL видео": "{{Video URL}}",
      "ID видео": "{{Video ID}}",
      "Текущее время видео в секундах": "{{Video Current Time}}",
      "Общая продолжительность видео": "{{Video Duration}}",
      "Сколько % просмотрел видео": "{{Video Percent}}"
    }
  }
}

{

"{{Video Provider}}": {

"{{Video Actions}}": {

"URL видео": "{{Video URL}}",

"ID видео": "{{Video ID}}",

"Текущее время видео в секундах": "{{Video Current Time}}",

"Общая продолжительность видео": "{{Video Duration}}",

"Сколько % просмотрел видео": "{{Video Percent}}"

}

Вместо {{Video... }} будут динамически подставляться значения из переменных уровня данных и вместе с событием передаваться в Яндекс Метрику в качестве параметров событий.

Триггером активации задайте триггер специального события, созданный на предыдущем шаге. Итоговый тег Яндекс Метрики с параметрами событий для отслеживания видео Rutube будет выглядеть так:

Итоговый тег отслеживания видео Rutube для Яндекс Метрики

Сохраните его.

Режим отладки

Проверить корректность передачи данных и срабатывания целей Яндекс Метрики можно с помощью режима предварительного просмотра и конструкции _ym_debug=2. Добавьте ее после параметра _ytm_preview через &, чтобы получилось так:

https://site.ru/?_ytm_preview=XXXXXXXXXXXXXXXX&_ym_debug=2

1	https://site.ru/?_ytm_preview=XXXXXXXXXXXXXXXX&_ym_debug=2

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

Вы можете сделать это даже в режиме Инкогнито, после компиляции ссылки для режима предварительного просмотра ЯТМ. Внизу страницы появится значок . Нажмите на него, чтобы открыть панель отладки. Перейдите на вкладку Events и начните взаимодействовать со своим плеером Rutube. Если вы все настроили корректно, то на шкале событий вы увидите достижения настроенных JS-целей - start, pause, seek, buffering, progress, complete:

Разные события Rutube

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

Переданные параметры события видео Rutube

Отчеты в Яндекс Метрике

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

Открыв отчет по параметрам событий, вы увидите параметр визита со значением rutube:

Параметры события rutube

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

Отслеживаемые события Rutube

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

Параметры события

В дальнейшем вы можете использовать параметры события при создании собственных сегментов Яндекс Метрики.

Помимо параметров события мы еще настроили отслеживание стандартных конверсий. Через некоторое время данные по ним отобразятся в Яндекс Метрике в отчете Конверсии:

Отслеживаемые конверсии в Яндекс Метрике

Метки: dataLayer, Rutube, Яндекс Метрика, Яндекс Тег Менеджер

Отслеживание видео Rutube с помощью Яндекс Тег Менеджера

Активация Тег Менеджера и пользовательского HTML

Создание триггера

Создание тега “Пользовательский HTML”

Проверка работы скрипта

Создание триггера

Создание пользовательских переменных

Создание целей в Яндекс Метрике

Тег события Яндекс Метрики

Режим отладки

Отчеты в Яндекс Метрике

Подписывайтесь на мой Telegram-канал!

Еще статьи