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>

Video of how to use the listener

Related Event Listener

Vidyard

Measure the success of your Vidyard videos, with this event listener, it’s possible to measure user interactions with your Vidyard Videos.

Wistia

Measure how users interact with your embedded Wistia videos, you can track specific video consumption with the video details.

Calendly

Track your Calendly booking funnels and interactions, using this Calendly event listener, making it possible to fire your trigger on bookings.

download the google tag manager recipe for tracking Vimeo Video Interactions

we make you smarter with data

made with โค๏ธ

The DumbData Team
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on reddit
Share on whatsapp