@phantomstudios/ft-lib/lib/utils/scroll.js

A collection of Javascript UI & tracking utils for FT sites

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollTracker = void 0;
var attention_1 = require("./attention");
require("./intersectionObserverPolyfill");
var ScrollTracker = /** @class */ (function () {
    function ScrollTracker(FTTracker) {
        this.oTracker = FTTracker.oTracker;
        this.gaTracker = FTTracker.gaTracker;
        this.options = FTTracker.options;
        this.config = FTTracker.config;
        this.attention = new attention_1.Attention(this.oTracker);
        this.scrollDepthInit([25, 50, 75, 100], this.options.scrollTrackerSelector);
    }
    ScrollTracker.prototype.reset = function () {
        document.querySelectorAll("[data-percentage]").forEach(function (element) {
            element.remove();
        });
        this.attention = new attention_1.Attention(this.oTracker);
        this.scrollDepthInit([25, 50, 75, 100], this.options.scrollTrackerSelector);
    };
    ScrollTracker.prototype.scrollDepthInit = function (percentages, selector) {
        var _this = this;
        if (selector === void 0) { selector = ""; }
        var element = document.querySelector(selector);
        if (element && window.IntersectionObserver) {
            var observer_1 = new IntersectionObserver(function (changes) {
                _this.intersectionCallback(observer_1, changes);
            });
            percentages.forEach(function (percentage) {
                // add a scroll depth marker element
                var targetEl = document.createElement("div");
                targetEl.className = "n-ui__scroll-depth-marker";
                targetEl.style.position = "absolute";
                targetEl.style.top = "".concat(percentage, "%");
                targetEl.style.bottom = "0";
                targetEl.style.width = "100%";
                targetEl.style.zIndex = "-1";
                targetEl.setAttribute("data-percentage", percentage.toString());
                element.appendChild(targetEl);
                observer_1.observe(targetEl);
            });
        }
    };
    ScrollTracker.prototype.intersectionCallback = function (observer, changes) {
        var _this = this;
        changes.forEach(function (change) {
            if (change.isIntersecting || change.intersectionRatio > 0) {
                var scrollDepthMarkerEl = change.target;
                var percentagesViewed = scrollDepthMarkerEl.getAttribute("data-percentage");
                var data = {
                    action: "scrolldepth",
                    category: "page",
                    meta: {
                        percentagesViewed: percentagesViewed,
                    },
                    product: _this.config.product,
                    source: _this.config.product,
                    app: _this.config.app,
                };
                _this.oTracker.eventDispatcher(data);
                //send GA scroll events if not GTM
                if (!_this.options.isCustomGTMEvent) {
                    _this.gaTracker.GtagEventDispatcher("Scroll", "scroll - ".concat(percentagesViewed, "%"), window.location.pathname);
                }
                if (scrollDepthMarkerEl.parentNode) {
                    scrollDepthMarkerEl.parentNode.removeChild(scrollDepthMarkerEl);
                }
            }
        });
    };
    return ScrollTracker;
}());
exports.ScrollTracker = ScrollTracker;
//# sourceMappingURL=scroll.js.map