@phantomstudios/ft-lib
Version:
A collection of Javascript UI & tracking utils for FT sites
118 lines • 5.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.gaTracker = void 0;
var HEADER_CATEGORY = "Header";
var HEADER_SEARCH_ACTION = "Engagement - Search";
var gaTracker = /** @class */ (function () {
function gaTracker(options) {
this.options = options;
this.setUpFTNavigationLinksTracking();
this.addDataAttributesListener();
this.setUpFTNavigationSearchTracking(HEADER_CATEGORY, HEADER_SEARCH_ACTION);
this.setupFooterLinksTracking();
}
/*Dhia - Nov 2023 - For new FT GA4 implementations, customEvents typically only need a single property name (i.e category as the GA4 'event name')
so the other properties are now optional */
gaTracker.prototype.GTMEventDispatcher = function (category, action, label) {
if (action === void 0) { action = ""; }
if (label === void 0) { label = ""; }
//from channels - sets event categories on window on certain pages..replace?
if (category === "<category>" && window.gtmCategory) {
category = window.gtmCategory;
}
window.dataLayer.push({
event: "customEvent",
category: category,
action: action,
label: label,
});
};
gaTracker.prototype.GTMVirtualPageView = function (pageUrl, pageTitle) {
window.dataLayer.push({
event: "virtualPageView",
pageUrl: pageUrl,
pageTitle: pageTitle,
});
};
gaTracker.prototype.GtagEventDispatcher = function (category, action, label) {
window.gtag("event", action, {
event_category: category,
event_label: label,
});
};
gaTracker.prototype.addDataAttributesListener = function () {
var _this = this;
document.body.addEventListener("click", function (evt) {
//get nearest element with data-gadl attribute
var elm = evt.target.closest("[data-gadl]");
var gaEventString = elm === null || elm === void 0 ? void 0 : elm.getAttribute("data-gadl");
if (!gaEventString)
return;
var _a = gaEventString.split("|"), category = _a[0], action = _a[1], label = _a[2];
if (typeof window !== "undefined") {
if (_this.options.isCustomGTMEvent) {
_this.GTMEventDispatcher(category, action, label || window.location.pathname);
}
else {
_this.GtagEventDispatcher(category, action, label || window.location.pathname);
}
}
});
};
gaTracker.prototype.setUpFTNavigationLinksTracking = function () {
var FTNavigationLinks = Array.from(document.querySelectorAll(".o-header__drawer-menu-link"));
if (FTNavigationLinks) {
FTNavigationLinks.map(function (navLink) {
var trackingValue = "Header|Engagement - Hamburger|".concat(document.URL, " - ").concat(navLink.href);
navLink.setAttribute("data-gadl", trackingValue);
});
}
};
gaTracker.prototype.setUpFTNavigationSearchTracking = function (category, action) {
var _this = this;
var searchForm = document.querySelector(".o-header__search-form");
if (searchForm) {
searchForm.addEventListener("submit", function (event) {
var _a;
event.preventDefault();
var searchBarContent = (_a = document.querySelector(".o-header__search-term")) === null || _a === void 0 ? void 0 : _a.value;
if (typeof window !== "undefined") {
if (_this.options.isCustomGTMEvent) {
window.dataLayer.push({
event: "customEvent",
category: category,
action: "".concat(action, ": ").concat(searchBarContent),
label: window.location.pathname,
eventCallback: function () {
searchForm.submit();
},
eventTimeout: 2000,
});
}
else {
window.gtag("event", action, {
event_category: category,
event_label: searchBarContent,
event_callback: function () {
searchForm.submit();
},
event_timeout: 2000,
});
}
}
});
}
};
gaTracker.prototype.setupFooterLinksTracking = function () {
var FTFooterLinks = Array.from(document.querySelectorAll(".o-footer__legal-links li a"));
if (FTFooterLinks) {
FTFooterLinks.forEach(function (footerLink) {
var trackingValue = "Footer|Click - Footer Nav - ".concat(footerLink.href, "|").concat(document.URL);
footerLink.setAttribute("data-gadl", trackingValue);
});
}
};
return gaTracker;
}());
exports.gaTracker = gaTracker;
//# sourceMappingURL=index.js.map