AnalyticsSwitch

master
Tudor Stanciu 2022-09-18 23:44:01 +03:00
parent 7d69d9f8a5
commit 7aae6be023
6 changed files with 116 additions and 1 deletions

35
src/AnalyticsSwitch.js Normal file
View File

@ -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;

View File

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

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;