Integrate Plausible Analytics without External Scripts

import { useEffect } from 'react';
import Image from 'next/image';

export default function PlausibleTracking({ domain, pathname }) {
  useEffect(() => {
    // Construct the URL for the tracking image
    const plausibleTrackingUrl = `https://plausible.io/api/event`;
    // Create the query parameters
    const params = new URLSearchParams({
      domain,
      url: document.location.href,
      referrer: document.referrer || '',
      screen_width: window.innerWidth,
      user_agent: navigator.userAgent
    });

    // Function to handle visibility change
    const onVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        // Send a 'pageview' event if the page becomes visible
        fetch(`${plausibleTrackingUrl}?${params}`, {
          method: 'POST',
          headers: { 'Content-Type': 'image/png' }
        });
      }
    };

    // Attach the handler to the visibility change event
    document.addEventListener('visibilitychange', onVisibilityChange);

    return () => {
      // Clean up the event listener when the component unmounts
      document.removeEventListener('visibilitychange', onVisibilityChange);
    };
  }, [domain, pathname]);

  return (
    <Image
      src={`https://plausible.io/api/event?${params.toString()}`}
      width="1"
      height="1"
      alt=""
    />
  );
}