Add Web Vitals to Scaffold

themes/10up-theme/functions.php

@@ -13,13 +13,17 @@
 define( 'TENUP_THEME_DIST_URL', TENUP_THEME_TEMPLATE_URL . '/dist/' );
 define( 'TENUP_THEME_INC', TENUP_THEME_PATH . 'includes/' );
 define( 'TENUP_THEME_BLOCK_DIR', TENUP_THEME_INC . 'blocks/' );
-
+define( 'TENUP_WEB_VITAL_TRACKING', false );
 
 if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG && file_exists( __DIR__ . '/dist/fast-refresh.php' ) ) {
 	require_once __DIR__ . '/dist/fast-refresh.php';
 	TenUpToolkit\set_dist_url_path( basename( __DIR__ ), TENUP_THEME_DIST_URL, TENUP_THEME_DIST_PATH );
 }
 
+if ( defined( 'TENUP_WEB_VITAL_TRACKING' ) && TENUP_WEB_VITAL_TRACKING ) {
+	require_once TENUP_THEME_INC . 'web-vitals.php';
+	TenUpTheme\WebVitals\setup();
+}
 
 require_once TENUP_THEME_INC . 'core.php';
 require_once TENUP_THEME_INC . 'overrides.php';
@@ -31,6 +35,7 @@
 TenUpTheme\Core\setup();
 TenUpTheme\Blocks\setup();
 
+
 // Require Composer autoloader if it exists.
 if ( file_exists( __DIR__ . '/vendor/autoload.php' ) ) {
 	require_once __DIR__ . '/vendor/autoload.php';

themes/10up-theme/includes/web-vitals.php

@@ -0,0 +1,119 @@
+<?php
+/**
+ * This file contains hooks and functions that add Web Vital
+ * tracking to the Scaffold.
+ *
+ * @package TenUpTheme
+ */
+
+namespace TenUpTheme\WebVitals;
+
+function setup() {
+	add_action( 'wp_footer', __NAMESPACE__ . '\init_web_vitals', 0 );
+
+	// Choose one of the below strategies to add Web Vitals to your site.
+	add_action( 'wp_footer', __NAMESPACE__ . '\strategy_send_to_analytics' );
+
+	// add_action( 'wp_footer', __NAMESPACE__ . '\strategy_send_to_ua' );
+
+	// add_action( 'wp_footer', __NAMESPACE__ . '\strategy_send_to_ga4' );
+}
+
+/**
+ * Initialize the Web Vitals tracking.
+ *
+ * This function is hooked into the wp_footer.
+ * The reason for this is so that the JS is seperate
+ * from any bundle, ensuring the browser always parses
+ * this logic.
+ *
+ * @return void
+ */
+function init_web_vitals() { ?>
+	<!-- Web Vitals -->
+	<script id="tenup-web-vital-tracking">
+		(function() {
+		var script = document.createElement('script');
+		script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js';
+		script.onload = function() {
+			webVitals.getCLS(console.log);
+			webVitals.getFID(console.log);
+			webVitals.getLCP(console.log);
+		}
+		document.head.appendChild(script);
+		})();
+	</script>
+<?php }
+
+/**
+ * Send Web Vitals data to custom analytics endpoint.
+ *
+ * Uses sendBeacon falling back to fetch if necessary.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
+ * @return void
+ */
+function strategy_send_to_analytics() { ?>
+	<!-- Send Data to Analytics Endpoint -->
+	<script id="send-data-to-endpoint">
+		function sendToAnalytics(metric) {
+			const body = JSON.stringify(metric);
+			(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+			fetch('/analytics', {body, method: 'POST', keepalive: true});
+		}
+	</script>
+<?php }
+
+/**
+ * Send the Web Vitals data to analytics.
+ * There are two ways you can send data:
+ *
+ * 1. Straight to an analytics endpoint
+ * 2. Through Google Analytics or Google Tag Manager
+ *
+ * This function is hooked into the wp_footer.
+ *
+ * @return void
+ */
+function strategy_send_to_ua() { ?>
+	<!-- Send data to Universal Analytics -->
+	<script id="send-data-to-ua">
+		function sendToGoogleAnalytics({name, delta, id}) {
+		// Assumes the global `gtag()` function exists, see:
+		// https://developers.google.com/analytics/devguides/collection/gtagjs
+			gtag('event', name, {
+				event_category: 'Web Vitals',
+				event_label: id,
+				value: Math.round(name === 'CLS' ? delta * 1000 : delta),
+				non_interaction: true,
+			});
+		}
+	</script>
+<?php }
+
+/**
+ * Send the Web Vitals data to analytics.
+ * There are two ways you can send data:
+ *
+ * 1. Straight to an analytics endpoint
+ * 2. Through Google Analytics or Google Tag Manager
+ *
+ * This function is hooked into the wp_footer.
+ *
+ * @return void
+ */
+function strategy_send_to_ga4() { ?>
+	<!-- Send Web Vitals data to GA4 -->
+	<script id="send-data-to-ga4">
+		function sendToGoogleAnalytics({name, delta, value, id}) {
+			// Assumes the global `gtag()` function exists, see:
+			// https://developers.google.com/analytics/devguides/collection/ga4
+			gtag('event', name, {
+				value: delta,
+				metric_id: id,
+				metric_value: value,
+				metric_delta: delta,
+			});
+		}
+	</script>
+<?php }