@phantomstudios/ft-lib
Version:
A collection of Javascript UI & tracking utils for FT sites
85 lines • 4.07 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.reactPlayerTracking = void 0;
var debug_1 = __importDefault(require("debug"));
var permutiveVideoUtils_1 = require("../permutiveVideoUtils");
var debug = (0, debug_1.default)("@phantomstudios/ft-lib");
var reactPlayerTracking = /** @class */ (function () {
function reactPlayerTracking(FTTracker, videoTitle, videoUrl) {
var _this = this;
this.duration = 0;
this.playedSeconds = 0;
this.playedPercent = 0;
/** 100% is fired with ended event */
this.GA_milestones = [1, 25, 50, 75];
this.oTracking_milestones = [25, 50, 75];
this.setDuration = function (duration) {
_this.duration = Math.floor(duration);
};
this.sendGAEvent = function (action) {
debug("GA datalayer push - " + action);
_this.FTTracker.gaEvent("Video", action, _this.videoTitle);
};
this.sendoTrackingEvent = function (action, progress) {
debug("oTracking event - " + action);
_this.FTTracker.oEvent(__assign({ category: "video", action: action, product: _this.FTTracker.config.product, app: _this.FTTracker.config.app, duration: _this.duration }, (progress && { progress: progress })));
};
this.trackPlay = function () {
_this.sendGAEvent("playing");
_this.sendoTrackingEvent("playing");
};
this.trackPause = function () {
_this.sendGAEvent("pause");
_this.sendoTrackingEvent("pause");
};
this.trackEnded = function () {
//fire 100% progress events
_this.sendGAEvent("100% watched");
_this.sendoTrackingEvent("progress", 100);
_this.sendGAEvent("ended");
_this.sendoTrackingEvent("ended", 100);
};
this.trackProgress = function (reactPlayerProgress) {
var _a;
_this.playedSeconds = reactPlayerProgress.playedSeconds;
if (_this.duration > 0) {
_this.playedPercent = Math.floor((Math.ceil(reactPlayerProgress.playedSeconds) / _this.duration) * 100);
}
while (_this.playedPercent >= _this.GA_milestones[0]) {
debug("GA progress milestone - " + _this.GA_milestones[0]);
_this.sendGAEvent("".concat(_this.GA_milestones[0], "% watched"));
_this.GA_milestones.shift();
}
while (_this.playedPercent >= _this.oTracking_milestones[0]) {
debug("oTracking progress milestone - " + _this.oTracking_milestones[0]);
_this.sendoTrackingEvent("progress", _this.oTracking_milestones[0]);
_this.oTracking_milestones.shift();
}
//permutive only tracks progress events and contains its own milestones
debug("edit permutive progress event- " + _this.playedSeconds);
(_a = _this.permutiveTracker) === null || _a === void 0 ? void 0 : _a.emitPermutiveProgressEvent(_this.duration, _this.playedSeconds);
};
/** oTracking dispatch event function */
this.FTTracker = FTTracker;
this.videoTitle = videoTitle;
this.videoUrl = videoUrl;
this.permutiveTracker = new permutiveVideoUtils_1.permutiveVideoUtils(this.FTTracker.config.campaign, this.videoTitle, this.videoUrl);
}
return reactPlayerTracking;
}());
exports.reactPlayerTracking = reactPlayerTracking;
//# sourceMappingURL=index.js.map