@phantomstudios/ft-lib
Version:
A collection of Javascript UI & tracking utils for FT sites
122 lines • 4.62 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Attention = void 0;
var o_viewport_1 = __importDefault(require("@financial-times/o-viewport"));
var ATTENTION_INTERVAL = 15000;
var ATTENTION_EVENTS = [
"load",
"click",
"focus",
"scroll",
"mousemove",
"touchstart",
"touchend",
"touchcancel",
"touchleave",
];
var UNATTENTION_EVENTS = ["blur"];
var EXIT_EVENTS = ["beforeunload", "unload", "pagehide"];
var Attention = /** @class */ (function () {
function Attention(oTracker) {
this.totalAttentionTime = 0;
this.hasSentEvent = false;
this.oTracker = oTracker;
this.init();
}
Attention.prototype.init = function () {
var _this = this;
//Add events for all the other Attention events
for (var i = 0; i < ATTENTION_EVENTS.length; i++) {
window.addEventListener(ATTENTION_EVENTS[i], function (ev) {
return _this.startAttention(ev);
});
}
for (var i = 0; i < UNATTENTION_EVENTS.length; i++) {
window.addEventListener(UNATTENTION_EVENTS[i], function (ev) {
return _this.endAttention(ev);
});
}
// Need to wait for this to be available
o_viewport_1.default.listenTo("visibility");
document.body.addEventListener("oViewport.visibility", function (ev) { return _this.handleVisibilityChange(ev); }, false);
this.addVideoEvents();
// Add event to send data on unload
EXIT_EVENTS.forEach(function (event) {
window.addEventListener(event, function () {
if (_this.hasSentEvent) {
return;
}
_this.hasSentEvent = true;
_this.endAttention();
_this.oTracker.eventDispatcher({
category: "page",
action: "interaction",
context: {
attention: {
total: _this.totalAttentionTime,
},
},
});
});
});
};
Attention.prototype.startAttention = function () {
var _this = this;
clearTimeout(this.attentionTimeout);
if (!this.startAttentionTime) {
this.startAttentionTime = new Date().getTime();
}
this.attentionTimeout = setTimeout(function () { return _this.endAttention(); }, ATTENTION_INTERVAL);
};
Attention.prototype.startConstantAttention = function () {
var _this = this;
this.constantAttentionInterval = setInterval(function () { return _this.startAttention(); }, ATTENTION_INTERVAL);
};
Attention.prototype.endConstantAttention = function () {
this.endAttention();
clearInterval(this.constantAttentionInterval);
};
Attention.prototype.endAttention = function () {
if (this.startAttentionTime) {
this.endAttentionTime = new Date().getTime();
this.totalAttentionTime += Math.round((this.endAttentionTime - this.startAttentionTime) / 1000);
clearTimeout(this.attentionTimeout);
this.startAttentionTime = null;
}
};
Attention.prototype.get = function () {
//getter should restart attention capturing as endAttention updates the value:
this.endAttention();
this.startAttention();
return this.totalAttentionTime;
};
Attention.prototype.addVideoEvents = function () {
var _this = this;
this.videoPlayers = document.getElementsByTagName("video");
for (var i = 0; i < this.videoPlayers.length; i++) {
this.videoPlayers[i].addEventListener("playing", function (ev) {
return _this.startConstantAttention(ev);
});
this.videoPlayers[i].addEventListener("pause", function (ev) {
return _this.endConstantAttention(ev);
});
this.videoPlayers[i].addEventListener("ended", function (ev) {
return _this.endConstantAttention(ev);
});
}
};
Attention.prototype.handleVisibilityChange = function (ev) {
if (ev.detail.hidden) {
this.endAttention();
}
else {
this.startAttention();
}
};
return Attention;
}());
exports.Attention = Attention;
//# sourceMappingURL=attention.js.map