Vimeo Event Listener

Conversion tracking for your Hubspot forms has never been easier. Automatically push detailed activity from your Regular and Popup into the data layer for easy measurement and analytics using Google Tag Manager.

How to track Vimeo Video Interactions with google tag manager

User interactions with your embedded Vimeo video can be tracked using this event listener, which makes the process of setting this up in your Google Tag Manager easy.

First, you’ll have to create a custom HTML tag, where the event listener script will be added. Attach a trigger to your tag to have it fire on DOM-ready.

The Vimeo event listener script emits different events based on the type of interaction (play, pause, and Watch to End)

Create the following variables;

videoAction –>> tells the video progress percentage

videoName –>> returns the video name

This is a Vimeo tracking script for tracking video interactions in your analytics stack.

Credit

The creator of this code is Bounteous

<script type="text/javascript" id="gtm-vimeo-tracking">
(function(g, d, k) {
function m() {
var a = n(r("iframe"), t);
a.length && u(function() {
h(a, v)
})
}

function t(a) {
return -1 < a.src.indexOf("player.vimeo.com/video/")
}

function u(a) {
l(d.Vimeo) ? w("https://player.vimeo.com/api/player.js", a) : a()
}

function v(a) {
if (!a.__vimeoTracked) {
a.__vimeoTracked = !0;
var c = new Vimeo.Player(a),
b = k._track.percentages,
e = {
Play: "play",
Pause: "pause",
"Watch to End": "ended"
},
f = {};
c.getVideoTitle().then(function(a) {
h(["Play", "Pause", "Watch to End"], function(b) {
if (k.events[b]) c.on(e[b], function() {
p(b,
a)
})
});
if (b) c.on("timeupdate", function(e) {
e = e.percent;
for (var c in b) e >= b[c] && !f[c] && (f[c] = !0, p(c, a))
})
})
}
}

function x(a) {
a = y({}, {
events: {
Play: !0,
Pause: !0,
"Watch to End": !0
},
percentages: {
each: [],
every: []
}
}, a);
h(["each", "every"], function(b) {
var c = a.percentages[b];
q(c) || (c = [c]);
c && (a.percentages[b] = z(c, Number))
});
var c = [].concat(a.percentages.each);
a.percentages.every && h(a.percentages.every, function(a) {
var b = 100 / a,
e = [],
d;
for (d = 1; d < b; d++) e.push(a * d);
c = c.concat(n(e, function(a) {
return 0 < a && 100 > a
}))
});
var b =
A(c, function(a, b) {
a[b + "%"] = b / 100;
return a
}, {});
a._track = {
percentages: b
};
return a
}

function B(a) {
a = a || {};
var c = a.name || "dataLayer",
b = a.name || d.GoogleAnalyticsObject || "ga",
e = "_gaq",
f = {
gtm: function(a, b) {
g.push({
event: "vimeoTrack",
attributes: {
videoAction: a,
videoName: b
}
})
},
cl: function(a, b) {
d[e].push(["_trackEvent", "Videos", a, b])
},
ua: function(a, c) {
d[b]("send", "event", "Videos", a, c)
}
};
switch (a.type) {
case "gtm":
var g = d[c] = d[c] || [];
break;
case "ua":
d[b] = d[b] || function() {
(d[b].q = d[b].q || []).push(arguments)
};
d[b].l = +new Date;
break;
case "cl":
d[e] = d[e] || [];
break;
default:
l(d[c]) ? b && !l(d[b]) ? a.type = "ua" : l(d[e]) || l(d[e].push) || (a.type = "cl") : (a.type = "gtm", g = d[c] = d[c] || [])
}
return f[a.type]
}

function y() {
var a = [].slice.call(arguments),
c = a.shift(),
b, e;
for (e = 0; e < a.length; e++) {
var d = a[e];
for (b in d) c[b] = d[b]
}
return c
}

function q(a) {
return Array.isArray_ ? Array.isArray_(a) : "[object Array]" === Object.prototype.toString.call(a)
}

function h(a, c) {
if (Array.prototype.forEach_) return a.forEach.call(a, c);
var b;
for (b = 0; b < a.length; b++) c.call(d,
a[b], b, a)
}

function z(a, c) {
if (Array.prototype.map_) return a.map.call(a, c);
var b = [];
h(a, function(a, f, g) {
b.push(c.call(d, a, f, g))
});
return b
}

function n(a, c) {
if (Array.prototype.filter) return a.filter.call(a, c);
var b = [];
h(a, function(a, f, g) {
c.call(d, a, f, g) && b.push(a)
});
return b
}

function A(a, c, b) {
if (Array.prototype.reduce) return a.reduce.call(a, c, b);
var e;
for (e = 0; e < a.length; e++) {
var f = a[e];
b = c.call(d, b, f, a, e)
}
return b
}

function l(a) {
return "undefined" === typeof a
}

function r(a) {
q(a) || (a = [a]);
return [].slice.call(g.querySelectorAll(a.join()))
}

function w(a, c) {
function b() {
c && (c(), f.onload = null)
}
var d = g.getElementsByTagName("script")[0];
var f = g.createElement("script");
f.onload = b;
f.src = a;
f.async = !0;
d.parentNode.insertBefore(f, d)
}
if (!navigator.userAgent.match(/MSIE [678]\./gi)) {
k = x(k);
var p = B(k.syntax);
"loading" !== g.readyState ? m() : g.addEventListener("DOMContentLoaded", m);
g.addEventListener("load", m, !0)
}
})(document, window, {
events: {
Play: !0,
Pause: !0,
"Watch to End": !0
},
percentages: {
every: 25,
each: [10, 90]
}
});
</script>