Restructure gtag and event data config loading

assets/js/src/config.js

@@ -1,11 +1,7 @@
 /* global wcgaiData */
 /* eslint-disable camelcase */
-export const {
-	config,
-	events,
-	cart,
-	products,
-	product,
-	added_to_cart: addedToCart,
-	order,
-} = wcgaiData;
+export const eventData = function() {
+	return wcgaiData;
+};
+
+export const trackerData = wcgaiTracker;

assets/js/src/index.js

@@ -1,6 +1,12 @@
+import { eventData } from './config.js';
+import { trackClassicIntegration } from './integrations/classic'
+
 // Initialize tracking for classic WooCommerce pages
-import { trackClassicIntegration } from './integrations/classic';
-trackClassicIntegration();
+document.addEventListener( 'DOMContentLoaded', () => {
+    trackClassicIntegration({
+        ...eventData()
+    });
+});
 
 // Initialize tracking for Block based WooCommerce pages
 import './integrations/blocks';

assets/js/src/integrations/classic.js

@@ -1,13 +1,5 @@
 import { tracker } from '../tracker';
 import { getProductFromID } from '../utils';
-import {
-	events,
-	cart,
-	products,
-	product,
-	addedToCart,
-	order,
-} from '../config.js';
 
 /**
  * The Google Analytics integration for classic WooCommerce pages
@@ -18,7 +10,14 @@ import {
  * 3. Listen for various actions (i.e clicks) on specific elements.
  */
 
-export const trackClassicIntegration = () => {
+export const trackClassicIntegration = ( {
+	events,
+	cart,
+	products,
+	product,
+	added_to_cart: addedToCart,
+	order,
+} ) => {
 	const eventData = {
 		storeCart: cart,
 		products,

assets/js/src/tracker/index.js

@@ -1,4 +1,4 @@
-import { config } from '../config';
+import { trackerData as config } from '../config.js';
 import * as formatters from './data-formatting';
 
 let instance;

includes/class-wc-google-analytics.php

@@ -111,6 +111,12 @@ public function __construct() {
 
 		// utm_nooverride parameter for Google AdWords
 		add_filter( 'woocommerce_get_return_url', array( $this, 'utm_nooverride' ) );
+
+		// Dequeue the WooCommerce Blocks Google Analytics integration
+		add_action( 'wp_enqueue_scripts', function() {
+			wp_dequeue_script( 'wc-blocks-google-analytics' );
+		});
+
 	}
 
 	/**

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

@@ -16,6 +16,9 @@ class WC_Google_Gtag_JS extends WC_Abstract_Google_Analytics_JS {
 	/** @var string $script_handle Handle for the front end JavaScript file */
 	public $script_handle = 'woocommerce-google-analytics-integration';
 
+	/** @var string $script_handle Handle for the event data inline script */
+	public $data_script_handle = 'woocommerce-google-analytics-integration-data';
+
 	/** @var string $script_data Data required for frontend event tracking */
 	private $script_data = array();
 
@@ -43,7 +46,7 @@ public function __construct( $options = array() ) {
 		$this->map_actions();
 
 		// Setup frontend scripts
-		add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ) );
+		add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ), 5 );
 		add_action( 'wp_footer', array( $this, 'inline_script_data' ) );
 	}
 
@@ -71,22 +74,37 @@ public function register_scripts(): void {
 			Plugin::get_instance()->get_js_asset_version( 'main' ),
 			true
 		);
+
+		wp_add_inline_script(
+			$this->script_handle,
+			sprintf(
+				'const wcgaiTracker = %s;',
+				wp_json_encode( $this->load_analytics_config() )
+			),
+			'before'
+		);
 	}
 
 	/**
-	 * Add inline script data to the front end
+	 * Add the event data inline script late to ensure it's added at the bottom of the page
 	 *
 	 * @return void
 	 */
 	public function inline_script_data(): void {
+		wp_register_script(
+			$this->data_script_handle,
+			''
+		);
+
 		wp_add_inline_script(
-			$this->script_handle,
+			$this->data_script_handle,
 			sprintf(
 				'const wcgaiData = %s;',
 				$this->get_script_data()
-			),
-			'before'
+			)
 		);
+
+		wp_enqueue_script( $this->data_script_handle );
 	}
 
 	/**
@@ -156,12 +174,12 @@ public static function tracker_function_name(): string {
 	}
 
 	/**
-	 * Add Google Analytics configuration data to the script data
+	 * Get Google Analytics configuration data
 	 *
-	 * @return void
+	 * @return array
 	 */
-	public function load_analytics_config(): void {
-		$this->script_data['config'] = array(
+	public function load_analytics_config(): array {
+		return array(
 			'developer_id'          => self::DEVELOPER_ID,
 			'gtag_id'               => self::get( 'ga_id' ),
 			'tracker_function_name' => self::tracker_function_name(),