feat: Umami Analytics added

This commit is contained in:
Bradley Shellnut 2022-07-05 15:40:26 -07:00
parent 4b03914b29
commit dd13baa7a8
7 changed files with 35 additions and 11 deletions

View file

@ -168,7 +168,9 @@ const Login = () => {
onChange={handleChange}
className="penguin"
/>
<button type="submit">Login</button>
<button type="submit" className="umami--click--login">
Login
</button>
</fieldset>
</FormStyles>
</div>

14
package-lock.json generated
View file

@ -34,7 +34,7 @@
"react-icons": "^4.4.0",
"sharp": "^0.30.7",
"styled-components": "^5.3.5",
"swr": "^1.0.1",
"swr": "^1.3.0",
"waait": "^1.0.5"
},
"devDependencies": {
@ -11558,9 +11558,9 @@
}
},
"node_modules/swr": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/swr/-/swr-1.2.2.tgz",
"integrity": "sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
"integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
"peerDependencies": {
"react": "^16.11.0 || ^17.0.0 || ^18.0.0"
}
@ -20774,9 +20774,9 @@
"dev": true
},
"swr": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/swr/-/swr-1.2.2.tgz",
"integrity": "sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
"integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
"requires": {}
},
"symbol-tree": {

View file

@ -36,7 +36,7 @@
"react-icons": "^4.4.0",
"sharp": "^0.30.7",
"styled-components": "^5.3.5",
"swr": "^1.0.1",
"swr": "^1.3.0",
"waait": "^1.0.5"
},
"devDependencies": {

View file

@ -65,6 +65,13 @@ function MyApp({ Component, pageProps }) {
as="font"
crossOrigin=""
/>
<script
async
defer
data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
src={process.env.NEXT_PUBLIC_UMAMI_URL}
data-do-not-track="true"
/>
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>

View file

@ -12,6 +12,7 @@ import Guest from '../../models/Guest';
import connectDb from '../../utils/db';
import { CalendarIcon, MapIcon } from '../../lib/svgs';
import Modal from '../../components/Modal';
import { handleUmamiEvent } from '../../utils/handleUmamiEvent';
const RSVPGroupStyles = styled.div`
h2 {
@ -211,6 +212,7 @@ export default function SingleGroupPage({ group }) {
console.log('res.message', res.message);
if (res.message === 'SUCCESS') {
handleUmamiEvent('RSVP SUCCESS', 'success-rsvp');
setMessage(
`Successfully submitted your RSVP${
body.guests.length > 1 ? 's' : ''
@ -218,6 +220,7 @@ export default function SingleGroupPage({ group }) {
);
openModal();
} else {
handleUmamiEvent('RSVP FAILURE', 'failure-rsvp');
setErrorCount(errorCount + 1);
setErrorMsg('Unable to RSVP Your Group');
}

View file

@ -7,6 +7,7 @@ import Form from '../../components/styles/Form';
import fetchJson from '../../lib/fetchJson';
import useForm from '../../lib/useForm';
import useUser from '../../lib/useUser';
import { handleUmamiEvent } from '../../utils/handleUmamiEvent';
const RSVPStyles = styled.div`
display: grid;
@ -51,17 +52,19 @@ export default function RsvpPage() {
});
if (res.status === 'SUCCESS') {
handleUmamiEvent('Fetch RSVP SUCCESS', 'success-fetch-rsvp');
router.push({
pathname: `/rsvp/${res.groupId}`,
});
} else {
handleUmamiEvent('Fetch RSVP FAILURE', 'failure-fetch-rsvp');
setErrorCount(errorCount + 1);
setErrorMsg('Unable to RSVP');
}
} catch (error) {
// console.error('An unexpected error happened:', error);
setErrorCount(errorCount + 1);
setErrorMsg('Unable to RSVP');
setErrorMsg('Unable to find your RSVP');
}
}
@ -115,7 +118,9 @@ export default function RsvpPage() {
onChange={handleChange}
/>
</label>
<button type="submit">Click to RSVP</button>
<button type="submit" className="umami--click--find-rsvp">
Find Your RSVP
</button>
</fieldset>
</Form>
</RSVPStyles>

View file

@ -0,0 +1,7 @@
async function handleUmamiEvent(eventValue, eventType) {
if (typeof window !== 'undefined') {
window?.umami?.trackEvent(eventValue, eventType);
}
}
export { handleUmamiEvent };