ReturnToPrevious: Add interaction reporting (#81948)

* Add analytics for return to previous

* fix typos lol
This commit is contained in:
Josh Hunt 2024-02-08 15:44:22 +00:00 committed by GitHub
parent 71497c98e8
commit 732f9cacb4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 10 deletions

View File

@ -58,9 +58,10 @@ export function AppChrome({ children }: Props) {
const shouldShowReturnToPrevious =
config.featureToggles.returnToPrevious && state.returnToPrevious && url !== state.returnToPrevious.href;
// Clear returnToPrevious when the page is manually navigated to
useEffect(() => {
if (state.returnToPrevious && url === state.returnToPrevious.href) {
chrome.clearReturnToPrevious();
chrome.clearReturnToPrevious('auto_dismissed');
}
// We only want to pay attention when the location changes
// eslint-disable-next-line react-hooks/exhaustive-deps

View File

@ -90,11 +90,25 @@ export class AppChromeService {
}
public setReturnToPrevious = (returnToPrevious: ReturnToPreviousProps) => {
const previousPage = this.state.getValue().returnToPrevious;
reportInteraction('grafana_return_to_previous_button_created', {
page: returnToPrevious.href,
previousPage: previousPage?.href,
});
this.update({ returnToPrevious });
window.sessionStorage.setItem('returnToPrevious', JSON.stringify(returnToPrevious));
};
public clearReturnToPrevious = () => {
public clearReturnToPrevious = (interactionAction: 'clicked' | 'dismissed' | 'auto_dismissed') => {
const existingRtp = this.state.getValue().returnToPrevious;
if (existingRtp) {
reportInteraction('grafana_return_to_previous_button_dismissed', {
action: interactionAction,
page: existingRtp.href,
});
}
this.update({ returnToPrevious: undefined });
window.sessionStorage.removeItem('returnToPrevious');
};

View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React from 'react';
import React, { useCallback } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import { locationService, reportInteraction } from '@grafana/runtime';
import { useStyles2 } from '@grafana/ui';
import { useGrafana } from 'app/core/context/GrafanaContext';
import { t } from 'app/core/internationalization';
@ -17,13 +17,16 @@ export interface ReturnToPreviousProps {
export const ReturnToPrevious = ({ href, title }: ReturnToPreviousProps) => {
const styles = useStyles2(getStyles);
const { chrome } = useGrafana();
const handleOnClick = () => {
const handleOnClick = useCallback(() => {
locationService.push(href);
chrome.clearReturnToPrevious();
};
const handleOnDismiss = () => {
chrome.clearReturnToPrevious();
};
chrome.clearReturnToPrevious('clicked');
}, [href, chrome]);
const handleOnDismiss = useCallback(() => {
reportInteraction('grafana_return_to_previous_button_dismissed', { action: 'dismissed', page: href });
chrome.clearReturnToPrevious('dismissed');
}, [href, chrome]);
return (
<div className={styles.returnToPrevious}>