Merge pull request #404 from woocommerce/fix/register-timing

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

@@ -48,19 +48,20 @@ public function __construct( $settings = array() ) {
 
 		$this->map_hooks();
 
+		$this->register_scripts();
 		// Setup frontend scripts
 		add_action( 'wp_enqueue_scripts', array( $this, 'enquque_tracker' ), 5 );
 		add_action( 'wp_footer', array( $this, 'inline_script_data' ) );
 	}
 
 	/**
-	 * Register tracker scripts and its inline config.
-	 * We need to execute tracker.js w/ `gtag` configuration before any trackable action may happen.
+	 * Register manager and tracker scripts.
+	 * Call early so other extensions could add inline date to it.
 	 *
 	 * @return void
 	 */
-	public function enquque_tracker(): void {
-		wp_enqueue_script(
+	private function register_scripts(): void {
+		wp_register_script(
 			'google-tag-manager',
 			'https://www.googletagmanager.com/gtag/js?id=' . self::get( 'ga_id' ),
 			array(),
@@ -69,9 +70,7 @@ public function enquque_tracker(): void {
 				'strategy' => 'async',
 			)
 		);
-		// tracker.js needs to be executed ASAP, the remaining bits for main.js could be deffered,
-		// but to reduce the traffic, we ship it all together.
-		wp_enqueue_script(
+		wp_register_script(
 			$this->script_handle,
 			Plugin::get_instance()->get_js_asset_url( 'main.js' ),
 			array(
@@ -81,6 +80,19 @@ public function enquque_tracker(): void {
 			Plugin::get_instance()->get_js_asset_version( 'main' ),
 			true
 		);
+	}
+
+	/**
+	 * Enqueue tracker scripts and its inline config.
+	 * We need to execute tracker.js w/ `gtag` configuration before any trackable action may happen.
+	 *
+	 * @return void
+	 */
+	public function enquque_tracker(): void {
+		wp_enqueue_script( 'google-tag-manager' );
+		// tracker.js needs to be executed ASAP, the remaining bits for main.js could be deffered,
+		// but to reduce the traffic, we ship it all together.
+		wp_enqueue_script( $this->script_handle );
 		// Provide tracker's configuration.
 		wp_add_inline_script(
 			$this->script_handle,

tests/e2e/specs/js-scripts/inline-data.test.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+const { test, expect } = require( '@playwright/test' );
+
+/**
+ * Internal dependencies
+ */
+import {
+	createSimpleProduct,
+	setSettings,
+	clearSettings,
+} from '../../utils/api';
+
+test.describe( '`woocommerce-google-analytics-integration`', () => {
+	test.beforeAll( async () => {
+		await setSettings();
+	} );
+
+	test.afterAll( async () => {
+		await clearSettings();
+	} );
+
+	/*
+	 * This test requires a PHP snippet that adds inline script
+	 * on `'wp'` to `'woocommerce-google-analytics-integration'`
+	 * that sets `document.currentScript.__test__inlineSnippet = "works";`
+	 *
+	 * Some themes may change the execution sequence of WP actions against the traditional theme like Storefront.
+	 * Make sure the theme you're testing runs `wp_enqueue_scripts` after the hook used in the snippet - `wp`.
+	 */
+	test( 'Is registered early enough to attach some data to it on `woocommerce_after_single_product`', async ( {
+		page,
+	} ) => {
+		const simpleProductID = await createSimpleProduct();
+		await page.goto( `?p=${ simpleProductID }&add_inline_to_wp_hook=1` );
+
+		await expect(
+			page.locator( '#woocommerce-google-analytics-integration-js-after' )
+		).toBeAttached();
+
+		await expect(
+			page.locator( '#woocommerce-google-analytics-integration-js-after' )
+		).toHaveJSProperty( '__test__inlineSnippet', 'works' );
+	} );
+} );

tests/e2e/test-snippets/test-snippets.php

@@ -23,3 +23,20 @@ function ( $modes ) {
 		return $modes;
 	}
 );
+
+/*
+ * Mimic the behavior of Google Listings & Ads or other plugins,
+ * adding some inline events before `wp_enqueue_scripts.`
+ */
+add_action(
+	'wp',
+	function () {
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		if ( isset( $_GET['add_inline_to_wp_hook'] ) ) {
+			wp_add_inline_script(
+				'woocommerce-google-analytics-integration',
+				'document.currentScript.__test__inlineSnippet = "works";',
+			);
+		}
+	}
+);