v8-ui-atoms
Version:
A library of common base components for building ui
83 lines • 3.81 kB
JavaScript
import * as React from "react";
export const gtm = (params) => {
if (!!window.dataLayer) {
window.dataLayer.push(params);
}
};
// This method should not be fired directly unless absolutely required!
// For example, if the data to be logged can only be served after a callback or state change in the component that's logging an event
export const fireAnalyticsEvents = (gtmEvents) => {
gtmEvents instanceof Array
? gtmEvents.forEach((event) => gtm(event))
: gtm(gtmEvents);
};
class RenderAnalytics extends React.Component {
constructor() {
super(...arguments);
this.analyticsEventsHandlers = (props) => {
const { analyticsEvents, analyticsEventsCallback, children } = props;
const eventHandlers = {
onClick: (e) => {
!!children.props &&
!!children.props.onClick &&
children.props.onClick(e);
!!analyticsEvents &&
!!analyticsEvents.event &&
!!analyticsEvents.event.click &&
fireAnalyticsEvents(analyticsEvents.event.click.gtm);
},
onBlur: (e) => {
!!children.props && !!children.props.onBlur && children.props.onBlur();
!!analyticsEvents &&
!!analyticsEvents.event &&
!!analyticsEvents.event.blur &&
fireAnalyticsEvents(analyticsEvents.event.blur.gtm);
},
onMouseDown: (e) => {
!!children.props &&
!!children.props.onMouseDown &&
children.props.onMouseDown();
!!analyticsEvents &&
!!analyticsEvents.event &&
!!analyticsEvents.event.onMouseDown &&
fireAnalyticsEvents(analyticsEvents.event.onMouseDown.gtm);
},
onChange: (e) => {
const changeEvents = analyticsEventsCallback &&
analyticsEventsCallback(e && e.target && e.target.value);
!!children.props &&
!!children.props.onChange &&
children.props.onChange(e);
!!changeEvents &&
!!changeEvents.event &&
!!changeEvents.event.onChange &&
fireAnalyticsEvents(changeEvents.event.onChange.gtm);
},
onKeyPress: (e) => {
!!children.props &&
!!children.props.onKeyPress &&
children.props.onKeyPress();
if (e.keyCode === 13) {
!!analyticsEvents &&
!!analyticsEvents.event &&
!!analyticsEvents.event.onReturnKeyPress &&
fireAnalyticsEvents(analyticsEvents.event.onReturnKeyPress.gtm);
}
},
};
return eventHandlers;
};
}
componentDidMount() {
if (this.props.analyticsEvents &&
this.props.analyticsEvents.event &&
this.props.analyticsEvents.event.pageLoad) {
gtm(this.props.analyticsEvents.event.pageLoad.gtm);
}
}
render() {
return this.props.children ? (React.cloneElement(this.props.children, Object.assign({}, this.analyticsEventsHandlers(this.props)))) : (React.createElement(React.Fragment, null));
}
}
export default RenderAnalytics;
//# sourceMappingURL=RenderAnalytics.js.map