Update tracking for classic pages #328

martynmjones · 2023-11-10T16:49:16Z

Changes proposed in this Pull Request:

This is a major restructuring centered around a new Tracker utility which manages all Google Analytics events triggered by either WooCommerce Blocks or classic pages. All tracked events must have an accompanying data formatter in order for the Tracker to send the event.

Several files and tests have been removed which are no longer of use

Screenshots:

Test setup

Debug a test website via Tag Assistant that has both Block powered and classic pages for the Cart, Checkout, and Product Listings (Using the All Products Block). Ensure all Event Tracking options are enabled in WooCommerce > Settings > Integrations > Google Analytics.

Detailed test instructions:

Work through all test instructions using both types of pages while not logged into the site as an admin.

Visit a product archive page and confirm that one view_item_list event is sent containing all the products on the page
Click on a product
Confirm that a select_content event is sent for that product
After the single product loads, confirm that a view_item event is sent for the product and a view_item_list event is sent if any related products or other lists are displayed
Add the product to cart and confirm the add_to_cart event is sent
Visit the cart, remove the product from the cart and confirm the remove_from_cart event it sent
Go back to the product archive page and add products to cart from there confirming the event is sent for each
Visit the checkout and confirm a begin_checkout event is sent
Place the order and one the thank you page confirm a purchase event is sent
Run some basic smoke tests

Additional

Disable some options in WooCommerce > Settings > Integrations > Google Analytics
Confirm those events are no longer sent
Adjust the Product Identification settings
Confirm that the data sent with each event includes the correct product identifier structure

⚠️ This branch also includes the changes needed to rename the extension to Google Analytics for WooCommerce (See #353).

Changelog entry

Update - Add shared tracking functionality for WooCommerce Blocks and classic pages

assets/js/src/tracker/index.js

tomalec

I like the idea I get from the brief description of the approach in the P2.
However, I'm not sure I fully understand specifics and implementation.

I tried to simplify the implementation logic a bit, maintaining more-or-less the same behavior.
By proposal is at https://github.com/woocommerce/woocommerce-google-analytics-integration/compare/update/tracking-for-classic-pages...update/tracking-for-classic-pages-tracker-class?expand=1

Please, let me know if that makes sense to you and still goes in the direction you envision.

I think there is still room for simplification in behavior and logic in both branches :)

I'd appreciate a F2F call, to discuss the details.

assets/js/src/tracker/index.js

assets/js/src/tracker/data-formatting.js

assets/js/src/index.js

tomalec · 2024-02-19T16:06:26Z

When I try to render the cart page, it throws an error:

nginx_1      | 2024/02/19 15:46:38 [error] 45#45: PHP Fatal error:  Uncaught Error: Cannot unpack array with string keys in /var/www/html/wp-content/plugins/woocommerce-google-analytics-integration/includes/class-wc-abstract-google-analytics-js.php:174
nginx_1      | Stack trace:
nginx_1      | #0 [internal function]: WC_Abstract_Google_Analytics_JS->{closure}()
nginx_1      | #1 /var/www/html/wp-content/plugins/woocommerce-google-analytics-integration/includes/class-wc-abstract-google-analytics-js.php(178): array_map()
nginx_1      | #2 /var/www/html/wp-content/plugins/woocommerce-google-analytics-integration/includes/class-wc-abstract-google-analytics-js.php(68): WC_Abstract_Google_Analytics_JS->get_formatted_cart()
nginx_1      | #3 /var/www/html/wp-includes/class-wp-hook.php(324): WC_Abstract_Google_Analytics_JS->{closure}()
nginx_1      | #4 /var/www/html/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters()
nginx_1      | #5 /var/www/html/wp-includes/plugin.php(517): WP_Hook->do_action()
nginx_1      | #6 /var/www/html/wp-content/plugins/woocommerce/templates/cart/cart.php(20): do_action()

Did we drop PHP 7.x support?

martynmjones · 2024-02-19T16:34:20Z

When I try to render the cart page, it throws an error:

nginx_1      | 2024/02/19 15:46:38 [error] 45#45: PHP Fatal error:  Uncaught Error: Cannot unpack array with string keys in /var/www/html/wp-content/plugins/woocommerce-google-analytics-integration/includes/class-wc-abstract-google-analytics-js.php:174
nginx_1      | Stack trace:
nginx_1      | #0 [internal function]: WC_Abstract_Google_Analytics_JS->{closure}()
nginx_1      | #1 /var/www/html/wp-content/plugins/woocommerce-google-analytics-integration/includes/class-wc-abstract-google-analytics-js.php(178): array_map()
nginx_1      | #2 /var/www/html/wp-content/plugins/woocommerce-google-analytics-integration/includes/class-wc-abstract-google-analytics-js.php(68): WC_Abstract_Google_Analytics_JS->get_formatted_cart()
nginx_1      | #3 /var/www/html/wp-includes/class-wp-hook.php(324): WC_Abstract_Google_Analytics_JS->{closure}()
nginx_1      | #4 /var/www/html/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters()
nginx_1      | #5 /var/www/html/wp-includes/plugin.php(517): WP_Hook->do_action()
nginx_1      | #6 /var/www/html/wp-content/plugins/woocommerce/templates/cart/cart.php(20): do_action()

Did we drop PHP 7.x support?

Apologies @tomalec, I've pushed an updated so you should no longer get that error 9f60881.

