Add event for citation export download/copy

adsabs · Nov 7, 2023 · 893cec4 · 893cec4
1 parent 73db926
commit 893cec4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/components/CitationExporter/components/ResultArea.tsx b/src/components/CitationExporter/components/ResultArea.tsx
@@ -5,6 +5,7 @@ import { useDownloadFile } from '@lib/useDownloadFile';
 import { useIsClient } from '@lib/useIsClient';
 import { exportFormats } from '../models';
 import { LabeledCopyButton } from '@components/CopyButton';
+import { useGTMDispatch } from '@elgorditosalsero/react-gtm-hook';
 
 export const ResultArea = ({
   result = '',
@@ -16,8 +17,16 @@ export const ResultArea = ({
   format: ExportApiFormatKey;
   isLoading?: boolean;
 } & StackProps) => {
+  const sendDataToGTM = useGTMDispatch();
   const { onDownload, hasDownloaded, isDownloading } = useDownloadFile(result, {
     filename: () => `export-${format}.${exportFormats[format].ext}`,
+    onDownloaded() {
+      sendDataToGTM({
+        event: 'citation_export',
+        export_type: 'download',
+        export_format: format,
+      });
+    },
   });
   const isFullWidth = useBreakpointValue([true, false]);
   const isClient = useIsClient();
@@ -42,6 +51,13 @@ export const ResultArea = ({
             isDisabled={isLoading}
             width={isFullWidth ? 'full' : 'auto'}
             variant="outline"
+            onCopyComplete={() => {
+              sendDataToGTM({
+                event: 'citation_export',
+                export_type: 'copy',
+                export_format: format,
+              });
+            }}
           />
         </HStack>
       )}

diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx
@@ -4,17 +4,24 @@ import { ReactElement, useEffect } from 'react';
 
 export interface ICopyButtonProps extends ButtonProps {
   text: string;
+  onCopyComplete?: () => void;
   options?: UseClipboardOptions;
 }
 
 export const SimpleCopyButton = (props: ICopyButtonProps): ReactElement => {
-  const { text, options, ...rest } = props;
+  const { text, options, onCopyComplete, ...rest } = props;
   const { hasCopied, onCopy, setValue } = useClipboard(text, options);
 
   useEffect(() => {
     setValue(text);
   }, [text]);
 
+  useEffect(() => {
+    if (hasCopied) {
+      onCopyComplete?.();
+    }
+  }, [hasCopied]);
+
   return (
     <>
       <Tooltip label={hasCopied ? 'Copied' : 'Copy to clipboard'}>
@@ -29,13 +36,19 @@ export const SimpleCopyButton = (props: ICopyButtonProps): ReactElement => {
 };
 
 export const LabeledCopyButton = (props: ICopyButtonProps & { label: string }): ReactElement => {
-  const { label, text, options, ...rest } = props;
+  const { label, text, options, onCopyComplete, ...rest } = props;
   const { hasCopied, onCopy, setValue } = useClipboard(text, options);
 
   useEffect(() => {
     setValue(text);
   }, [text]);
 
+  useEffect(() => {
+    if (hasCopied) {
+      onCopyComplete?.();
+    }
+  }, [hasCopied]);
+
   return (
     <>
       <Button leftIcon={<CopyIcon />} variant="link" aria-label="copy to clipboard" onClick={onCopy} {...rest}>