From bd2aab472610a5aa3ef1c93fbee3ee119896102b Mon Sep 17 00:00:00 2001 From: Eric Peterson Date: Fri, 11 Nov 2022 11:44:58 +0100 Subject: [PATCH] Capture 'click' event on link clicks within TechDocs dom Signed-off-by: Eric Peterson --- .changeset/techdocs-analyze-clicks.md | 5 +++++ .../components/TechDocsReaderPageContent/dom.tsx | 11 +++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 .changeset/techdocs-analyze-clicks.md diff --git a/.changeset/techdocs-analyze-clicks.md b/.changeset/techdocs-analyze-clicks.md new file mode 100644 index 0000000000..664fea10bd --- /dev/null +++ b/.changeset/techdocs-analyze-clicks.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +An analytics event matching the semantics of the `click` action is now captured when users click links within a TechDocs document. diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx index e886454594..9babff0c54 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx @@ -21,7 +21,7 @@ import { useTheme, useMediaQuery } from '@material-ui/core'; import { BackstageTheme } from '@backstage/theme'; import { CompoundEntityRef } from '@backstage/catalog-model'; -import { useApi } from '@backstage/core-plugin-api'; +import { useAnalytics, useApi } from '@backstage/core-plugin-api'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; import { @@ -63,6 +63,7 @@ export const useTechDocsReaderDom = ( const isMobileMedia = useMediaQuery(MOBILE_MEDIA_QUERY); const sanitizerTransformer = useSanitizerTransformer(); const stylesTransformer = useStylesTransformer(); + const analytics = useAnalytics(); const techdocsStorageApi = useApi(techdocsStorageApiRef); const scmIntegrationsApi = useApi(scmIntegrationsApiRef); @@ -177,6 +178,12 @@ export const useTechDocsReaderDom = ( const parsedUrl = new URL(url); const fullPath = `${parsedUrl.pathname}${parsedUrl.search}${parsedUrl.hash}`; + // capture link clicks within documentation + const linkText = + (event.target as HTMLAnchorElement | undefined)?.innerText || url; + const to = url.replace(window.location.origin, ''); + analytics.captureEvent('click', linkText, { attributes: { to } }); + // hash exists when anchor is clicked on secondary sidebar if (parsedUrl.hash) { if (modifierActive) { @@ -219,7 +226,7 @@ export const useTechDocsReaderDom = ( onLoaded: () => {}, }), ]), - [theme, navigate], + [theme, navigate, analytics], ); useEffect(() => {