Add support for Google Analytics 4 (#29)

xwp · May 26, 2021 · 1ea6156 · 1ea6156
1 parent 57c517a
commit 1ea6156
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 /vendor/
+/node_modules/
+package-lock.json
diff --git a/README.md b/README.md
@@ -126,18 +126,24 @@ apply_filters( 'site_performance_tracker_event_types', array $entry_types = [ 'p
 
 To send web vitals to Google Analytics in a format compatible with the [Web Vitals Report](https://web-vitals-report.web.app/), enable the following theme support and passing in the ID, both UA- and G- ID formats are supported:
 
-Analytics is suppored, requires passing the ID using `ga_id`:
+Analytics is supported, requires passing the ID using `ga_id`:
 ```php
 add_theme_support( 'site_performance_tracker_vitals', array(
 	'ga_id' => 'UA-XXXXXXXX-Y',
 ) );
 ```
-Gtag is suppored, requires passing the ID using `gtag_id`:
+Gtag is supported, requires passing the ID using `gtag_id`:
 ```php
 add_theme_support( 'site_performance_tracker_vitals', array(
 	'gtag_id' => 'UA-XXXXXXXX-Y',
 ) );
 ```
+Analytics v4 is supported, requires passing the ID using `ga4_id`:
+```php
+add_theme_support( 'site_performance_tracker_vitals', array(
+	'ga4_id' => 'G-XXXXXXXXXX',
+) );
+```
 
 If you need to override the Google Analytics dimensions (defaults to dimensions1 through 6) to store these under, pass them along on the add theme support initialisation:
 ```php
@@ -154,6 +160,10 @@ add_theme_support( 'site_performance_tracker_vitals', array(
 
 ## Changelog
 
+### 0.7 - May 26, 2021
+
+* Add support for Google Analytics 4.
+
 #### 0.6 - May 25, 2021
 
 * Fix Google Analytics support.

diff --git a/js/dist/module/web-vitals-analytics.asset.php b/js/dist/module/web-vitals-analytics.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => '13522fa45ebd348866b8c5c6566850db');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '3341ad667815cda20a9427ada8f97aee');
diff --git a/js/dist/module/web-vitals-analytics.js b/js/dist/module/web-vitals-analytics.js
diff --git a/js/src/web-vitals-analytics.js b/js/src/web-vitals-analytics.js
@@ -56,11 +56,9 @@ const getConfig = id => {
 			transport_type: 'beacon',
 			measurement_version: measurementVersion,
 		} );
-	}
 
-	if ( id.startsWith( 'UA-' ) ) {
 		// Only gtag suports custom maps.
-		if ( 'gtag' === window.webVitalsAnalyticsData.delivery ) {
+		if ( id.startsWith( 'UA-' ) || id.startsWith( 'G-' ) ) {
 			Object.assign( config, {
 				custom_map: {
 					[ uaDimMeasurementVersion ]: 'measurement_version',
@@ -169,6 +167,15 @@ function sendToGoogleAnalytics( { name, value, delta, id, entries } ) {
 			[ uaDimMeasurementVersion ]: measurementVersion,
 		} );
 	}
+	if ( 'undefined' !== typeof window.webVitalsAnalyticsData.ga4_id ) {
+		gtag( 'event', name, {
+			value: delta,
+			metric_id: id,
+			metric_value: Math.round( name === 'CLS' ? delta * 1000 : delta ),
+			event_meta: getRating( value, vitalThresholds[ name ] ),
+			event_debug: getDebugInfo( name, entries ),
+		} );
+	}
 }
 
 export function measureWebVitals() {
@@ -183,7 +190,10 @@ export function initAnalytics() {
 		return false;
 		// Do nothing without a config.
 	}
-	if ( 'undefined' !== typeof window.webVitalsAnalyticsData.gtag_id ) {
+	if (
+		'undefined' !== typeof window.webVitalsAnalyticsData.gtag_id ||
+		'undefined' !== typeof window.webVitalsAnalyticsData.ga4_id
+	) {
 		window.webVitalsAnalyticsData.delivery = 'gtag';
 	} else if ( 'undefined' !== typeof window.webVitalsAnalyticsData.ga_id ) {
 		window.webVitalsAnalyticsData.delivery = 'ga';
@@ -196,7 +206,13 @@ export function initAnalytics() {
 			window.gtag = console.log;
 		}
 		gtag( 'js', new Date() );
-		gtag( ...getConfig( window.webVitalsAnalyticsData.gtag_id ) );
+		gtag(
+			...getConfig(
+				'undefined' !== typeof window.webVitalsAnalyticsData.gtag_id
+					? window.webVitalsAnalyticsData.gtag_id
+					: window.webVitalsAnalyticsData.ga4_id
+			)
+		);
 	}
 
 	if ( 'ga' === window.webVitalsAnalyticsData.delivery ) {

diff --git a/site-performance-tracker.php b/site-performance-tracker.php
@@ -8,7 +8,7 @@
  * Plugin Name: Site Performance Tracker
  * Plugin URI: https://github.com/xwp/site-performance-tracker
  * Description: Allows you to detect and track site performance metrics.
- * Version: 0.6
+ * Version: 0.7
  * Author: XWP.co
  * Author URI: https://xwp.co
  */
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('wp-polyfill'), 'version' => '13522fa45ebd348866b8c5c6566850db');
		<?php return array('dependencies' => array('wp-polyfill'), 'version' => '3341ad667815cda20a9427ada8f97aee');