Update tracking for classic pages

assets/js/src/config.js

@@ -0,0 +1,6 @@
+/* global wcgaiData */
+export const config = wcgaiData.config ?? {};
+export const events = wcgaiData.events ?? {};
+export const cart = wcgaiData.cart ?? {};
+export const products = wcgaiData.products ?? {};
+export const product = wcgaiData.product ?? {};

assets/js/src/index.js

@@ -0,0 +1,90 @@
+import { tracker } from './tracker';
+
+import {
+	trackBeginCheckout,
+	trackShippingTier,
+	trackListProducts,
+	trackAddToCart,
+	// trackChangeCartItemQuantity,
+	trackRemoveCartItem,
+	trackSelectContent,
+	trackSearch,
+	trackViewItem,
+	trackException,
+} from './tracker/data-formatting';
+
+/**
+ * Register all Google Analytics 4 events that can be tracked
+ */
+tracker.setupEvents( [
+	{
+		/**
+		 * @see https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#begin_checkout
+		 */
+		name: 'begin_checkout',
+		callback: trackBeginCheckout,
+	},
+	{
+		/**
+		 * @see https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#add_shipping_info
+		 */
+		name: 'add_shipping_info',
+		callback: trackShippingTier,
+	},
+	{
+		/**
+		 * @see https://developers.google.com/gtagjs/reference/ga4-events#view_item_list
+		 */
+		name: 'view_item_list',
+		callback: trackListProducts,
+	},
+	{
+		/**
+		 * @see https://developers.google.com/gtagjs/reference/ga4-events#add_to_cart
+		 */
+		name: 'add_to_cart',
+		callback: trackAddToCart,
+	},
+	{
+		/**
+		 * @see https://developers.google.com/gtagjs/reference/ga4-events#remove_from_cart
+		 */
+		name: 'remove_from_cart',
+		callback: trackRemoveCartItem,
+	},
+	{
+		/**
+		 * @see https://developers.google.com/gtagjs/reference/ga4-events#select_content
+		 */
+		name: 'select_content',
+		callback: trackSelectContent,
+	},
+	{
+		/**
+		 * @see https://developers.google.com/gtagjs/reference/ga4-events#search
+		 */
+		name: 'search',
+		callback: trackSearch,
+	},
+	{
+		/**
+		 * @see https://developers.google.com/gtagjs/reference/ga4-events#view_item
+		 */
+		name: 'view_item',
+		callback: trackViewItem,
+	},
+	{
+		/**
+		 * @see https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#exception
+		 */
+		name: 'exception',
+		callback: trackException,
+	},
+] );
+
+// Initialize tracking for classic WooCommerce pages
+import { trackClassicIntegration } from './integrations/classic';
+trackClassicIntegration();
+
+// Initialize tracking for Block based WooCommerce pages
+import './integrations/blocks';

assets/js/src/integrations/blocks.js

@@ -0,0 +1,27 @@
+import { removeAction } from '@wordpress/hooks';
+import { addUniqueAction } from '../utils';
+import { tracker } from '../tracker';
+import { ACTION_PREFIX, NAMESPACE } from '../constants';
+
+addUniqueAction(
+	`${ ACTION_PREFIX }-product-list-render`,
+	NAMESPACE,
+	tracker.event( 'view_item_list' ).attach
+);
+
+/**
+ * Temporarily remove all actions for demo purposes.
+ */
+
+removeAction( `${ ACTION_PREFIX }-checkout-render-checkout-form`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-checkout-submit`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-checkout-set-email-address`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-checkout-set-phone-number`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-checkout-set-billing-address`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-cart-add-item`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-cart-set-item-quantity`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-cart-remove-item`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-product-view-link`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-product-search`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-product-render`, NAMESPACE );
+removeAction( `${ ACTION_PREFIX }-store-notice-create`, NAMESPACE );

assets/js/src/integrations/classic.js

@@ -0,0 +1,29 @@
+import { tracker } from '../tracker';
+import { events, cart, products, product } from '../config.js';
+
+/**
+ * The Google Analytics integration for classic WooCommerce pages
+ * triggers events using three different methods.
+ *
+ * 1. Automatically attach events listed in the global `wcgaiData.events` object.
+ * 2. Listen for custom jQuery events triggered by core WooCommerce.
+ * 3. Listen for various actions (i.e clicks) on specific elements.
+ */
+
+export const trackClassicIntegration = () => {
+	const eventData = {
+		storeCart: cart,
+		products,
+		product,
+	};
+
+	Object.values( events ?? {} ).forEach( ( event ) => {
+		switch ( event ) {
+			// If the queued event name matches an event that has been registered with the
+			// tracker then automatically attach the event using the default data structures.
+			case tracker.event( event ).get()?.name:
+				tracker.event( event ).attach( eventData );
+				break;
+		}
+	} );
+};

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

@@ -5,7 +5,7 @@ import {
 	getProductId,
 	formatPrice,
 	getCartCoupon,
-} from './utils';
+} from '../utils';
 
 /**
  * Tracks view_item_list event
@@ -18,19 +18,21 @@ export const trackListProducts = ( {
 	products,
 	listName = __( 'Product List', 'woocommerce-google-analytics-integration' ),
 } ) => {
-	if ( products.length > 0 ) {
-		trackEvent( 'view_item_list', {
-			item_list_id: 'engagement',
-			item_list_name: __(
-				'Viewing products',
-				'woocommerce-google-analytics-integration'
-			),
-			items: products.map( ( product, index ) => ( {
-				...getProductImpressionObject( product, listName ),
-				index: index + 1,
-			} ) ),
-		} );
+	if ( products.length === 0 ) {
+		return false;
 	}
+
+	return {
+		item_list_id: 'engagement',
+		item_list_name: __(
+			'Viewing products',
+			'woocommerce-google-analytics-integration'
+		),
+		items: products.map( ( product, index ) => ( {
+			...getProductImpressionObject( product, listName ),
+			index: index + 1,
+		} ) ),
+	};
 };
 
 /**
@@ -84,15 +86,15 @@ export const trackChangeCartItemQuantity = ( { product, quantity = 1 } ) => {
  * @param {Object} params.storeCart The cart object
  */
 export const trackBeginCheckout = ( { storeCart } ) => {
-	trackEvent( 'begin_checkout', {
+	return {
 		currency: storeCart.totals.currency_code,
 		value: formatPrice(
 			storeCart.totals.total_price,
 			storeCart.totals.currency_minor_unit
 		),
 		...getCartCoupon( storeCart ),
 		items: storeCart.items.map( getProductFieldObject ),
-	} );
+	};
 };
 
 /**
@@ -154,9 +156,9 @@ export const trackViewItem = ( {
 	listName = __( 'Product List', 'woocommerce-google-analytics-integration' ),
 } ) => {
 	if ( product ) {
-		trackEvent( 'view_item', {
+		return {
 			items: [ getProductImpressionObject( product, listName ) ],
-		} );
+		};
 	}
 };