Merge pull request #144 from poap-xyz/release/v0.20.0

Release/v0.20.0

.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

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",

src/index.js

@@ -8,19 +8,36 @@ 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 = () => {
   const App = require('./App').default;
   ReactDOM.render(
     <React.StrictMode>
       <Provider store={store}>
-        <App />
+        <MatomoProvider value={matomo}>
+          <App />
+        </MatomoProvider>
       </Provider>
     </React.StrictMode>,
     document.getElementById('root')

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([]);
 

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() {
             </div>
             {(csvReady() || csvOnlyMissingEns() || csvFailed()) && (
               <CSVLink
+                onClick={() => {
+                  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={`${

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) => {

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"