Add/32676 category and tag tracks within products screen (#33121)

* Add logs for the attributes and tags on the product page

* Only trigger attributes_add on product screen when user hits save

* Add extra props to attribute add track

* Add tags delete track and fix count of tags add track

* Update use of wp_localize_script

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/global.d.ts

@@ -1 +1 @@
-declare const productScreen: string;
+declare const productScreen: { name: string };

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/product-edit.ts

@@ -13,6 +13,6 @@ const initTracks = () => {
 	initProductScreenTracks();
 };
 
-if ( productScreen === 'edit' ) {
+if ( productScreen && productScreen.name === 'edit' ) {
 	initTracks();
 }

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/product-new.ts

@@ -12,7 +12,7 @@ const initTracks = () => {
 	recordEvent( 'product_add_view' );
 };
 
-if ( productScreen === 'new' ) {
+if ( productScreen && productScreen.name === 'new' ) {
 	initTracks();
 	initProductScreenTracks();
 }

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/products-list.ts

@@ -153,6 +153,6 @@ const initTracks = () => {
 	} );
 };
 
-if ( productScreen === 'list' ) {
+if ( productScreen && productScreen.name === 'list' ) {
 	initTracks();
 }

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/shared.ts

@@ -3,6 +3,11 @@
  */
 import { recordEvent } from '@woocommerce/tracks';
 
+/**
+ * Internal dependencies
+ */
+import { waitUntilElementIsPresent } from './utils';
+
 /**
  * Get the product data.
  *
@@ -193,4 +198,126 @@ export const initProductScreenTracks = () => {
 				checkbox: ( event.target as HTMLInputElement ).checked,
 			} );
 		} );
+
+	// Product tags
+
+	function deleteTagEventListener( event: Event ) {
+		recordEvent( 'product_tags_delete', {
+			page: 'product',
+			tag_list_size:
+				document.querySelector( '.tagchecklist' )?.children.length || 0,
+		} );
+	}
+
+	function addTagsDeleteTracks() {
+		const tagsDeleteButtons = document.querySelectorAll(
+			'#product_tag .ntdelbutton'
+		);
+		tagsDeleteButtons.forEach( ( button ) => {
+			button.removeEventListener( 'click', deleteTagEventListener );
+			button.addEventListener( 'click', deleteTagEventListener );
+		} );
+	}
+	waitUntilElementIsPresent(
+		'#product_tag .tagchecklist',
+		addTagsDeleteTracks
+	);
+
+	document
+		.querySelector( '.tagadd' )
+		?.addEventListener( 'click', ( event ) => {
+			const tagInput = document.querySelector< HTMLInputElement >(
+				'#new-tag-product_tag'
+			);
+			if ( tagInput && tagInput.value && tagInput.value.length > 0 ) {
+				recordEvent( 'product_tags_add', {
+					page: 'product',
+					tag_string_length: tagInput.value.length,
+					tag_list_size:
+						( document.querySelector( '.tagchecklist' )?.children
+							.length || 0 ) + 1,
+					most_used: false,
+				} );
+				setTimeout( () => {
+					addTagsDeleteTracks();
+				}, 500 );
+			}
+		} );
+
+	function addMostUsedTagEventListener( event: Event ) {
+		recordEvent( 'product_tags_add', {
+			page: 'product',
+			tag_string_length: ( event.target as HTMLAnchorElement ).textContent
+				?.length,
+			tag_list_size:
+				document.querySelector( '.tagchecklist' )?.children.length || 0,
+			most_used: true,
+		} );
+		addTagsDeleteTracks();
+	}
+
+	function addMostUsedTagsTracks() {
+		const tagCloudLinks = document.querySelectorAll(
+			'#tagcloud-product_tag .tag-cloud-link'
+		);
+		tagCloudLinks.forEach( ( button ) => {
+			button.removeEventListener( 'click', addMostUsedTagEventListener );
+			button.addEventListener( 'click', addMostUsedTagEventListener );
+		} );
+	}
+
+	document
+		.querySelector( '.tagcloud-link' )
+		?.addEventListener( 'click', () => {
+			waitUntilElementIsPresent(
+				'#tagcloud-product_tag',
+				addMostUsedTagsTracks
+			);
+		} );
+
+	// Attribute tracks.
+
+	function addNewTermEventHandler() {
+		recordEvent( 'product_attributes_add_term', {
+			page: 'product',
+		} );
+	}
+
+	function addNewAttributeTermTracks() {
+		const addNewTermButtons = document.querySelectorAll(
+			'.woocommerce_attribute .add_new_attribute'
+		);
+		addNewTermButtons.forEach( ( button ) => {
+			button.removeEventListener( 'click', addNewTermEventHandler );
+			button.addEventListener( 'click', addNewTermEventHandler );
+		} );
+	}
+	addNewAttributeTermTracks();
+
+	document
+		.querySelector( '.add_attribute' )
+		?.addEventListener( 'click', () => {
+			setTimeout( () => {
+				addNewAttributeTermTracks();
+			}, 1000 );
+		} );
+
+	const attributesCount = document.querySelectorAll(
+		'.woocommerce_attribute'
+	).length;
+
+	document
+		.querySelector( '.save_attributes' )
+		?.addEventListener( 'click', () => {
+			const newAttributesCount = document.querySelectorAll(
+				'.woocommerce_attribute'
+			).length;
+			if ( newAttributesCount > attributesCount ) {
+				recordEvent( 'product_attributes_add', {
+					page: 'product',
+					enable_archive: '',
+					default_sort_order: '',
+				} );
+			}
+		} );
 };

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/utils.ts

@@ -0,0 +1,24 @@
+/**
+ * Recursive function that waits up to 3 seconds until an element is found, then calls the callback.
+ *
+ * @param {string} query query of the element.
+ * @param {Function} func callback called when element is found.
+ * @param {number} tries used internally to limit the number of tries.
+ */
+export function waitUntilElementIsPresent(
+	query: string,
+	func: () => void,
+	tries = 0
+) {
+	if ( tries > 6 ) {
+		return;
+	}
+	setTimeout( () => {
+		const element = document.querySelector( query );
+		if ( element ) {
+			func();
+		} else {
+			waitUntilElementIsPresent( query, func, ++tries );
+		}
+	}, 500 );
+}

plugins/woocommerce/includes/tracks/events/class-wc-products-tracking.php

@@ -192,7 +192,7 @@ class WC_Products_Tracking {
 	 * @param int $category_id Category ID.
 	 */
 	public function track_product_category_created( $category_id ) {
-		// phpcs:disable WordPress.Security.NonceVerification.Missing
+		// phpcs:disable WordPress.Security.NonceVerification.Missing, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
 		// Only track category creation from the edit product screen or the
 		// category management screen (which both occur via AJAX).
 		if (
@@ -208,11 +208,21 @@ class WC_Products_Tracking {
 			return;
 		}
 
-		$category   = get_term( $category_id, 'product_cat' );
+		$category        = get_term( $category_id, 'product_cat' );
+		$parent_category = $category->parent > 0 ? 'Other' : 'None';
+		if ( $category->parent > 0 ) {
+			$parent = get_term( $category_id, 'product_cat' );
+			if ( 'uncategorized' === $parent->name ) {
+				$parent_category = 'Uncategorized';
+			}
+		}
 		$properties = array(
-			'category_id' => $category_id,
+			'category_id'     => $category_id,
-			'parent_id'   => $category->parent,
+			'parent_id'       => $category->parent,
-			'page'        => ( 'add-tag' === $_POST['action'] ) ? 'categories' : 'product',
+			'parent_category' => $parent_category,
+			'page'            => ( 'add-tag' === $_POST['action'] ) ? 'categories' : 'product',
+			'display_type'    => isset( $_POST['display_type'] ) ? wp_unslash( $_POST['display_type'] ) : '',
+			'image'           => isset( $_POST['product_cat_thumbnail_id'] ) && '' !== $_POST['product_cat_thumbnail_id'] ? 'Yes' : 'No',
 		);
 		// phpcs:enable
 
@@ -276,6 +286,12 @@ class WC_Products_Tracking {
 			true
 		);
 
-		wp_localize_script( 'wc-admin-product-tracking', 'productScreen', $product_screen );
+		wp_localize_script(
+			'wc-admin-product-tracking',
+			'productScreen',
+			array(
+				'name' => $product_screen,
+			)
+		);
 	}
 }