fire trackEvent fn for elements with event data- attrs

webmaker/src/components/Footer.jsx

@@ -1,5 +1,6 @@
 import { h, Component } from 'preact';
 import Modal from './Modal.jsx';
+import { A } from './common';
 
 export default class Footer extends Component {
 	constructor(props) {
@@ -136,7 +137,7 @@ export default class Footer extends Component {
 						</svg>
 						<span class="notifications-btn__dot" />
 					</a>
-					<a
+					<A
 						onClick={this.props.settingsBtnClickHandler}
 						data-event-category="ui"
 						data-event-action="settingsBtnClick"
@@ -146,14 +147,14 @@ export default class Footer extends Component {
 						<svg>
 							<use xlinkHref="#settings-icon" />
 						</svg>
-					</a>
+					</A>
 				</div>
 				<a href="https://webmakerapp.com/" target="_blank">
 					<div class="logo" />
 				</a>
 				&copy;
 				<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
-				<a
+				<A
 					onClick={this.props.helpBtnClickHandler}
 					data-event-category="ui"
 					data-event-action="helpButtonClick"
@@ -166,8 +167,8 @@ export default class Footer extends Component {
 					>
 						<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
 					</svg>
-				</a>
-				<a
+				</A>
+				<A
 					onClick={this.props.keyboardShortcutsBtnClickHandler}
 					data-event-category="ui"
 					data-event-action="keyboardShortcutButtonClick"
@@ -183,7 +184,7 @@ export default class Footer extends Component {
 					>
 						<use xlinkHref="#keyboard-icon" />
 					</svg>
-				</a>
+				</A>
 				<a
 					class="footer__link  hint--rounded  hint--top-right"
 					aria-label="Tweet about 'Web Maker'"
@@ -200,7 +201,7 @@ export default class Footer extends Component {
 						<use xlinkHref="#twitter-icon" />
 					</svg>
 				</a>
-				<a
+				<A
 					onClick={this.props.supportDeveloperBtnClickHandler}
 					data-event-action="supportDeveloperFooterBtnClick"
 					class="footer__link  ml-1  hint--rounded  hint--top-right hide-on-mobile"
@@ -208,7 +209,7 @@ export default class Footer extends Component {
 					target="_blank"
 				>
 					Support the developer
-				</a>
+				</A>
 			</div>
 		);
 	}

webmaker/src/components/MainHeader.jsx

@@ -1,4 +1,6 @@
 import { h, Component } from 'preact';
+import { A } from './common';
+
 const DEFAULT_PROFILE_IMG =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
 
@@ -26,7 +28,7 @@ export default class Header extends Component {
 						</svg>Run
 					</a>
 
-					<a
+					<A
 						onClick={this.props.addLibraryBtnHandler}
 						data-event-category="ui"
 						data-event-action="addLibraryButtonClick"
@@ -43,7 +45,7 @@ export default class Header extends Component {
 						>
 							{this.props.externalLibCount}
 						</span>
-					</a>
+					</A>
 
 					<a
 						class="flex  flex-v-center hint--rounded hint--bottom-left"
@@ -95,7 +97,7 @@ export default class Header extends Component {
 						</svg>
 						Open
 					</a>
-					<a
+					<A
 						onClick={this.props.loginBtnHandler}
 						data-event-category="ui"
 						data-event-action="loginButtonClick"
@@ -103,8 +105,8 @@ export default class Header extends Component {
 						aria-label="Login/Signup"
 					>
 						Login/Signup
-					</a>
-					<a
+					</A>
+					<A
 						onClick={this.props.profileBtnHandler}
 						data-event-category="ui"
 						data-event-action="headerAvatarClick"
@@ -121,7 +123,7 @@ export default class Header extends Component {
 							}
 							class="main-header__avatar-img"
 						/>
-					</a>
+					</A>
 				</div>
 			</div>
 		);

webmaker/src/components/common.jsx

@@ -0,0 +1,26 @@
+import { h, Component } from 'preact';
+import { log } from '../utils';
+import { trackEvent } from '../analytics';
+
+class Clickable extends Component {
+	handleClick(e) {
+		const el = e.currentTarget;
+		trackEvent(
+			el.getAttribute('data-event-category'),
+			el.getAttribute('data-event-action')
+		);
+		this.props.onClick();
+	}
+	render() {
+		const { onClick, Tag, ...props } = this.props;
+		return <Tag onClick={this.handleClick.bind(this)} {...props} />;
+	}
+}
+
+export function A(props) {
+	return <Clickable Tag={'a'} {...props} />;
+}
+
+export function Button(props) {
+	return <Clickable Tag={'button'} {...props} />;
+}