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

27 декабря, 2025

Хотите разобраться, как отслеживать видео и аудио, встроенные на ваш сайт через специальные теги, с помощью Яндекс Тег Менеджера? Речь не об отслеживании внешних плееров (YouTube, Rutube, VK, Vimeo и т.д.), а именно о медиа, размещенных прямо на вашем сайте. Тогда это руководство для вас!

Содержание

Начало

Оно представляет собой адаптированное решение, о котором я писал в другой статье. В нем использовались Google Tag Manager и шаблон тега HTML Media Elements Tracker, разработанный Дэвидом Вальехо (David Vallejo), автором блога thyngster.com и множества полезных инструментов для веб-аналитики, включая расширения для браузера Google Chrome Yandex Metrica Debugger и GTM/GA Debug. Все оригинальные ссылки и комментарии автора прикреплены к материалу.

Владельцы привыкли встраивать на свои сайты видео через проигрыватели популярных сервисов и платформ - YouTube, Rutube, VK, Vimeo, Brightcove, JW Player и др. Но помимо них в HTML5 реализована возможность встраивания видео через тег <video>. Он позволяет добавлять, воспроизводить и управлять настройками видеоролика прямо на веб-странице, без установки сторонних плагинов. Управление воспроизведением (старт, пауза, громкость, перемотка) обеспечивается встроенными элементами браузера.

Синтаксис для <video> на сайте выглядит так:

<video>
<source src="URL">
</video>

<video>

</video>

, где source src - тег и атрибут, через которые задается путь к вашему файлу с видео.

Примечание: у тега <video> есть большое количество других атрибутов (autoplay, controls, width, height, loop, poster и т.д.), о которых подробнее можно почитать на htmlbook.ru.

Если видео размещено описанным выше способом, то при инспектировании элемента через консоль разработчика (клавиша F12 для Google Chrome) вы увидите соответствующий тег <video>:

Инспектирование элемента

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

Встраиваемые видеопроигрыватели от других сервисов, как правило, отличаются "брендированной" ссылкой, которая также отображается при инспектировании элемента. Например, встроенное на сайте через проигрыватель Vimeo видео в ссылке содержит https://player.vimeo.com:

Пример видео Vimeo

Для роликов с rutube.ru ссылка содержит //rutube.ru/, для dailymotion.com - dailymotion.com/embed/video и т.д. Чаще всего такие видео размещаются в теге <iframe> и для их отслеживания необходимо применять другие методики. Если вы не можете найти название видеохостинга, скорее всего, это проигрыватель HTML5.

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

Дэвид Вальехо разрабатывал свое решение HTML Media Elements Tracker для Google Tag Manager. Нам же необходимо адаптировать его под Яндекс Тег Менеджер. Как это сделать?

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

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

Пример перенесенного шаблона тега из GTM в ЯТМ

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

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

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

Гораздо проще воспользоваться первым вариантом: создать тег типа Пользовательский HTML и вставить в него приведенный ниже код, который я специально для вас адаптировал под Яндекс Тег Менеджер (с нужной структурой dataLayer):

