preconnect to configured Matomo host url

README.md

@@ -20,7 +20,7 @@
 
 ## Features
 
-Plugin uses sensible defaults prioritizing user experience & privacy:
+Plugin uses sensible defaults prioritizing user experience, performance & privacy:
 
 - include tracking code in all server-side rendered routes
 - track all route views as custom events
@@ -31,6 +31,7 @@ Plugin uses sensible defaults prioritizing user experience & privacy:
 - consent mode for privacy
 - allow loading tracking script locally
 - define paths to be excluded from tracking
+- `preconnect` to configured Matomo host url
 - dev mode for local development
 
 ## Usage

src/gatsby-ssr.js

@@ -57,7 +57,20 @@ function buildTrackingCodeNoJs(pluginOptions, pathname) {
   )
 }
 
-exports.onRenderBody = ({ setPostBodyComponents, pathname }, pluginOptions) => {
+function buildHead(pluginOptions) {
+  return (
+    <link
+      rel="preconnect"
+      href={pluginOptions.matomoUrl}
+      key={'gatsby-plugin-matomo'}
+    />
+  )
+}
+
+exports.onRenderBody = (
+  { setHeadComponents, setPostBodyComponents, pathname },
+  pluginOptions
+) => {
   let excludePaths = ['/offline-plugin-app-shell-fallback/']
 
   if (typeof pluginOptions.exclude !== 'undefined') {
@@ -72,10 +85,13 @@ exports.onRenderBody = ({ setPostBodyComponents, pathname }, pluginOptions) => {
     (process.env.NODE_ENV === 'production' || pluginOptions.dev === true) &&
     !isPathExcluded
   ) {
-    return setPostBodyComponents([
-      buildTrackingCode(pluginOptions),
-      buildTrackingCodeNoJs(pluginOptions, pathname)
-    ])
+    return (
+      setHeadComponents([buildHead(pluginOptions)]) &&
+      setPostBodyComponents([
+        buildTrackingCode(pluginOptions),
+        buildTrackingCodeNoJs(pluginOptions, pathname)
+      ])
+    )
   }
   return null
 }