diff --git a/.env.template b/.env.template
index 6a58a91..a55ba82 100644
--- a/.env.template
+++ b/.env.template
@@ -7,3 +7,5 @@ REACT_APP_ENS_CONTRACT=0x3671aE578E63FdF66ad4F3E12CC0c0d71Ac7510C
REACT_APP_INTERCOM_APP_ID=
REACT_APP_POAP_APP_URL=https://app.poap.xyz
REACT_APP_POAP_FAMILY_URL=https://poap.family
+REACT_APP_MATOMO_SITE_ID=9
+REACT_APP_MATOMO_HOST=poapxyz.matomo.cloud
diff --git a/package.json b/package.json
index fbd855a..25f3281 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@datadog/browser-rum": "^4.11.1",
+ "@datapunt/matomo-tracker-react": "^0.5.1",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
diff --git a/src/index.js b/src/index.js
index 9956328..3013c23 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,11 +8,26 @@ import { Provider } from 'react-redux';
import store from './store';
import ReactModal from 'react-modal';
+import { createInstance, MatomoProvider } from '@datapunt/matomo-tracker-react';
AOS.init({
once: true,
});
+const matomoHost = process.env.REACT_APP_MATOMO_HOST ?? 'poapxyz.matomo.cloud';
+const matomoSiteId = parseInt(process.env.REACT_APP_MATOMO_SITE_ID);
+
+const matomo = createInstance({
+ siteId: matomoSiteId,
+ urlBase: `https://${matomoHost}`,
+ srcUrl: `https://cdn.matomo.cloud/${matomoHost}/matomo.js`,
+ disabled: false,
+ linkTracking: true,
+ configurations: {
+ disableCookies: true,
+ },
+});
+
ReactModal.setAppElement(document.getElementById('root'));
const render = () => {
@@ -20,7 +35,9 @@ const render = () => {
ReactDOM.render(
-
+
+
+
,
document.getElementById('root')
diff --git a/src/pages/activity.js b/src/pages/activity.js
index 76759be..983a7ef 100644
--- a/src/pages/activity.js
+++ b/src/pages/activity.js
@@ -34,15 +34,24 @@ import { useWindowWidth } from '@react-hook/window-size/throttled';
import { Link } from 'react-router-dom';
import { LazyImage } from '../components/LazyImage';
import { toast } from 'react-hot-toast';
+import { useMatomo } from '@datapunt/matomo-tracker-react';
export default function Activity() {
const dispatch = useDispatch();
+ const { trackPageView } = useMatomo();
// Meanwhile get all the events
useEffect(() => {
dispatch(fetchActivityPageData());
}, []);
+ useEffect(() => {
+ trackPageView({
+ href: window.location.href,
+ documentTitle: 'POAP Gallery - Activity',
+ });
+ }, []);
+
const [loading, setLoading] = useState(false);
const [transfers, setTransfers] = useState([]);
diff --git a/src/pages/event.js b/src/pages/event.js
index 584a9d7..5fa5ea3 100644
--- a/src/pages/event.js
+++ b/src/pages/event.js
@@ -37,6 +37,7 @@ import { useWindowWidth } from '@react-hook/window-size/throttled';
import { Spinner } from '../components/spinner';
import { collectionlLinks, externalLinkSetter } from '../utilities/utilities';
import { POAP_APP_URL } from '../store/api';
+import { useMatomo } from '@datapunt/matomo-tracker-react';
const FETCH_POAPS_LIMIT = 300;
const CSV_STATUS = {
@@ -70,6 +71,8 @@ export function Event() {
const params = useParams();
const { eventId } = params;
const dispatch = useDispatch();
+ const { trackPageView, trackLink } = useMatomo();
+
const tokens = useSelector((state) => state.events.tokens);
const loadingEvent = useSelector((state) => state.events.eventStatus);
const errorEvent = useSelector((state) => state.events.eventError);
@@ -116,6 +119,15 @@ export function Event() {
window.scrollTo(0, 0);
}, []);
+ useEffect(() => {
+ if (event) {
+ trackPageView({
+ href: window.location.href,
+ documentTitle: `POAP Gallery - Event - ${event.name}`,
+ });
+ }
+ }, [event]);
+
useEffect(() => {
// Get new batch of tokens
if (eventId) {
@@ -318,6 +330,14 @@ export function Event() {
{(csvReady() || csvOnlyMissingEns() || csvFailed()) && (
{
+ const url = new URL(window.location.href);
+ url.pathname += `/${event.name}.csv`;
+ trackLink({
+ href: url,
+ linkType: 'download',
+ });
+ }}
filename={`${event.name}.csv`}
target="_blank"
data-tip={`${
diff --git a/src/pages/gallery.js b/src/pages/gallery.js
index 418ee91..98adf4e 100644
--- a/src/pages/gallery.js
+++ b/src/pages/gallery.js
@@ -19,6 +19,7 @@ import Dropdown from '../components/dropdown';
import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
import { useWindowWidth } from '@react-hook/window-size';
import { OrderType, OrderDirection } from '../store/api';
+import { useMatomo } from '@datapunt/matomo-tracker-react';
const SEARCH_STATUS = {
NoSearch: 'NoSearch',
@@ -29,6 +30,7 @@ const SEARCH_STATUS = {
export default function Gallery() {
const dispatch = useDispatch();
+ const { trackPageView, trackSiteSearch } = useMatomo();
const events = useSelector(selectEvents);
const indexFetchStatus = useSelector(selectIndexFetchStatus);
@@ -37,6 +39,7 @@ export default function Gallery() {
const [items, setItems] = useState(events);
const [searchStatus, setSearchStatus] = useState(SEARCH_STATUS.NoSearch);
const [searchValue, setSearchValue] = useState('');
+ const [searchTrackTimer, setSearchTrackTimer] = useState(null);
const [page, setPage] = useState(0);
const [moreToLoad, setMoreToLoad] = useState(true);
@@ -92,6 +95,13 @@ export default function Gallery() {
setItems(events);
}, [events]);
+ useEffect(() => {
+ trackPageView({
+ href: window.location.href,
+ documentTitle: `POAP Gallery - Home`,
+ });
+ }, []);
+
const eraseSearch = () => {
setSearchValue('');
setSearchStatus(SEARCH_STATUS.NoSearch);
@@ -111,6 +121,20 @@ export default function Gallery() {
setSearchStatus(SEARCH_STATUS.NoSearch);
} else {
setSearchStatus(SEARCH_STATUS.Searching);
+ if (searchTrackTimer) {
+ clearTimeout(searchTrackTimer);
+ setSearchTrackTimer(null);
+ }
+ setSearchTrackTimer(
+ setTimeout(() => {
+ trackSiteSearch({
+ href: window.location.href,
+ documentTitle: `POAP Gallery - Search "${value}"`,
+ keyword: value,
+ });
+ setSearchTrackTimer(null);
+ }, 500)
+ );
}
};
const handleNewSearchValue = (value) => {
diff --git a/yarn.lock b/yarn.lock
index fb2def6..13c0c65 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1205,6 +1205,18 @@
"@datadog/browser-core" "4.23.3"
"@datadog/browser-rum-core" "4.23.3"
+"@datapunt/matomo-tracker-js@^0.5.1":
+ version "0.5.1"
+ resolved "https://registry.yarnpkg.com/@datapunt/matomo-tracker-js/-/matomo-tracker-js-0.5.1.tgz#92a746ffa421f91b3a59fefce707d45ca22be96b"
+ integrity sha512-9/MW9vt/BA5Db7tO6LqCeQKtuvBNjyq51faF3AzUmPMlYsJCnASIxcut3VqJKiribhUoey7aYbPIYuj9x4DLPA==
+
+"@datapunt/matomo-tracker-react@^0.5.1":
+ version "0.5.1"
+ resolved "https://registry.yarnpkg.com/@datapunt/matomo-tracker-react/-/matomo-tracker-react-0.5.1.tgz#d7a4e62b23610eab2b7513d4df41d500291aaa53"
+ integrity sha512-lrNYM9hFL6XK0VAdtMb7MwZrLWhaAconx4c7gOGAMvoWuoVm+ZZIYFuKtfYdYMeBf0avxWtmKRwjZEg7T8jV2A==
+ dependencies:
+ "@datapunt/matomo-tracker-js" "^0.5.1"
+
"@eslint/eslintrc@^1.3.3":
version "1.3.3"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"