assets/js/src/integrations/classic.js

includes/class-wc-google-gtag-js.php

tomalec

Thank you for all the changes and clarifications.

I left some comments. Many are cosmetic ones. The most concerning to me are:

select_content logic Update tracking for classic pages #328 (comment)
remove_from_cart handlers Update tracking for classic pages #328 (comment)

Also, while testing, I do not get remove_from_cart event triggered when I remove a variable item from the cart.
Screencast from 19.02.2024 19:21:07.webm

The trackerEventHandler is called, but fails with

index.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'variation')
    at getProductFieldObject (index.js:15:15)
    at remove_from_cart (data-formatting.js:62:33)
    at trackerEventHandler (index.js:72:5)
    at HTMLFormElement.<anonymous> (classic.js:68:47)

tomalec · 2024-02-19T18:37:59Z

Seems there is an id mismatch

martynmjones · 2024-02-26T18:09:37Z

The changes we discussed earlier have been made and the ID mismatch has been resolved so this is ready for another round @tomalec. Thanks!

tomalec · 2024-02-26T19:08:29Z

assets/js/src/integrations/classic.js

+				// Return early if the user has clicked on anything other
+				// than a product link or an Add to cart button.


💅 Sorry, but as a non-native English speaker I read it as "the user has clicked on anything other than (a product link or an Add to cart button)" and I think you mean "the user has clicked on (anything other than a product link) or an Add to cart button", maybe something like this would be safer:

Suggested change

// Return early if the user has clicked on anything other

// than a product link or an Add to cart button.

// Return early if the user has clicked on

// an "Add to cart" button or anything other than a product link

Thanks for highlighting that! Updated in 94cc036

tomalec · 2024-02-26T19:51:10Z

assets/js/src/integrations/classic.js

+				const targetLink = event.target.closest(
+					'.woocommerce-loop-product__link'
+				);
+
+				const isButton = event.target.classList.contains( 'button' );
+
+				const isAddToCartButton =
+					event.target.classList.contains( 'add_to_cart_button' ) &&
+					! event.target.classList.contains(
+						'product_type_variable'
+					);
+
+				if ( ! targetLink && ( ! isButton || isAddToCartButton ) ) {
+					return;
+				}


💅
I got a gut feeling that this selector may be hard to keep in sync to match with WC core/theme changes.

Should we fire the add_to_cart event for non-ajax buttons as well?
From reading WC Core code, I think we can disable ajax_add_to_cart globally or for a product, then end up with a
<a class="button add_to_cart_button">Add to cart</a>.
If we want to fire for those, then the !isButton condition should be removed. Otherwise, we could use .ajax_add_to_cart to precisely select only those add-to-cart-like buttons that actually add to cart, guarding against .product_type_variable to any other.

Are you sure we will not have some other .button in the product card that does not actually select the product, but does some other thing? Like a link to a promotion, group, brand site, etc?
Maybe we can identify "Add to cart"-likeness by having data-product_id attribute :)
So we would do

Suggested change

const targetLink = event.target.closest(

'.woocommerce-loop-product__link'

);

const isButton = event.target.classList.contains( 'button' );

const isAddToCartButton =

event.target.classList.contains( 'add_to_cart_button' ) &&

! event.target.classList.contains(

'product_type_variable'

);

if ( ! targetLink && ( ! isButton || isAddToCartButton ) ) {

return;

}

const isProductLink =

// Regular product link.

event.target.closest( '.woocommerce-loop-product__link' ) ||

// Add-to-cart-like button.

event.target.hasAttribute( 'data-product_id' );

const isAddToCartButton =

event.target.classList.contains( 'add_to_cart_button' ) &&

! event.target.classList.contains(

'product_type_variable'

);

if ( ! isProductLink || isAddToCartButton ) {

return;

}

Also, all this confusion looks like an encouragement to champion a PR to WC Core to add the product_id datar attribute to the product card ;)

When clicking on non-ajax add to cart button the event will be sent when the page loads and the confirmation message is displayed so I don't think we need additional targeting there.

I've added a check like you suggested so that the event will only send if the button includes the data-product_id attribute to reduce the chance of issues with other extensions in 94cc036.

assets/js/src/integrations/classic.js

tomalec

Thank you for the changes and explanations.
Left a few tweak ideas
LGTM.

Co-authored-by: Tomek Wytrębowicz <[email protected]>

Martyn Jones added 5 commits November 8, 2023 12:14

Remove inline JS tracking

0e945df

Remove abstract methods

5eee69e

Add inline script data

273ef92

Format and attach event data in abstract class

01facf0

Map classic hooks to Blocks and inline event data

18f6ba1

martynmjones self-assigned this Nov 10, 2023

github-actions bot added the changelog: update Big changes to something that wasn't broken. label Nov 10, 2023

Martyn Jones added 13 commits November 17, 2023 10:12

Update wcgaiData single product name

4d33305

Remove key for wcgaiData products

6a563e2

Fix array keys

3506c88

Update event map and script data

738f3ec

Add a tracker utility

d5a659e

Update utils

977f49a

Move actions to data formatting functions

e24a184

Add tracker utility

bb6ecc7

Add blocks and classic integrations

bd5f4cf

Add config file

e14d27f

Add new entry point

3a36b96

Remove enqueue_standard_tracking_code

a2349aa

Update method signature

82d2ce2