@phantomstudios/ft-lib/lib/oTracker/index.js

A collection of Javascript UI & tracking utils for FT sites

"use strict";
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.oTracker = void 0;
var o_tracking_1 = __importDefault(require("@financial-times/o-tracking"));
var cookies_1 = require("../utils/cookies");
var getTrace_1 = __importDefault(require("../utils/getTrace"));
var yupValidator_1 = require("../utils/yupValidator");
/* oTracking setup for server-rendered (i.e. Wagtail) sites
The config object is read from the server-rendered o-tracking-data element
*/
var oTracker = /** @class */ (function () {
    function oTracker(config, options) {
        this._config = (0, yupValidator_1.parseConfig)(config, options.disableAppFormatTransform || false);
        (0, yupValidator_1.validateConfig)(this._config, options.disableAppFormatTransform || false, options.logValidationErrors || false);
        this._config.source_id = o_tracking_1.default.getRootID();
        this.options = options;
        //init config data
        var configData = {
            server: "https://spoor-api.ft.com/px.gif",
            context: __assign({}, this._config),
            user: {
                ft_session: (0, cookies_1.getValueFromCookie)(/FTSession=([^;]+)/),
            },
        };
        o_tracking_1.default.init(configData);
        //setup listeners
        this.OTrackingHandler();
        //send Origami DomLoaded event
        //document.dispatchEvent(new CustomEvent("o.DOMContentLoaded"));  //TODO this isnt needed on next and breaks the cookie-message eventhandlers - is it needed for the server sites?
        //send page hits
        this.broadcastPageView();
        if (options.sendBrandedContent) {
            this.broadcastBrandedContent();
        }
    }
    Object.defineProperty(oTracker.prototype, "config", {
        get: function () {
            return this._config;
        },
        set: function (c) {
            this._config = c;
        },
        enumerable: false,
        configurable: true
    });
    oTracker.prototype.eventDispatcher = function (detail) {
        if (typeof detail === "object" && detail.category && detail.action) {
            (0, yupValidator_1.validateOrigamiEvent)(detail);
            detail.app = this.config.app;
            detail.product = this.config.product;
            document.body.dispatchEvent(new CustomEvent("oTracking.event", { detail: detail, bubbles: true }));
        }
        else {
            throw "Invalid event type";
        }
    };
    oTracker.prototype.broadcastPageView = function () {
        o_tracking_1.default.page({
            app: this.config.app,
            product: this.config.product,
            title: document.title,
        });
    };
    oTracker.prototype.broadcastBrandedContent = function () {
        document.body.dispatchEvent(new CustomEvent("oTracking.event", {
            detail: __assign(__assign({}, this.config), { action: "view", category: "brandedContent" }),
            bubbles: true,
        }));
    };
    oTracker.prototype.OTrackingHandler = function () {
        var _this = this;
        document.body.addEventListener("click", function (event) {
            var trackableElement = event
                .composedPath()
                .find(function (elm) {
                return elm instanceof HTMLElement &&
                    elm.hasAttribute &&
                    elm.hasAttribute("data-o-event");
            });
            if (trackableElement && trackableElement instanceof HTMLElement) {
                var data = trackableElement.getAttribute("data-o-event");
                var detail_1 = {};
                var trace = (0, getTrace_1.default)(trackableElement).trace;
                if (data) {
                    data.split("|").forEach(function (item) {
                        var kv = item.split(":");
                        //TODO
                        // @ts-ignore
                        detail_1[kv[0]] = kv[1];
                    });
                    //TODO
                    // @ts-ignore
                    detail_1.domPathTokens = trace;
                }
                _this.eventDispatcher(detail_1);
            }
        });
    };
    return oTracker;
}());
exports.oTracker = oTracker;
//# sourceMappingURL=index.js.map