Analytics Scripts should use the WordPress Scripts API

[mikejolley]

Scripts added by this plugin are hardcoded in wp_head. This makes detection and reuse more complex than it should be. We should instead register and enqueue scripts.

I was going to contribute this, however, it would have caused some other issues due to the way scripts are added/filtered, so instead I will share what I did for someone to implement in the future.

cc @layoutd this would make it easier for the listings plugin to re-use the tag manager script, instead of using filters and string replacements.

This needs work but the basic idea is to register the script with a handle, then use inline scripts to initialise with configs.

Google Tag Manager:

wp_register_script( 'google-tag-manager', 'https://www.googletagmanager.com/gtag/js?id=' . self::get( 'ga_id' ), array(), WC_GOOGLE_ANALYTICS_INTEGRATION_VERSION, false );

wp_add_inline_script(
				'google-tag-manager',
				"
				window.dataLayer = window.dataLayer || [];
				function gtag(){dataLayer.push(arguments);}
				gtag('js', new Date());
				gtag('config', '" . esc_js( $ga_settings['ga_id'] ) . "', { 'send_page_view': false });"
);

Classic and Universal:

if ( 'yes' === self::get( 'ga_use_universal_analytics' ) ) {
			wp_register_script( 'google-analytics', '//google-analytics.com/analytics.js', array(), WC_GOOGLE_ANALYTICS_INTEGRATION_VERSION, true );
			wp_add_inline_script(
				'google-analytics',
				'window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;',
			);
} else {
			wp_register_script( 'google-analytics', 'yes' === self::get( 'ga_support_display_advertising' ) ? 'https://stats.g.doubleclick.net/dc.js' : '//google-analytics.com/ga.js', array(), WC_GOOGLE_ANALYTICS_INTEGRATION_VERSION, true );
			// Inline script todo
}

Then we can make them async:

add_filter( 'script_loader_tag', array( $this, 'async_script_loader_tag' ) );

	/**
	 * Add async to script tags with defined handles.
	 *
	 * @param string $tag HTML for the script tag.
	 * @param string $handle Handle of script.
	 * @param string $src Src of script.
	 * @return string
	 */
	public function async_script_loader_tag( $tag, $handle, $src ) {
		if ( ! in_array( $handle, array( 'google-tag-manager', 'google-analytics' ), true ) ) {
			return $tag;
		}
		return str_replace( '<script', '<script async', $tag );
	}

I'm going to try to workaround this for now to avoid touching the plugin code.

[mikejolley]

Also ref:

https://pagespeedchecklist.com/defer-google-analytics
https://ahmadnassri.com/blog/a-faster-google-analytics-implementation/