diff --git a/src/AnalyticsSwitch.js b/src/AnalyticsSwitch.js new file mode 100644 index 0000000..5662f74 --- /dev/null +++ b/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 && } + {matomo && matomo.enabled && } + + ); +}; + +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; diff --git a/src/index.js b/src/index.js index cb0ff5c..0648f95 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,4 @@ -export {}; +import AnalyticsSwitch from "./AnalyticsSwitch"; + +export { AnalyticsSwitch }; +export default AnalyticsSwitch; diff --git a/src/matomo/MatomoAnalytics.js b/src/matomo/MatomoAnalytics.js new file mode 100644 index 0000000..944dd0f --- /dev/null +++ b/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; diff --git a/src/matomo/useMatomoScript.js b/src/matomo/useMatomoScript.js new file mode 100644 index 0000000..f193aad --- /dev/null +++ b/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; diff --git a/src/umami/UmamiAnalytics.js b/src/umami/UmamiAnalytics.js new file mode 100644 index 0000000..09fd382 --- /dev/null +++ b/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; diff --git a/src/umami/useUmamiScript.js b/src/umami/useUmamiScript.js new file mode 100644 index 0000000..5c7dc81 --- /dev/null +++ b/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;