feat: new option preconnect

README.md

@@ -19,14 +19,15 @@ npx astro add astro-matomo
 
 ## Options
 
-| Options        | Type      | Description                                    |
-| -------------- | --------- | ---------------------------------------------- |
-| enabled        | `boolean` | Controls if the matomo script should be loaded |
-| host           | `string`  | Url to your matomo installation                |
-| siteId         | `number`  | Matomo site id.                                |
-| heartBeatTimer | `number`  | If set the heart beat time will be enabled     |
-| disableCookies | `boolean` | If set cookies will be disabled                |
-| debug          | `boolean` | Activate debug mode                            |
+| Options        | Type      | Description                                               |
+| -------------- | --------- | --------------------------------------------------------- |
+| enabled        | `boolean` | Controls if the matomo script should be loaded            |
+| host           | `string`  | Url to your matomo installation                           |
+| siteId         | `number`  | Matomo site id.                                           |
+| heartBeatTimer | `number`  | If set the heart beat time will be enabled                |
+| disableCookies | `boolean` | If set cookies will be disabled                           |
+| preconnect     | `boolean` | Will create a preconnect link pointing to the matomo host |
+| debug          | `boolean` | Activate debug mode                                       |
 
 ## Example usage
 

demo/astro.config.mjs

@@ -11,7 +11,7 @@ export default defineConfig({
       siteId: 9,
       debug: true,
       heartBeatTimer: 5,
+      preconnect: true,
     }),
   ]
-
 });

package.json

@@ -7,10 +7,14 @@
 		".": "./src/index.ts",
 		"./matomo.ts": "./src/matomo.ts"
 	},
+	"main": "src/index.ts",
 	"files": [
 		"src"
 	],
 	"keywords": [
+		"astro",
+		"astro.js",
+		"withastro",
 		"astro-integration",
 		"matomo",
 		"analytics",
@@ -54,4 +58,4 @@
 	"peerDependencies": {
 		"astro": "^2.0.0-beta.0"
 	}
-}
+}

src/index.ts

@@ -6,11 +6,14 @@ export type MatomoOptions = | {
   siteId: number,
   heartBeatTimer?: number,
   disableCookies?: boolean,
+  preconnect?: boolean,
   debug?: boolean
 } | undefined;
 
 export default function createPlugin(options: MatomoOptions): AstroIntegration {
-  let script = `import {initMatomo} from 'astro-matomo/matomo.ts'; initMatomo(${JSON.stringify(options)});`
+  let script = `import {initMatomo, preconnectMatomo} from 'astro-matomo/matomo.ts'; initMatomo(${JSON.stringify(options)});`
+
+  if (options?.preconnect) script += `preconnectMatomo(${JSON.stringify(options)});`
 
   if (!options?.enabled) {
     console.warn('Matomo is disabled!');

src/matomo.ts

@@ -1,6 +1,13 @@
 import type {MatomoOptions} from "./index.js";
 
-export function initMatomo(options: MatomoOptions) {
+/**
+ * Init Matomo
+ *
+ * @param   {MatomoOptions}  options
+ *
+ * @return  {void}
+ */
+export function initMatomo(options: MatomoOptions):void {
   const _paq = (window._paq = window._paq || []);
 
   /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
@@ -32,4 +39,20 @@ export function initMatomo(options: MatomoOptions) {
     g.src = u + 'matomo.js';
     if (s.parentNode != null && u) s.parentNode.insertBefore(g, s);
   })();
-};
+};
+
+/**
+ * Generate a preconnect link for the Matomo host
+ *
+ * @param   {MatomoOptions}  options
+ *
+ * @return  {void}
+ */
+export function preconnectMatomo(options: MatomoOptions):void  {
+  if (!options?.host) return;
+
+  const link = document.createElement('link');
+  link.rel = 'preconnect';
+  link.href = options?.host;
+  document.head.appendChild(link);
+}