diff --git a/src/components/expandable/index.tsx b/src/components/expandable/index.tsx index 3738212f0ba6c3..00bf1ca1b61d8e 100644 --- a/src/components/expandable/index.tsx +++ b/src/components/expandable/index.tsx @@ -4,6 +4,8 @@ import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'; import {ChevronDownIcon, ChevronRightIcon} from '@radix-ui/react-icons'; import * as Sentry from '@sentry/nextjs'; +import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent'; + // explicitly not usig CSS modules here // because there's some prerendered content that depends on these exact class names import '../callout/styles.scss'; @@ -39,6 +41,7 @@ export function Expandable({ const [isExpanded, setIsExpanded] = useState(false); const [copied, setCopied] = useState(false); const contentRef = useRef(null); + const {emit} = usePlausibleEvent(); // Ensure we scroll to the element if the URL hash matches useEffect(() => { @@ -75,6 +78,8 @@ export function Expandable({ return; } + emit('Copy Expandable Content', {props: {page: window.location.pathname, title}}); + // Attempt to get text from markdown code blocks if they exist const codeBlocks = contentRef.current.querySelectorAll('code'); let contentToCopy = ''; @@ -110,13 +115,17 @@ export function Expandable({ setCopied(false); } }, - [] + [emit, title] ); function toggleIsExpanded(event: React.MouseEvent) { const newVal = event.currentTarget.open; setIsExpanded(newVal); + if (newVal) { + emit('Open Expandable', {props: {page: window.location.pathname, title}}); + } + if (id) { if (newVal) { window.history.pushState({}, '', `#${id}`); diff --git a/src/hooks/usePlausibleEvent.tsx b/src/hooks/usePlausibleEvent.tsx index 8124e464908541..1976dbc6f2d1fb 100644 --- a/src/hooks/usePlausibleEvent.tsx +++ b/src/hooks/usePlausibleEvent.tsx @@ -4,10 +4,18 @@ import {ReadProgressMilestone} from 'sentry-docs/types/plausible'; // Adding custom events here will make them available via the hook type PlausibleEventProps = { + ['Copy Expandable Content']: { + page: string; + title: string; + }; ['Doc Feedback']: { helpful: boolean; page: string; }; + ['Open Expandable']: { + page: string; + title: string; + }; ['Read Progress']: { page: string; readProgress: ReadProgressMilestone;