Add matomo cookie / tracking acceptance banner

[spwoodcock]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Related Issue

Anticipates merge of #463
the only change here is actually to App.tsx.

Describe this PR

• Adds matomo cookie tracking banner as requested.
• Accepting will enable anonymised matomo tracking.
• Rejecting will prevent any tracking.
• Both will close the banner, with response saved to localStorage.

Note

I had to do a hacky workaround using style={{position: 'fixed', bottom: '0%'}} for fixed position on the screen.

This is due to hotosm/ui#72, so could be removed once fixed.

Screenshots

Checklist before requesting a review

• 📖 Read the HOT Code of Conduct: https://docs.hotosm.org/code-of-conduct
• 👷‍♀️ Create small PRs. In most cases, this will be possible.
• ✅ Provide tests for your changes.
• 📝 Use descriptive commit messages.
• 📗 Update any related documentation and include any relevant screenshots.

[optional] What gif best describes this PR or how it makes you feel?

[emi420]

Do you think is necessary to have tracking with cookies? we could have visit metrics without cookies, which means that we wouldn't need the annoying "About the information we collect" acceptance banner.

This would do it:

<script>
  	var _paq = window._paq = window._paq || [];
  	/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
        _paq.push(['disableCookies']);
  	_paq.push(['trackPageView']);
  	(function() {
   	 var u="//matomo.hotosm.org/";
   	 _paq.push(['setTrackerUrl', u+'matomo.php']);
   	 _paq.push(['setSiteId', '35']);
   	 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);
	  })();
</script>
<!-- End Matomo Code -->

[emi420]

I'm not sure about this PR, I would use the Matomo script for tracking without cookies.

What do you think?

[spwoodcock]

Cookies are used for authentication.

They don't have any tracking, and are purely functional, but don't we need the banner for GDPR compliance?

[spwoodcock]

Also as a side note, are you advocating for each project to insert its own matomo script, instead of standardising it in the web component?

I sense a reluctance to use the components, so just want to understand any reasoning 😃

[emi420]

You don't need the banner for authentication, consent is needed for cookies that are not strictly necessary (ref: https://europa.eu/youreurope/business/dealing-with-customers/data-protection/online-privacy/index_en.htm).

I don't have an opinion on how the script should be inserted, we need it for obtaining metrics about usage of tools (ex: number of unique visitors) it could be trough a web component if you think that's the best approach.

All other HOT tools already have the script implemented.