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
This commit is contained in:
louwie17 2022-05-30 10:06:34 -03:00 committed by GitHub
parent b28d0c2254
commit 574e00b6d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 177 additions and 10 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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: '',
} );
}
} );
};

View File

@ -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 );
}

View File

@ -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 (
@ -209,10 +209,20 @@ class WC_Products_Tracking {
}
$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,
'parent_id' => $category->parent,
'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,
)
);
}
}