feat(platform): Capture plausible event for expandables (#13818)

This should help us to get some data on which expandables are actually
read how often etc.

Author: mydea

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<HTMLDivElement>(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<HTMLDetailsElement>) {
     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}`);

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;