@phantomstudios/ft-lib
Version:
A collection of Javascript UI & tracking utils for FT sites
165 lines • 7.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ytIframeTracking = void 0;
var permutiveVideoUtils_1 = require("../permutiveVideoUtils");
var ytIframeTracking = /** @class */ (function () {
function ytIframeTracking(FTTracker, videoTitle, videoUrl) {
var _this = this;
this.progressMilestones = [1, 25, 50, 75];
this.videoProgressInterval = 0;
this.progressPercentage = function (duration, currentTime) {
return parseInt(((currentTime / duration) * 100).toFixed(2));
};
this.emitProgressEvents = function (progress, duration, isYoutube) {
while (progress >= _this.progressMilestones[0]) {
_this.FTTracker.gaEvent("Video".concat(window.isOvideoPlayer ? ":fallback" : ""), "".concat(_this.progressMilestones[0], "% watched"), _this.videoTitle);
if (isYoutube) {
_this.FTTracker.oEvent({
category: "video",
action: "progress",
duration: duration,
progress: progress,
});
}
_this.progressMilestones.shift();
}
};
this.FTTracker = FTTracker;
this.videoTitle =
videoTitle || window.gtmCategory || window.location.pathname; //reverted fix for channels - use window.gtmCategory to maintain the original label style
this.videoUrl = videoUrl;
this.permutiveUtils = new permutiveVideoUtils_1.permutiveVideoUtils(this.FTTracker.config.campaign, this.videoTitle);
}
//Fallback oVideo implemented only on channels - uses shared events so added here for now.
ytIframeTracking.prototype.oVideoEventHandler = function (videoEl) {
var _this = this;
window.isOvideoPlayer = true;
this.permutiveUtils.videoId = videoEl.getAttribute("src");
videoEl.addEventListener("play", function () {
_this.playTracking(videoEl.currentTime, videoEl.duration);
});
videoEl.addEventListener("progress", function () {
_this.progressTracking(videoEl.currentTime, videoEl.duration);
});
videoEl.addEventListener("seeked", function () {
_this.seekedTracking(videoEl.currentTime, videoEl.duration);
});
videoEl.addEventListener("pause", function () {
_this.pausedTracking(videoEl.currentTime, videoEl.duration);
});
videoEl.addEventListener("ended", function () {
_this.endedTracking(videoEl.currentTime, videoEl.duration);
});
};
ytIframeTracking.prototype.ytIframeEventHandler = function (event) {
var _this = this;
var player = event.target;
if (!this.videoUrl) {
this.videoUrl = player.getVideoUrl();
}
this.permutiveUtils.videoId = this.videoUrl;
//player.playerInfo.videoUrl
switch (player.getPlayerState()) {
case YT.PlayerState.ENDED:
this.endedTracking(player.getCurrentTime(), player.getDuration());
break;
case YT.PlayerState.PLAYING:
this.ytPlayTracking(player);
break;
case YT.PlayerState.PAUSED:
//test if still pause after 1 second, otherwise its a seek
setTimeout(function () {
if (player.getPlayerState() == YT.PlayerState.PAUSED) {
_this.pausedTracking(player.getCurrentTime(), player.getDuration());
}
}, 1000);
break;
}
};
ytIframeTracking.prototype.ytPlayTracking = function (player) {
var _this = this;
this.videoProgressInterval = window.setInterval(function () {
var currentTime = player.getCurrentTime();
var duration = player.getDuration();
_this.permutiveUtils.emitPermutiveProgressEvent(duration - 1, currentTime, _this.videoProgressInterval);
var progress = _this.progressPercentage(duration, currentTime);
_this.emitProgressEvents(progress, duration, true);
}, 1000);
var currentTime = player.getCurrentTime();
var duration = player.getDuration();
var progress = this.progressPercentage(duration, currentTime);
if (progress < 100) {
this.FTTracker.gaEvent("Video".concat(window.isOvideoPlayer ? ":fallback" : ""), "playing", this.videoTitle);
this.FTTracker.oEvent({
category: "video",
action: "playing",
duration: duration,
progress: progress,
});
}
};
ytIframeTracking.prototype.pausedTracking = function (currentTime, duration) {
var progress = this.progressPercentage(duration, currentTime);
this.FTTracker.gaEvent("Video".concat(window.isOvideoPlayer ? ":fallback" : ""), "pause", "".concat(this.videoTitle));
this.FTTracker.oEvent({
category: "video",
action: "pause",
duration: duration,
progress: progress,
});
};
ytIframeTracking.prototype.endedTracking = function (currentTime, duration) {
var progress = this.progressPercentage(duration, currentTime);
this.FTTracker.gaEvent("Video".concat(window.isOvideoPlayer ? ":fallback" : ""), "100% watched", "".concat(this.videoTitle));
this.FTTracker.oEvent({
category: "video",
action: "ended",
duration: duration,
progress: progress,
});
//force a 100% event on end
if (this.permutiveUtils.remainingProgress.length > 0) {
this.permutiveUtils.emitPermutiveProgressEvent(currentTime, currentTime, this.videoProgressInterval);
}
};
/*** Below events only used for FT-Channels videoJS and Origami players - remove if no longer needed ***/
/*** videojs and origami player event only ***/
ytIframeTracking.prototype.playTracking = function (currentTime, duration) {
var _this = this;
this.videoProgressInterval = window.setInterval(function () {
_this.permutiveUtils.emitPermutiveProgressEvent(duration - 1, currentTime, _this.videoProgressInterval);
}, 1000);
var progress = this.progressPercentage(duration, currentTime);
this.FTTracker.oEvent({
category: "video",
action: "playing",
duration: duration,
progress: progress,
});
};
/*** videojs and origami player event only ***/
ytIframeTracking.prototype.progressTracking = function (currentTime, duration) {
var progress = this.progressPercentage(duration, currentTime);
this.emitProgressEvents(progress, duration, false);
this.FTTracker.oEvent({
category: "video",
action: "progress",
duration: duration,
progress: progress,
});
};
/*** videojs and origami player event only ***/
ytIframeTracking.prototype.seekedTracking = function (currentTime, duration) {
var progress = this.progressPercentage(duration, currentTime);
this.emitProgressEvents(progress, duration, false);
this.FTTracker.oEvent({
category: "video",
action: "seek",
duration: duration,
progress: progress,
});
};
return ytIframeTracking;
}());
exports.ytIframeTracking = ytIframeTracking;
//# sourceMappingURL=index.js.map