Add integration with WP Consent API

assets/js/src/index.js

@@ -15,7 +15,33 @@ if ( window.ga4w ) {
 		window.addEventListener( 'load', warnIfDataMissing );
 	}
 }
+
+const consentMap = {
+	statistics: [ 'analytics_storage' ],
+	marketing: [ 'ad_storage', 'ad_user_data', 'ad_personalization' ],
+};
+
 function initializeTracking() {
+	// eslint-disable-next-line camelcase
+	if ( typeof wp_has_consent === 'function' ) {
+		window.wp_consent_type = 'optin';
+
+		const consentState = {};
+
+		for ( const [ category, types ] of Object.entries( consentMap ) ) {
+			// eslint-disable-next-line camelcase, no-undef
+			if ( wp_has_consent( category ) ) {
+				types.forEach( ( type ) => {
+					consentState[ type ] = 'granted';
+				} );
+			}
+		}
+
+		if ( Object.keys( consentState ).length > 0 ) {
+			gtag( 'consent', 'update', consentState ); // eslint-disable-line no-undef
+		}
+	}
+
 	const getEventHandler = setupEventHandlers( window.ga4w.settings );
 
 	classicTracking( getEventHandler, window.ga4w.data );
@@ -30,3 +56,21 @@ function warnIfDataMissing() {
 		);
 	}
 }
+
+document.addEventListener( 'wp_listen_for_consent_change', function ( event ) {
+	const consentUpdate = {};
+
+	const types = consentMap[ Object.keys( event.detail )[ 0 ] ];
+	const state =
+		Object.values( event.detail )[ 0 ] === 'allow' ? 'granted' : 'deny';
+
+	if ( types !== undefined ) {
+		types.forEach( ( type ) => {
+			consentUpdate[ type ] = state;
+		} );
+
+		if ( Object.keys( consentUpdate ).length > 0 ) {
+			gtag( 'consent', 'update', consentUpdate ); // eslint-disable-line no-undef
+		}
+	}
+} );

includes/class-wc-google-analytics.php

@@ -58,6 +58,9 @@ public function __construct() {
 		// utm_nooverride parameter for Google AdWords
 		add_filter( 'woocommerce_get_return_url', array( $this, 'utm_nooverride' ) );
 
+		// Mark extension as compatible with WP Consent API
+		add_filter( 'wp_consent_api_registered_' . plugin_basename( __FILE__ ), '__return_true' );
+
 		// Dequeue the WooCommerce Blocks Google Analytics integration,
 		// not to let it register its `gtag` function so that we could provide a more detailed configuration.
 		add_action(

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

@@ -94,7 +94,7 @@ private function register_scripts(): void {
 					function %2$s(){dataLayer.push(arguments);}
 					// Set up default consent state.
 					for ( const mode of %4$s || [] ) {
-						%2$s( "consent", "default", mode );
+						%2$s( "consent", "default", { ...mode, "wait_for_update": 500 } );
 					}
 					%2$s("js", new Date());
 					%2$s("set", "developer_id.%3$s", true);