AI Featured Image: Add event tracking for generating, regenerating an…

…d using images (#36638)

* Add event tracking to generate, regenerate and use image actions

* Add placement property on the events so we can know from where the user triggered the image generation

* changelog

projects/plugins/jetpack/changelog/update-featured-image-add-event-tracking

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Featured Image: track events for generating, regenerating and using images

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { useImageGenerator } from '@automattic/jetpack-ai-client';
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Button, Spinner } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
@@ -16,6 +17,7 @@ import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library';
 import AiAssistantModal from '../modal';
 
 const FEATURED_IMAGE_FEATURE_NAME = 'featured-post-image';
+const JETPACK_SIDEBAR_PLACEMENT = 'jetpack-sidebar';
 
 export default function FeaturedImage() {
 	const { editPost } = useDispatch( editorStore );
@@ -24,6 +26,8 @@ export default function FeaturedImage() {
 	const [ imageURL, setImageURL ] = useState( null );
 	const { generateImage } = useImageGenerator();
 	const { isLoading: isSavingToMediaLibrary, saveToMediaLibrary } = useSaveToMediaLibrary();
+	const { tracks } = useAnalytics();
+	const { recordEvent } = tracks;
 
 	const postContent = usePostContent();
 
@@ -57,20 +61,35 @@ export default function FeaturedImage() {
 	}, [ isFeaturedImageModalVisible, setIsFeaturedImageModalVisible ] );
 
 	const handleGenerate = useCallback( () => {
+		// track the generate image event
+		recordEvent( 'jetpack_ai_featured_image_generation_generate_image', {
+			placement: JETPACK_SIDEBAR_PLACEMENT,
+		} );
+
 		toggleFeaturedImageModal();
 		processImageGeneration();
-	}, [ toggleFeaturedImageModal, processImageGeneration ] );
+	}, [ toggleFeaturedImageModal, processImageGeneration, recordEvent ] );
 
 	const handleRegenerate = useCallback( () => {
+		// track the regenerate image event
+		recordEvent( 'jetpack_ai_featured_image_generation_generate_another_image', {
+			placement: JETPACK_SIDEBAR_PLACEMENT,
+		} );
+
 		processImageGeneration();
-	}, [ processImageGeneration ] );
+	}, [ processImageGeneration, recordEvent ] );
 
 	const handleAccept = useCallback( () => {
+		// track the accept/use image event
+		recordEvent( 'jetpack_ai_featured_image_generation_use_image', {
+			placement: JETPACK_SIDEBAR_PLACEMENT,
+		} );
+
 		saveToMediaLibrary( imageURL ).then( image => {
 			editPost( { featured_media: image.id } );
 			toggleFeaturedImageModal();
 		} );
-	}, [ editPost, imageURL, saveToMediaLibrary, toggleFeaturedImageModal ] );
+	}, [ editPost, imageURL, saveToMediaLibrary, toggleFeaturedImageModal, recordEvent ] );
 
 	const modalTitleWhenGenerating = __( 'Generating featured image…', 'jetpack' );
 	const modalTitleWhenDone = __( 'Featured Image Generation', 'jetpack' );