Make alt text optional with configurable altText parameter

Co-authored-by: adriaandotcom <[email protected]>

Author: Copilot

FEATURES.md

@@ -14,6 +14,7 @@
   - [✅ Option: Strict UTMs 🔒](https://github.com/ViorelMocanu/astro-simpleanalytics-plugin/blob/main/FEATURES.md#user-content--option-strict-utms-)
   - [✅ Option: Allow URL parameters 🔓](https://github.com/ViorelMocanu/astro-simpleanalytics-plugin/blob/main/FEATURES.md#user-content--option-allow-url-parameters-)
   - [✅ Option: Ignore metrics 🚫](https://github.com/ViorelMocanu/astro-simpleanalytics-plugin/blob/main/FEATURES.md#user-content--option-ignore-metrics-)
+  - [✅ Option: Custom alt text for tracking pixel 🏷️](https://github.com/ViorelMocanu/astro-simpleanalytics-plugin/blob/main/FEATURES.md#user-content--option-custom-alt-text-for-tracking-pixel-️)
   - [💡 Feature: Embed chart on your site 📈](https://github.com/ViorelMocanu/astro-simpleanalytics-plugin/blob/main/FEATURES.md#user-content--feature-embed-chart-on-your-site-)
 
 Once you [install it](README.md#🚀-installation), the Astro Simple Analytics Plugin should be ready to go with zero config.
@@ -40,6 +41,7 @@ These are all the available parameter options for this plugin where you choose t
   ignorePages={undefined}        {/* (undefined | string) */}
   nonUniqueHostnames={undefined} {/* (undefined | string) */}
   ignoreMetrics={undefined}      {/* (undefined | string) */}
+  altText={undefined}            {/* (undefined | string) */}
 />
 ```
 
@@ -250,6 +252,18 @@ So if, for example, you'd like to ignore `timeonpage` and `scrolled`, you should
 
 You can add any number of metrics to this list if you want to ignore them.
 
+## ✅ Option: Custom alt text for tracking pixel 🏷️
+
+By default, the tracking pixel in the noscript fallback has an empty alt attribute (`alt=""`), which is appropriate for decorative images. However, you may want to provide custom alternative text for accessibility or other reasons.
+
+You can customize the alt text by passing the `altText` parameter:
+
+```Astro
+<SimpleAnalytics altText="Simple Analytics tracking pixel" />
+```
+
+If you don't provide the `altText` parameter, it will default to an empty string, keeping the original behavior.
+
 ## 💡 Feature: Embed chart on your site 📈
 
 The Astro Simple Analytics Plugin allows you to [embed a chart of your public website statistics](https://docs.simpleanalytics.com/embed-chart-on-your-site) on your website.

README.md

@@ -75,6 +75,7 @@ These are all the available parameter options for this plugin where you choose t
   ignorePages={undefined}        {/* (undefined | string) */}
   nonUniqueHostnames={undefined} {/* (undefined | string) */}
   ignoreMetrics={undefined}      {/* (undefined | string) */}
+  altText={undefined}            {/* (undefined | string) */}
 />
 ```
 

src/SimpleAnalytics.astro

@@ -4,6 +4,7 @@ import {
   sanitizeCSV,
   sanitizeHostname,
   sanitizeHostnameList,
+  sanitizeString,
 } from "./utilities";
 
 export interface Props {
@@ -19,6 +20,7 @@ export interface Props {
   strictUTMs?: boolean;
   allowParams?: string | undefined;
   ignoreMetrics?: string | undefined;
+  altText?: string | undefined;
 }
 
 const {
@@ -34,6 +36,7 @@ const {
   strictUTMs = false,
   allowParams = undefined,
   ignoreMetrics = undefined,
+  altText = undefined,
 } = Astro.props;
 
 // prop sanitization
@@ -49,6 +52,7 @@ const sanitizedDebug = sanitizeBoolean(debug);
 const sanitizedStrictUTMs = sanitizeBoolean(strictUTMs);
 const sanitizedAllowParams = sanitizeCSV(allowParams);
 const sanitizedIgnoreMetrics = sanitizeCSV(ignoreMetrics);
+const sanitizedAltText = sanitizeString(altText);
 
 // attribute generation
 const realURL = new URL(Astro.url.origin);
@@ -159,7 +163,7 @@ if (sanitizedDebug) {
       <noscript>
         <img
           src={imageSrc}
-          alt="Simple Analytics tracking pixel"
+          alt={sanitizedAltText || ""}
           referrerpolicy="no-referrer-when-downgrade"
         />
       </noscript>