From f92f09bf8d2c3773d48d6efc3637dc8b4d2e2a07 Mon Sep 17 00:00:00 2001 From: Juan M Date: Mon, 1 May 2023 11:43:26 -0300 Subject: [PATCH 1/4] Matomo Analytics --- .env.template | 2 ++ package.json | 1 + src/index.js | 19 ++++++++++++++++++- src/pages/activity.js | 9 +++++++++ src/pages/event.js | 18 ++++++++++++++++++ src/pages/gallery.js | 14 ++++++++++++++ yarn.lock | 12 ++++++++++++ 7 files changed, 74 insertions(+), 1 deletion(-) 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..582aa8d 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,12 @@ export function Event() { {(csvReady() || csvOnlyMissingEns() || csvFailed()) && ( { + trackLink({ + href: `${event.name}.csv`, + linkType: 'download', + }); + }} filename={`${event.name}.csv`} target="_blank" data-tip={`${ diff --git a/src/pages/gallery.js b/src/pages/gallery.js index 418ee91..617e376 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); @@ -92,6 +94,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 +120,11 @@ export default function Gallery() { setSearchStatus(SEARCH_STATUS.NoSearch); } else { setSearchStatus(SEARCH_STATUS.Searching); + trackSiteSearch({ + href: window.location.href, + documentTitle: `POAP Gallery - Search "${value}"`, + keyword: value, + }); } }; 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" From 25201d7664b73c4ce60526765c8250a9fd419ab7 Mon Sep 17 00:00:00 2001 From: Juan M Date: Mon, 1 May 2023 11:58:32 -0300 Subject: [PATCH 2/4] Track full link for CSV downloads --- src/pages/event.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/event.js b/src/pages/event.js index 582aa8d..86208b0 100644 --- a/src/pages/event.js +++ b/src/pages/event.js @@ -331,8 +331,10 @@ export function Event() { {(csvReady() || csvOnlyMissingEns() || csvFailed()) && ( { + const url = new URL(window.location.href); + url.pathname += '/${event.name}.csv'; trackLink({ - href: `${event.name}.csv`, + href: url, linkType: 'download', }); }} From 3d325df4776363b89d7e2adc34a6c8d73e409cdd Mon Sep 17 00:00:00 2001 From: Juan M Date: Mon, 1 May 2023 12:04:09 -0300 Subject: [PATCH 3/4] Add timeout to track search --- src/pages/gallery.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/pages/gallery.js b/src/pages/gallery.js index 617e376..98adf4e 100644 --- a/src/pages/gallery.js +++ b/src/pages/gallery.js @@ -39,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); @@ -120,11 +121,20 @@ export default function Gallery() { setSearchStatus(SEARCH_STATUS.NoSearch); } else { setSearchStatus(SEARCH_STATUS.Searching); - trackSiteSearch({ - href: window.location.href, - documentTitle: `POAP Gallery - Search "${value}"`, - keyword: value, - }); + 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) => { From 128aa4311d91861e6c83bac485454700b1bdeea2 Mon Sep 17 00:00:00 2001 From: Juan M Date: Mon, 1 May 2023 12:06:38 -0300 Subject: [PATCH 4/4] Fix event name in CSV download tracked url --- src/pages/event.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/event.js b/src/pages/event.js index 86208b0..5fa5ea3 100644 --- a/src/pages/event.js +++ b/src/pages/event.js @@ -332,7 +332,7 @@ export function Event() { { const url = new URL(window.location.href); - url.pathname += '/${event.name}.csv'; + url.pathname += `/${event.name}.csv`; trackLink({ href: url, linkType: 'download',