<script>
!function(t, e) {
    "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = t || self)._htmlMediaElementsTracker = e()
}(this, (function() {
    "use strict";

    function t(t, e) {
        var a = Object.keys(t);
        if (Object.getOwnPropertySymbols) {
            var r = Object.getOwnPropertySymbols(t);
            e && (r = r.filter((function(e) {
                return Object.getOwnPropertyDescriptor(t, e).enumerable
            }))), a.push.apply(a, r)
        }
        return a
    }

    function e(e) {
        for (var r = 1; r < arguments.length; r++) {
            var n = null != arguments[r] ? arguments[r] : {};
            r % 2 ? t(Object(n), !0).forEach((function(t) {
                a(e, t, n[t])
            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : t(Object(n)).forEach((function(t) {
                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t))
            }))
        }
        return e
    }

    function a(t, e, a) {
        return e in t ? Object.defineProperty(t, e, {
            value: a,
            enumerable: !0,
            configurable: !0,
            writable: !0
        }) : t[e] = a, t
    }

    function r(t, e) {
        return function(t) {
            if (Array.isArray(t)) return t
        }(t) || function(t, e) {
            var a = t && ("undefined" != typeof Symbol && t[Symbol.iterator] || t["@@iterator"]);
            if (null != a) {
                var r, n, o = [],
                    c = !0,
                    d = !1;
                try {
                    for (a = a.call(t); !(c = (r = a.next()).done) && (o.push(r.value), !e || o.length !== e); c = !0);
                } catch (t) {
                    d = !0, n = t
                } finally {
                    try {
                        c || null == a.return || a.return()
                    } finally {
                        if (d) throw n
                    }
                }
                return o
            }
        }(t, e) || o(t, e) || function() {
            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
        }()
    }

    function n(t) {
        return function(t) {
            if (Array.isArray(t)) return c(t)
        }(t) || function(t) {
            if ("undefined" != typeof Symbol && null != t[Symbol.iterator] || null != t["@@iterator"]) return Array.from(t)
        }(t) || o(t) || function() {
            throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
        }()
    }

    function o(t, e) {
        if (t) {
            if ("string" == typeof t) return c(t, e);
            var a = Object.prototype.toString.call(t).slice(8, -1);
            return "Object" === a && t.constructor && (a = t.constructor.name), "Map" === a || "Set" === a ? Array.from(t) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? c(t, e) : void 0
        }
    }

    function c(t, e) {
        (null == e || e > t.length) && (e = t.length);
        for (var a = 0, r = new Array(e); a < e; a++) r[a] = t[a];
        return r
    }

    var d = function(t) {};
    d.prototype = {}, d.init = function() {
        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
            o = e({
                tms: "gtm",
                datalayerVariableNames: ["auto"],
                debug: !1,
                observe: !1,
                data_elements: !1,
                start: !1,
                play: !1,
                pause: !1,
                mute: !1,
                unmute: !1,
                complete: !1,
                seek: !1,
                progress: !1,
                progress_tracking_method: "percentages",
                progress_percentages: [],
                progress_thresholds: []
            }, t),
            c = function() {
                o.debug && Function.apply.call(console.log, console, arguments)
            };
        
        var d = function(t) {
            var e = t.getBoundingClientRect();
            return !(e.top < 0 || e.left < 0 || e.bottom > (window.innerHeight || document.documentElement.clientHeight) || e.right > (window.innerWidth || document.documentElement.clientWidth))
        },
        i = function(t, nodeType) {
            // Динамический поиск статуса в зависимости от типа контента (video или audio)
            var status = t.gtm[nodeType + 'Status'];
            if (o[status]) {
                switch (o.tms) {
                    case "gtm":
                        (window.dataLayer = window.dataLayer || [], window.dataLayer.push(t));
                        break;
                    case "debug":
                        c("[ADSLU::DEBUG - Event Sent]", t)
                }
            }
        },
        l = function(t) {
            if (!t.getAttribute("data-html-media-element-tracked")) {
                var e = Math.random().toString(36).slice(2);
                t.setAttribute("data-html-media-element-id", e), t.setAttribute("data-html-media-element-tracked", Math.round(1 * new Date / 1e3)), m[e] = {
                    progressMarkers: {},
                    type: t.nodeName.toLowerCase(),
                    greatest_marker: 0,
                    playEvent: !1,
                    muted: !1,
                    currentTime: 0,
                    state: "loaded",
                    elapsedTime: 0,
                    lastUpdateTime: 1 * new Date,
                    elementData: {}
                };
                var a = JSON.parse(JSON.stringify(t.dataset));
                for (var r in a) {
                    var n = r.match(/^htmlMediaElementParam(.+)/);
                    n && (m[e].elementData[n[1].toLowerCase()] = a[r])
                }
                "percentages" === o.progress_tracking_method && o.progress_percentages.forEach((function(t) {
                    m[e].progressMarkers[t] = !1
                })), t.addEventListener("play", s, !1), t.addEventListener("pause", s, !1), t.addEventListener("ended", s, !1), t.addEventListener("timeupdate", s, !1), t.addEventListener("seeked", s, !1), t.addEventListener("volumechange", s, !1), t.addEventListener("error", s, !1)
            }
        },
        s = function(t) {
            var n = t.target.nodeName.toLowerCase(), // 'video' или 'audio'
                id = t.target.dataset.htmlMediaElementId,
                e = {
                    event: "gtm." + n,
                    gtm: {},
                    elementNodeName: n
                },
                stopEvent = !1;

            // Динамическое наполнение объекта gtm.audio... или gtm.video...
            e.gtm['elementClasses'] = t.target.className || "";
            e.gtm['elementId'] = t.for || id || "";
            e.gtm['elementTarget'] = t.target || "";
            e.gtm['element'] = t.srcElement || "";
            e.gtm['elementUrl'] = t.baseURI || document.location.href;
            e.gtm[n + 'Provider'] = "html5";
            e.gtm[n + 'Status'] = t.type;
            e.gtm[n + 'Url'] = t.target.currentSrc;
            e.gtm[n + 'Title'] = t.target.getAttribute("data-html-media-element-title") && o.data_elements ? t.target.getAttribute("data-html-media-element-title") : decodeURIComponent(t.target.currentSrc.split("/").pop());
            e.gtm[n + 'Duration'] = Math.round(t.target.duration);
            e.gtm[n + 'CurrentTime'] = Math.round(t.target.currentTime);
            e.gtm[n + 'ElapsedTime'] = Math.round(m[id].elapsedTime / 1e3);
            e.gtm[n + 'Percent'] = Math.floor(100 * t.target.currentTime / t.target.duration);
            e.gtm[n + 'Visible'] = d(t.target);
            e.gtm[n + 'IsMuted'] = t.target.muted;
            e.gtm[n + 'PlaybackRate'] = t.target.playbackRate;
            e.gtm[n + 'Loop'] = t.target.loop;
            e.gtm[n + 'Volume'] = t.target.volume;
            e.gtm[n + 'NetworkState'] = t.target.networkState;
            e.gtm[n + 'Data'] = m[id].elementData;

            switch (t.type) {
                case "volumechange":
                    if (e.gtm[n + 'IsMuted'] || 0 === e.gtm[n + 'Volume']) {
                        m[id].muted = !0;
                        e.gtm[n + 'Status'] = "mute";
                    } else if (m[id].muted && !e.gtm[n + 'IsMuted']) {
                        m[id].muted = !1;
                        e.gtm[n + 'Status'] = "unmute";
                    }
                    break;
                case "seeked":
                    e.gtm[n + 'Status'] = "seek";
                    m[id].playEvent = !1;
                    break;
                case "timeupdate":
                    m[id].currentTime = Math.round(t.target.currentTime);
                    var now = 1 * new Date;
                    m[id].elapsedTime += (now - m[id].lastUpdateTime);
                    m[id].lastUpdateTime = now;
                    
                    Object.entries(m[id].progressMarkers).forEach((function(val) {
                        var marker = r(val, 1)[0];
                        if (e.gtm[n + 'Percent'] >= marker && marker > m[id].greatest_marker) {
                            m[id].greatest_marker = marker;
                        }
                    }));

                    if (m[id].greatest_marker && !m[id].progressMarkers[m[id].greatest_marker]) {
                        m[id].progressMarkers[m[id].greatest_marker] = !0;
                        e.gtm[n + 'Status'] = "progress";
                        e.gtm[n + 'Percent'] = parseInt(m[id].greatest_marker);
                    }
                    break;
                case "play":
                    m[id].lastUpdateTime = 1 * new Date;
                    if (m[id].state === "loaded") {
                        m[id].state = "playing";
                        e.gtm[n + 'Status'] = "start";
                    } else {
                        stopEvent = !0;
                    }
                    break;
                case "pause":
                    m[id].state = "paused";
                    if (e.gtm[n + 'Percent'] === 100 || t.target.seeking || Math.round(t.target.currentTime) === Math.round(t.target.duration)) {
                        stopEvent = !0;
                    }
                    m[id].playEvent = !0;
                    break;
                case "ended":
                    e.gtm[n + 'Status'] = "complete";
                    m[id].playEvent = !0;
                    break;
                case "error":
                    e.gtm[n + 'ErrorCode'] = t.target.error.code;
                    e.gtm[n + 'ErrorMessage'] = t.target.error.message;
            }
            if (!stopEvent) i(e, n);
        },
        m = {},
        u = [].concat(n(document.getElementsByTagName("audio")), n(document.getElementsByTagName("video")));
        
        u.forEach((function(t) { l(t) }));
        
        if (o.observe && window.MutationObserver) {
            var g = new MutationObserver((function(mutations) {
                mutations.forEach((function(mutation) {
                    mutation.addedNodes.forEach((function(node) {
                        if (node.tagName === "VIDEO" || node.tagName === "AUDIO") {
                            l(node);
                        }
                    }))
                }))
            }));
            g.observe(document.body, { attributes: !0, childList: !0, subtree: !0 });
        }
    };
    window._htmlMediaElementsTracker = d;
    return d;
}));
</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

!function(t, e) {

"object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = t || self)._htmlMediaElementsTracker = e()

}(this, (function() {

"use strict";

function t(t, e) {

var a = Object.keys(t);

if (Object.getOwnPropertySymbols) {

var r = Object.getOwnPropertySymbols(t);

e && (r = r.filter((function(e) {

return Object.getOwnPropertyDescriptor(t, e).enumerable

}))), a.push.apply(a, r)

}

return a

}

function e(e) {

for (var r = 1; r < arguments.length; r++) {

var n = null != arguments[r] ? arguments[r] : {};

r % 2 ? t(Object(n), !0).forEach((function(t) {

a(e, t, n[t])

})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : t(Object(n)).forEach((function(t) {

Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t))

}))

}

return e

}

function a(t, e, a) {

return e in t ? Object.defineProperty(t, e, {

value: a,

enumerable: !0,

configurable: !0,

writable: !0

}) : t[e] = a, t

}

function r(t, e) {

return function(t) {

if (Array.isArray(t)) return t

}(t) || function(t, e) {

var a = t && ("undefined" != typeof Symbol && t[Symbol.iterator] || t["@@iterator"]);

if (null != a) {

var r, n, o = [],

c = !0,

d = !1;

try {

for (a = a.call(t); !(c = (r = a.next()).done) && (o.push(r.value), !e || o.length !== e); c = !0);

} catch (t) {

d = !0, n = t

} finally {

try {

c || null == a.return || a.return()

} finally {

if (d) throw n

}

return o

}

}(t, e) || o(t, e) || function() {

throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")

}()

}

function n(t) {

return function(t) {

if (Array.isArray(t)) return c(t)

}(t) || function(t) {

if ("undefined" != typeof Symbol && null != t[Symbol.iterator] || null != t["@@iterator"]) return Array.from(t)

}(t) || o(t) || function() {

throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")

}()

}

function o(t, e) {

if (t) {

if ("string" == typeof t) return c(t, e);

var a = Object.prototype.toString.call(t).slice(8, -1);

return "Object" === a && t.constructor && (a = t.constructor.name), "Map" === a || "Set" === a ? Array.from(t) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? c(t, e) : void 0

}

function c(t, e) {

(null == e || e > t.length) && (e = t.length);

for (var a = 0, r = new Array(e); a < e; a++) r[a] = t[a];

return r

}

var d = function(t) {};

d.prototype = {}, d.init = function() {

var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},

o = e({

tms: "gtm",

datalayerVariableNames: ["auto"],

debug: !1,

observe: !1,

data_elements: !1,

start: !1,

play: !1,

pause: !1,

mute: !1,

unmute: !1,

complete: !1,

seek: !1,

progress: !1,

progress_tracking_method: "percentages",

progress_percentages: [],

progress_thresholds: []

}, t),

c = function() {

o.debug && Function.apply.call(console.log, console, arguments)

};

var d = function(t) {

var e = t.getBoundingClientRect();

return !(e.top < 0 || e.left < 0 || e.bottom > (window.innerHeight || document.documentElement.clientHeight) || e.right > (window.innerWidth || document.documentElement.clientWidth))

i = function(t, nodeType) {

// Динамический поиск статуса в зависимости от типа контента (video или audio)

var status = t.gtm[nodeType + 'Status'];

if (o[status]) {

switch (o.tms) {

case "gtm":

(window.dataLayer = window.dataLayer || [], window.dataLayer.push(t));

break;

case "debug":

c("[ADSLU::DEBUG - Event Sent]", t)

}

l = function(t) {

if (!t.getAttribute("data-html-media-element-tracked")) {

var e = Math.random().toString(36).slice(2);

t.setAttribute("data-html-media-element-id", e), t.setAttribute("data-html-media-element-tracked", Math.round(1 * new Date / 1e3)), m[e] = {

progressMarkers: {},

type: t.nodeName.toLowerCase(),

greatest_marker: 0,

playEvent: !1,

muted: !1,

currentTime: 0,

state: "loaded",

elapsedTime: 0,

lastUpdateTime: 1 * new Date,

elementData: {}

};

var a = JSON.parse(JSON.stringify(t.dataset));

for (var r in a) {

var n = r.match(/^htmlMediaElementParam(.+)/);

n && (m[e].elementData[n[1].toLowerCase()] = a[r])

}

"percentages" === o.progress_tracking_method && o.progress_percentages.forEach((function(t) {

m[e].progressMarkers[t] = !1

})), t.addEventListener("play", s, !1), t.addEventListener("pause", s, !1), t.addEventListener("ended", s, !1), t.addEventListener("timeupdate", s, !1), t.addEventListener("seeked", s, !1), t.addEventListener("volumechange", s, !1), t.addEventListener("error", s, !1)

}

s = function(t) {

var n = t.target.nodeName.toLowerCase(), // 'video' или 'audio'

id = t.target.dataset.htmlMediaElementId,

e = {

event: "gtm." + n,

gtm: {},

elementNodeName: n

stopEvent = !1;

// Динамическое наполнение объекта gtm.audio... или gtm.video...

e.gtm['elementClasses'] = t.target.className || "";

e.gtm['elementId'] = t.for || id || "";

e.gtm['elementTarget'] = t.target || "";

e.gtm['element'] = t.srcElement || "";

e.gtm['elementUrl'] = t.baseURI || document.location.href;

e.gtm[n + 'Provider'] = "html5";

e.gtm[n + 'Status'] = t.type;

e.gtm[n + 'Url'] = t.target.currentSrc;

e.gtm[n + 'Title'] = t.target.getAttribute("data-html-media-element-title") && o.data_elements ? t.target.getAttribute("data-html-media-element-title") : decodeURIComponent(t.target.currentSrc.split("/").pop());

e.gtm[n + 'Duration'] = Math.round(t.target.duration);

e.gtm[n + 'CurrentTime'] = Math.round(t.target.currentTime);

e.gtm[n + 'ElapsedTime'] = Math.round(m[id].elapsedTime / 1e3);

e.gtm[n + 'Percent'] = Math.floor(100 * t.target.currentTime / t.target.duration);

e.gtm[n + 'Visible'] = d(t.target);

e.gtm[n + 'IsMuted'] = t.target.muted;

e.gtm[n + 'PlaybackRate'] = t.target.playbackRate;

e.gtm[n + 'Loop'] = t.target.loop;

e.gtm[n + 'Volume'] = t.target.volume;

e.gtm[n + 'NetworkState'] = t.target.networkState;

e.gtm[n + 'Data'] = m[id].elementData;

switch (t.type) {

case "volumechange":

if (e.gtm[n + 'IsMuted'] || 0 === e.gtm[n + 'Volume']) {

m[id].muted = !0;

e.gtm[n + 'Status'] = "mute";

} else if (m[id].muted && !e.gtm[n + 'IsMuted']) {

m[id].muted = !1;

e.gtm[n + 'Status'] = "unmute";

}

break;

case "seeked":

e.gtm[n + 'Status'] = "seek";

m[id].playEvent = !1;

break;

case "timeupdate":

m[id].currentTime = Math.round(t.target.currentTime);

var now = 1 * new Date;

m[id].elapsedTime += (now - m[id].lastUpdateTime);

m[id].lastUpdateTime = now;

Object.entries(m[id].progressMarkers).forEach((function(val) {

var marker = r(val, 1)[0];

if (e.gtm[n + 'Percent'] >= marker && marker > m[id].greatest_marker) {

m[id].greatest_marker = marker;

}

}));

if (m[id].greatest_marker && !m[id].progressMarkers[m[id].greatest_marker]) {

m[id].progressMarkers[m[id].greatest_marker] = !0;

e.gtm[n + 'Status'] = "progress";

e.gtm[n + 'Percent'] = parseInt(m[id].greatest_marker);

}

break;

case "play":

m[id].lastUpdateTime = 1 * new Date;

if (m[id].state === "loaded") {

m[id].state = "playing";

e.gtm[n + 'Status'] = "start";

} else {

stopEvent = !0;

}

break;

case "pause":

m[id].state = "paused";

if (e.gtm[n + 'Percent'] === 100 || t.target.seeking || Math.round(t.target.currentTime) === Math.round(t.target.duration)) {

stopEvent = !0;

}

m[id].playEvent = !0;

break;

case "ended":

e.gtm[n + 'Status'] = "complete";

m[id].playEvent = !0;

break;

case "error":

e.gtm[n + 'ErrorCode'] = t.target.error.code;

e.gtm[n + 'ErrorMessage'] = t.target.error.message;

}

if (!stopEvent) i(e, n);

m = {},

u = [].concat(n(document.getElementsByTagName("audio")), n(document.getElementsByTagName("video")));

u.forEach((function(t) { l(t) }));

if (o.observe && window.MutationObserver) {

var g = new MutationObserver((function(mutations) {

mutations.forEach((function(mutation) {

mutation.addedNodes.forEach((function(node) {

if (node.tagName === "VIDEO" || node.tagName === "AUDIO") {

l(node);

}

}))

}));

g.observe(document.body, { attributes: !0, childList: !0, subtree: !0 });

}

};

window._htmlMediaElementsTracker = d;

return d;

}));

</script>

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

Адаптированный скрипт для работы в Яндекс Тег Менеджере

После этого кода сразу же добавьте этот скрипт инициализации:

<script>
(function() {
  var runTracker = function() {
    if (window._htmlMediaElementsTracker && typeof window._htmlMediaElementsTracker.init === 'function') {
      window._htmlMediaElementsTracker.init({
	tms: "gtm",                    // или "debug" для проверки
	debug: true,                   // режим отладки
    	observe: true,                 // отслеживание динамически добавленных видео/аудио
    	data_elements: true,           // поддержка data-атрибутов
    	start: true,                   // начало просмотра (один раз)
   	play: true,                    // запуск воспроизведения (каждый раз)
    	pause: true,                   // пауза
    	seek: true,                    // перемотка
    	mute: true,                    // включение звука
    	unmute: true,                  // выключение звука
    	progress: true,                // пороги прогресса
    	complete: true,                // просмотр до конца (100%)
    	progress_tracking_method: "percentages",  // метод отслеживания в %
    	progress_percentages: [25, 50, 75, 100]   // пороговые значения
      });
      console.log('Отслеживание инициализировано');
    } else {
      // Если еще не загрузилось, пробуем еще раз через 100мс
      setTimeout(runTracker, 100);
    }
  };
  
  runTracker();
})();
</script>

(function() {

var runTracker = function() {

if (window._htmlMediaElementsTracker && typeof window._htmlMediaElementsTracker.init === 'function') {

window._htmlMediaElementsTracker.init({

tms: "gtm", // или "debug" для проверки

debug: true, // режим отладки

observe: true, // отслеживание динамически добавленных видео/аудио

data_elements: true, // поддержка data-атрибутов

start: true, // начало просмотра (один раз)

play: true, // запуск воспроизведения (каждый раз)

pause: true, // пауза

seek: true, // перемотка

mute: true, // включение звука

unmute: true, // выключение звука

progress: true, // пороги прогресса

complete: true, // просмотр до конца (100%)

progress_tracking_method: "percentages", // метод отслеживания в %

progress_percentages: [25, 50, 75, 100] // пороговые значения

});

console.log('Отслеживание инициализировано');

} else {

// Если еще не загрузилось, пробуем еще раз через 100мс

setTimeout(runTracker, 100);

}

};

runTracker();

})();

</script>

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

Инициализация библиотеки

_htmlMediaElementsTracker.init() инициализирует библиотеку для автоматического отслеживания событий HTML5 видео и аудио элементов на странице. Библиотека подключает обработчики событий (play, pause, seek, progress и др.) ко всем <video> и <audio> элементам, включая динамически добавленные через observe: true (использование Mutation Observer API). Без init() ничего не отслеживается - события не будут попадать в dataLayer.

Вы можете самостоятельно менять значения с true на false если не хотите, чтобы какие-то события отслеживались. В моем примере - все значения true, то есть по умолчанию отслеживаются:

Start (пользователь начинает просмотр видео, отслеживается один раз);
Play (пользователь запустил видео, отслеживается каждый раз, когда пользователь нажимает play);
Complete (пользователь посмотрел видео до конца, 100%);
Pause (пользователь останавливает видео);
Seek (пользователь перематывает видео);
Mute (включен ли звук в видео);
Unmute (отключен ли звук в видео);
Percentages (отслеживание пороговых значений, заданных вами через запятую - 25, 50, 75, 90 и т.д.);

А также поддерживаются:

динамически добавленные видео (когда ваши видео проигрываются в модальном окне или динамически добавляются на сайт);
data-атрибуты в качестве заголовка видео.

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

Добавьте к тегу триггер. Нажмите Добавить триггер:

Добавление триггера

И создайте триггер типа Инициализация:

Триггер "Инициализация"

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

Настройки триггера

Либо же оставьте условие Все события по умолчанию. Задайте название триггеру (например - Отслеживание видео) и сохраните его.

После этого он будет автоматически добавлен к вашему тегу Пользовательский HTML, а его итоговая конфигурация будет выглядеть так:

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

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

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

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

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

Поскольку Дэвид Вальехо создавал этот тег для Google Tag Manager, то и все компоненты имеют привычные для GTM формат и названия (с префиксом gtm.).

Задайте название триггеру (например - HTML5 video) и сохраните его. В дальнейшем вы будете использовать именно этот триггер для отправки данных в аналитику (Яндекс Метрику).

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

Если мы запустим режим отладки в Google Tag Manager и на шкале выберем одно из событий отслеживания HTML5 video, то обнаружим, что на уровень данных помещается очень много различных параметров:

Вызов API (API Call) в Google Tag Manager

Эти данные автоматически пушатся библиотекой в dataLayer (уровень данных) и обозначают следующее:

gtm.videoProvider - тип плеера (html5);
gtm.videoStatus - статус видео (start, play, pause, progress, complete и т.д.);
gtm.videoUrl - полный URL видеофайла;
gtm.videoTitle - название видео (извлекается из data-html-media-element-title или названия файла);
gtm.videoDuration - общая длительность видео (в секундах);
gtm.videoCurrentTime - текущее время воспроизведения (в секундах);
gtm.videoElapsedTime - пройденное время с начала события (в секундах);
gtm.videoPercent - процент просмотра (0-100);
gtm.videoVisible - видимо ли видео на экране (viewport);
gtm.videoIsMuted - выключен ли звук в видео;
gtm.videoPlaybackRate - скорость воспроизведения видео (1 = нормальная);
gtm.videoLoop - зацикливание видео (false - нет, true - да);
gtm.videoVolume - громкость видео (0-1);
gtm.videoNetworkState - состояние сети (0=empty, 1=idle, 2=loading, 3=no_source).

Дополнительно на уровень данных передается информация о самом элементе:

gtm.elementId - идентификатор HTML-элемента видео;
gtm.elementClasses - класс HTML-элемента;
gtm.elementTarget - значение атрибута target у HTML-элемента;
gtm.element - селектор элемента;
gtm.elementUrl - URL страницы;
gtm.videoData - дополнительные data-атрибуты;
elementNodeName - тип HTML-элемента.

Как видите, таких параметров гораздо больше, чем по умолчанию доступно во встроенных переменных GTM. Но именно их мы и можем создать в первую очередь в Яндекс Тег Менеджере по образу и подобию.

Переменные Video в Google Tag Manager

Всего их 8 штук: Video Current Time, Video Duration, Video Percent, Video Provider, Video Status, Video Title, Video URL и Video Visible.

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

События gtm.video в режиме отладки Яндекс Тег Менеджера

Раскрыв любое из них, перейдите на вкладку DataLayer. Там вы увидите перечень всех параметров, которые были помещены на уровень данных:

DataLayer в Яндекс Тег Менеджере

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

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

Задайте им следующие имена в поле Имя переменной уровня данных:

Video Current Time - gtm.videoCurrentTime
Video Duration - gtm.videoDuration
Video Percent - gtm.videoPercent
Video Provider - gtm.videoProvider
Video Status - gtm.videoStatus
Video Title - gtm.videoTitle
Video URL - gtm.videoUrl
Video Visible - gtm.videoVisible

Пример переменной:

Переменная "Video Status"

В результате у вас должно быть создано 8 переменных:

Созданные переменные для отслеживания HTML5 видео

Примечание: во всех переменных вы должны использовать префикс gtm. и точечную нотацию, поскольку система ищет объект gtm, а внутри него свойство (например - videoCurrentTime, videoStatus, videoUrl и т.д.).

Проверка настроек

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

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

Переменные принимают правильные значения

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

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

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

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

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

start - начало воспроизведения видео;
play - пользователь запустил видео (отслеживается каждый раз, когда пользователь нажимает play);
pause - приостановка;
seek - перемотка;
progress - достижение заданных порогов просмотра;
mute - срабатывает, когда звук выключается или громкость устанавливается в 0;
unmute - срабатывает, когда звук включается обратно;
error - срабатывает, если произошла ошибка загрузки или воспроизведения файла;
complete - пользователь посмотрел видео до конца, 100%.

Примеры созданных целей в Яндекс Метрике на разные события видео (вы можете отслеживать другие):

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

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

Чтобы выполнить похожие настройки отслеживания видео, как мы это делали для плеера Rutube, перейдите в Яндекс Тег Менеджер и создайте тег типа Яндекс Метрика:

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

В открывшемся окне задайте следующую конфигурацию тега:

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

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

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

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

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

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

{

"{{Video Provider}}": {

"{{Video Status}}": {

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

"Название видео": "{{Video Title}}",

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

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

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

"Видео в видимой области": "{{Video Visible}}"

}

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

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

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

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

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

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

Зарегистрированное событие и активированный тег

Раскрыв детальные сведения о теге и изменив опцию Отображать переменные как на Значения, вы увидите все параметры события, которые были переданы с этим тегом, а также самое событие (его название):

Детальные сведения о теге

На скриншоте выше - это событие complete (пользователь посмотрел видео до конца, на 100%).

Если вы хотите, чтобы в Яндекс Метрику передавались только конкретные события, тогда вам необходимо добавить дополнительное условие активации для триггера специального события gtm.video. Например, для отслеживания событий start, pause и complete условие будет выглядеть так - Video Status соответствует регулярному выражению:

Отслеживание конкретных событий

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

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

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

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

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

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

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

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

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

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

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

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

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

Отслеживание аудио

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

Синтаксис для <audio> на сайте выглядит так:

<audio src="URL"></audio>
<audio>
  <source src="URL">
</audio>

<audio>

</audio>

, где source src - тег и атрибут, через которые задается путь к вашему файлу с аудио.

Примечание: у тега <audio> есть и другие атрибуты (autoplay, controls, loop, preload), о которых подробнее можно почитать на htmlbook.ru.

Если аудио размещено описанным выше способом, то при инспектировании элемента через консоль разработчика (клавиша F12 для Google Chrome) вы увидите соответствующий тег <audio>:

Инспектирование элемента <audio>

Вы можете также воспользоваться шаблоном тега Дэвида Вальехо HTML Media Elements Tracker и моим адаптированным кодом под Яндекс Тег Менеджер. Различия начинаются в модели данных, которую вы увидите в режиме отладки ЯТМ:

Отличие отслеживания видео и аудио заключается в слове (было - video, стало - audio)

Если в отслеживании HTML5 видео триггер назывался gtm.video, то для аудио он отображается как gtm.audio. Аналогично и со всеми переменными, входящими в уровень данных. Было - video, стало - audio (gtm.audioStatus, gtm.audioVisible, gtm.audioPercent и т.д.). Не забудьте учесть эти изменения при создании триггера (специальное событие с названием gtm.audio) и настройке тегов для отслеживания HTML5 аудио в Яндекс Метрике.

Метки: HTML5, аудио, видео, Яндекс Тег Менеджер

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

Начало

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

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

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

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

Проверка настроек

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

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

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

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

Отслеживание аудио

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

Еще статьи