Skip to content

Instantly share code, notes, and snippets.

@nicholasblexrud nicholasblexrud/vidyard.js
Last active Jan 29, 2016

Embed
What would you like to do?
Track Vidyard videos in Google Tag Manager
<script>
!function (t) {
function e(t) {
var e, r = null,
n = [];
for (e = 0; e < t.length; ++e) !r || r[1] < t[e][0] ? (r && n.push(r), r = [t[e][0], t[e][1]]) : t[e][1] > r[1] && (r[1] = t[e][1]);
return r && n.push(r), n
}
function r(t) {
var r = [0, 25, 50, 75, 90],
a = r.slice(0),
o = [0, 0],
i = 0,
s = !1,
c = n.create();
t.on("timeupdate", function(r) {
var n, u, h = 0,
p = Math.floor(r);
if (!(s || "object" != typeof t.metadata || p <= o[1])) {
o[1] = r, u = c.insertOne(o), n = e(c);
var f;
for (f = 0; f < n.length; ++f) h += n[f][1] - n[f][0];
if (c.remove(u), h = h / t.metadata.chapters_attributes[i].video_attributes.length_in_seconds * 100, h >= a[0])
if (typeof dataLayer !== "undefined" && typeof dataLayer.push === "function") {
dataLayer.push({
event: 'trackEvent',
eventCat: 'Vidyard', // removed (t.metadata.name) as name is in eventAction
eventAction: 'Played video: ' + a.shift() + '%', // swapped with eventLabel (t.metadata.chapters_attributes[i].video_attributes.name)
eventLabel: t.metadata.chapters_attributes[i].video_attributes.name, // swapped with eventAction (a.shift())
eventValue: undefined,
eventInteraction: true
});
}
}
}), t.on("beforeSeek", function(t) {
s === !1 && (o[1] = t.start), s = !0
}), t.on("play", function(t) {
var e = t;
c.insertOne(o.slice(0)), o[0] = e, o[1] = e, s = !1
}), t.on("chapterComplete", function() {
a = r.slice(0), i = t.getCurrentChapter(), o = [0, 0], c = n.create(), s = !1
})
}
var n = function() {
this._compare = function(t, e) {
return t[0] < e[0] ? -1 : t[0] > e[0] ? 1 : t[1] < e[1] ? -1 : t[1] > e[1] ? 1 : 0
}
};
n.create = function() {
return new n
}, n.prototype = new Array, n.prototype.constructor = Array.prototype.constructor, n.prototype.insertOne = function(t) {
var e = this.bsearch(t);
return this.splice(e + 1, 0, t), e + 1
}, n.prototype.remove = function(t) {
return this.splice(t, 1), this
}, n.prototype.bsearch = function(t) {
if (!this.length) return -1;
for (var e, r, n, a = 0, o = this.length; o - a > 1;) {
if (e = Math.floor((a + o) / 2), r = this[e], n = this._compare(t, r), 0 === n) return e;
n > 0 ? a = e : o = e
}
return 0 === a && this._compare(this[0], t) > 0 ? -1 : a
};
var a, o = !0;
try {
a = new t.players
} catch (i) {
throw new Error("The Vidyard API must be loaded before this script can execute")
}
for (var s in a) a.hasOwnProperty(s) && (r(a[s]), o = !1);
o && console.warn("No Vidyard Players found. (include this script below player embed codes)")
}(Vidyard);
</script>

#Track Vidyard videos in Google Tag Manager

I didn't write this code, I copied Vidyard's code used to track Google Analytics and repurposed it to instead send events to GTM.

In order to get this script to work:

  1. Add <script src="//play.vidyard.com/v0/api.js"></script> to the head of all pages.
  2. Add my script (vidyard.js) to a custom HTML tag. *I'm using trackEvent as my event.
  3. Set up a trigger that fires when there is a Vidyard video on the page and when the dom has parsed (gtm.dom).

What will this script give you:

  • Events that fire at 0, 25, 50, 75, & 90 percent.
  • Event will look like (Vidyard, Played video: 25%, Name of video - chapter)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.