From 66b82d05f126c7f99aec28bef1a590f42808c500 Mon Sep 17 00:00:00 2001 From: martynmjones Date: Wed, 28 Feb 2024 15:26:42 +0000 Subject: [PATCH 1/6] Set wp_enqueue_scripts priority and add second script handle for inline data --- includes/class-wc-google-gtag-js.php | 36 +++++++++++++++++++++------- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/includes/class-wc-google-gtag-js.php b/includes/class-wc-google-gtag-js.php index 664e3b60..3cb3e073 100644 --- a/includes/class-wc-google-gtag-js.php +++ b/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(), From 2fc5cea0f5e14b9338a3a570adb768b6d3a24f29 Mon Sep 17 00:00:00 2001 From: martynmjones Date: Wed, 28 Feb 2024 18:24:26 +0000 Subject: [PATCH 2/6] Separate event and tracker config --- assets/js/src/config.js | 14 +++++--------- assets/js/src/integrations/classic.js | 17 ++++++++--------- assets/js/src/tracker/index.js | 2 +- 3 files changed, 14 insertions(+), 19 deletions(-) diff --git a/assets/js/src/config.js b/assets/js/src/config.js index 3740c342..dde9f7f4 100644 --- a/assets/js/src/config.js +++ b/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; \ No newline at end of file diff --git a/assets/js/src/integrations/classic.js b/assets/js/src/integrations/classic.js index da2c0ff6..64aac6b2 100644 --- a/assets/js/src/integrations/classic.js +++ b/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, diff --git a/assets/js/src/tracker/index.js b/assets/js/src/tracker/index.js index f1244f9f..078838e6 100644 --- a/assets/js/src/tracker/index.js +++ b/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; From 3b122a2880119eb7412cdca465523270564add0f Mon Sep 17 00:00:00 2001 From: martynmjones Date: Wed, 28 Feb 2024 18:25:42 +0000 Subject: [PATCH 3/6] Initialize classic tracking when DOMContentLoaded fires --- assets/js/src/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/assets/js/src/index.js b/assets/js/src/index.js index 72d2e091..fe3c8912 100644 --- a/assets/js/src/index.js +++ b/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'; From db44901b331e821e8b8b32a576ca60e2909f8f37 Mon Sep 17 00:00:00 2001 From: martynmjones Date: Wed, 28 Feb 2024 18:25:59 +0000 Subject: [PATCH 4/6] Dequeue the Blocks GA integration script --- includes/class-wc-google-analytics.php | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/includes/class-wc-google-analytics.php b/includes/class-wc-google-analytics.php index 852bb155..c292543c 100644 --- a/includes/class-wc-google-analytics.php +++ b/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' ); + }); + } /** From eea3b61eb8527811ca9962f06bb14c42d8584294 Mon Sep 17 00:00:00 2001 From: martynmjones Date: Wed, 28 Feb 2024 18:48:00 +0000 Subject: [PATCH 5/6] Fix config loading for utils --- assets/js/src/utils/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/js/src/utils/index.js b/assets/js/src/utils/index.js index dc7e5743..0f1e193f 100644 --- a/assets/js/src/utils/index.js +++ b/assets/js/src/utils/index.js @@ -1,5 +1,5 @@ import { addAction, removeAction } from '@wordpress/hooks'; -import { config, products, cart } from '../config.js'; +import { trackerData as config, eventData } from '../config.js'; /** * Formats data into the productFieldObject shape. @@ -161,6 +161,8 @@ const formatCategoryKey = ( index ) => { * @return {Object|undefined} The product object or undefined if not found */ export const getProductFromID = ( search ) => { + const { products, cart } = eventData(); + return ( cart?.items?.find( ( { id } ) => id === search ) ?? products?.find( ( { id } ) => id === search ) From ef44ab3a419476f70f9e6f81718d627c6b3b5b38 Mon Sep 17 00:00:00 2001 From: martynmjones Date: Wed, 28 Feb 2024 18:48:06 +0000 Subject: [PATCH 6/6] Linting --- assets/js/src/config.js | 6 +++--- assets/js/src/index.js | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/assets/js/src/config.js b/assets/js/src/config.js index dde9f7f4..800320a7 100644 --- a/assets/js/src/config.js +++ b/assets/js/src/config.js @@ -1,7 +1,7 @@ /* global wcgaiData */ -/* eslint-disable camelcase */ -export const eventData = function() { +/* global wcgaiTracker */ +export const eventData = function () { return wcgaiData; }; -export const trackerData = wcgaiTracker; \ No newline at end of file +export const trackerData = wcgaiTracker; diff --git a/assets/js/src/index.js b/assets/js/src/index.js index fe3c8912..b3c105c7 100644 --- a/assets/js/src/index.js +++ b/assets/js/src/index.js @@ -1,12 +1,12 @@ import { eventData } from './config.js'; -import { trackClassicIntegration } from './integrations/classic' +import { trackClassicIntegration } from './integrations/classic'; // Initialize tracking for classic WooCommerce pages document.addEventListener( 'DOMContentLoaded', () => { - trackClassicIntegration({ - ...eventData() - }); -}); + trackClassicIntegration( { + ...eventData(), + } ); +} ); // Initialize tracking for Block based WooCommerce pages import './integrations/blocks';