Add GA event tracking for the Audiences Tiles (excluding the "Top content" metric area)

assets/js/components/BadgeWithTooltip.js

@@ -30,6 +30,7 @@ import InfoTooltip from './InfoTooltip';
 export default function BadgeWithTooltip( {
 	className = '',
 	label,
+	onTooltipOpen,
 	tooltipTitle,
 } ) {
 	return (
@@ -41,12 +42,15 @@ export default function BadgeWithTooltip( {
 			) }
 		>
 			{ label }
-			{ tooltipTitle && <InfoTooltip title={ tooltipTitle } /> }
+			{ tooltipTitle && (
+				<InfoTooltip onOpen={ onTooltipOpen } title={ tooltipTitle } />
+			) }
 		</span>
 	);
 }
 
 BadgeWithTooltip.propTypes = {
+	onTooltipOpen: PropTypes.func,
 	tooltipTitle: PropTypes.node,
 	className: PropTypes.string,
 	label: PropTypes.node.isRequired,

assets/js/components/InfoTooltip.js

@@ -28,7 +28,7 @@ import PropTypes from 'prop-types';
 import { Tooltip } from 'googlesitekit-components';
 import InfoIcon from '../../svg/icons/info-green.svg';
 
-export default function InfoTooltip( { title, tooltipClassName } ) {
+export default function InfoTooltip( { onOpen, title, tooltipClassName } ) {
 	if ( ! title ) {
 		return null;
 	}
@@ -45,6 +45,7 @@ export default function InfoTooltip( { title, tooltipClassName } ) {
 			enterTouchDelay={ 0 }
 			leaveTouchDelay={ 5000 }
 			interactive
+			onOpen={ onOpen }
 		>
 			<span>
 				<InfoIcon width="16" height="16" />
@@ -54,6 +55,7 @@ export default function InfoTooltip( { title, tooltipClassName } ) {
 }
 
 InfoTooltip.propTypes = {
+	onOpen: PropTypes.func,
 	title: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 	tooltipClassName: PropTypes.string,
 };

assets/js/components/ReportErrorActions.js

@@ -53,6 +53,7 @@ export default function ReportErrorActions( props ) {
 		hideGetHelpLink,
 		buttonVariant,
 		onRetry,
+		onRequestAccess,
 		getHelpClassName,
 		RequestAccessButton,
 		RetryButton,
@@ -132,6 +133,7 @@ export default function ReportErrorActions( props ) {
 					/>
 				) : (
 					<Button
+						onClick={ onRequestAccess }
 						href={ requestAccessURL }
 						target="_blank"
 						danger={ buttonVariant === 'danger' }
@@ -208,6 +210,7 @@ ReportErrorActions.propTypes = {
 	hideGetHelpLink: PropTypes.bool,
 	buttonVariant: PropTypes.string,
 	onRetry: PropTypes.func,
+	onRequestAccess: PropTypes.func,
 	getHelpClassName: PropTypes.string,
 	RequestAccessButton: PropTypes.elementType,
 	RetryButton: PropTypes.elementType,

assets/js/googlesitekit/components-gm2/Tooltip.js

@@ -23,12 +23,40 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Tooltip as MuiTooltip } from '@material-ui/core';
 
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
 export default function Tooltip( {
 	children,
 	popperClassName,
 	tooltipClassName,
+	onOpen,
+	onClose,
 	...props
 } ) {
+	const isOpen = useRef( false );
+
+	const handleOpen = onOpen
+		? () => {
+				// This fixes a bug where the `onOpen` callback is called when the tooltip is already open.
+				if ( isOpen.current ) {
+					return;
+				}
+
+				isOpen.current = true;
+				onOpen?.();
+		  }
+		: undefined;
+
+	const handleClose = onOpen
+		? () => {
+				isOpen.current = false;
+				onClose?.();
+		  }
+		: onClose;
+
 	return (
 		<MuiTooltip
 			classes={ {
@@ -42,6 +70,8 @@ export default function Tooltip( {
 				),
 			} }
 			arrow
+			onOpen={ handleOpen }
+			onClose={ handleClose }
 			{ ...props }
 		>
 			{ children }
@@ -53,4 +83,6 @@ Tooltip.propTypes = {
 	children: PropTypes.node,
 	popperClassName: PropTypes.string,
 	tooltipClassName: PropTypes.string,
+	onOpen: PropTypes.func,
+	onClose: PropTypes.func,
 };