AnalyticsSwitch

src/AnalyticsSwitch.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import UmamiAnalytics from "./umami/UmamiAnalytics";
+import MatomoAnalytics from "./matomo/MatomoAnalytics";
+
+const AnalyticsSwitch = ({ disabled, umami, matomo }) => {
+  if (disabled) return "";
+
+  return (
+    <>
+      {umami && umami.enabled && <UmamiAnalytics {...umami} />}
+      {matomo && matomo.enabled && <MatomoAnalytics {...matomo} />}
+    </>
+  );
+};
+
+AnalyticsSwitch.defaultProps = {
+  disabled: false
+};
+
+AnalyticsSwitch.propTypes = {
+  disabled: PropTypes.bool,
+  umami: PropTypes.shape({
+    enabled: PropTypes.bool.isRequired,
+    source: PropTypes.string.isRequired,
+    websiteId: PropTypes.string.isRequired
+  }),
+  matomo: PropTypes.shape({
+    enabled: PropTypes.bool.isRequired,
+    source: PropTypes.string.isRequired,
+    websiteId: PropTypes.string.isRequired
+  })
+};
+
+export default AnalyticsSwitch;

src/index.js

@@ -1 +1,4 @@
-export {};
+import AnalyticsSwitch from "./AnalyticsSwitch";
+
+export { AnalyticsSwitch };
+export default AnalyticsSwitch;

src/matomo/MatomoAnalytics.js

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import useMatomoScript from "./useMatomoScript";
+
+const MatomoAnalytics = ({ source, websiteId }) => {
+  useMatomoScript(source, websiteId);
+  return "";
+};
+
+MatomoAnalytics.propTypes = {
+  source: PropTypes.string.isRequired,
+  websiteId: PropTypes.string.isRequired
+};
+
+export default MatomoAnalytics;

src/matomo/useMatomoScript.js

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+
+const useMatomoScript = (source, websiteId) => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.text = `var _paq = (window._paq = window._paq || []);
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(["trackPageView"]);
+    _paq.push(["enableLinkTracking"]);
+    (function () {
+      var u = "${source}";
+      _paq.push(["setTrackerUrl", u + "matomo.php"]);
+      _paq.push(["setSiteId", "${websiteId}"]);
+      var d = document,
+        g = d.createElement("script"),
+        s = d.getElementsByTagName("script")[0];
+      g.async = true;
+      g.src = u + "matomo.js";
+      s.parentNode.insertBefore(g, s);
+    })();`;
+
+    document.head.appendChild(script);
+
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, [source, websiteId]);
+};
+
+export default useMatomoScript;

src/umami/UmamiAnalytics.js

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import useUmamiScript from "./useUmamiScript";
+
+const UmamiAnalytics = ({ source, websiteId }) => {
+  useUmamiScript(source, websiteId);
+  return "";
+};
+
+UmamiAnalytics.propTypes = {
+  source: PropTypes.string.isRequired,
+  websiteId: PropTypes.string.isRequired
+};
+
+export default UmamiAnalytics;

src/umami/useUmamiScript.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+const useUmamiScript = (src, websiteId) => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.async = true;
+    script.defer = true;
+    script.src = src;
+    script.setAttribute("data-website-id", websiteId);
+
+    document.head.appendChild(script);
+
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, [src, websiteId]);
+};
+
+export default useUmamiScript;