diff --git a/apps/xmtp.chat/package.json b/apps/xmtp.chat/package.json index 3bfd614e..62c1a04d 100644 --- a/apps/xmtp.chat/package.json +++ b/apps/xmtp.chat/package.json @@ -29,6 +29,7 @@ "@xmtp/content-type-reply": "^2.0.0", "@xmtp/content-type-text": "^2.0.0", "date-fns": "^4.1.0", + "plausible-tracker": "^0.3.9", "react": "^18.3.1", "react-18-blockies": "^1.0.6", "react-dom": "^18.3.1", diff --git a/apps/xmtp.chat/src/components/App.tsx b/apps/xmtp.chat/src/components/App.tsx index c6743106..ee01bf1b 100644 --- a/apps/xmtp.chat/src/components/App.tsx +++ b/apps/xmtp.chat/src/components/App.tsx @@ -8,6 +8,7 @@ import { Title, } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; +import Plausible from "plausible-tracker"; import { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router"; import { useClient } from "../hooks/useClient"; @@ -63,6 +64,18 @@ export const App: React.FC = () => { }; }, []); + useEffect(() => { + const plausible = Plausible({ + domain: "xmtp.chat", + }); + const cleanupAutoPageviews = plausible.enableAutoPageviews(); + const cleanupAutoOutboundTracking = plausible.enableAutoOutboundTracking(); + return () => { + cleanupAutoPageviews(); + cleanupAutoOutboundTracking(); + }; + }, []); + return ( <> {unhandledRejectionError && ( diff --git a/apps/xmtp.chat/src/components/DisableAnalytics.tsx b/apps/xmtp.chat/src/components/DisableAnalytics.tsx new file mode 100644 index 00000000..10ca734f --- /dev/null +++ b/apps/xmtp.chat/src/components/DisableAnalytics.tsx @@ -0,0 +1,43 @@ +import { Box, Flex, Switch, Text, Tooltip } from "@mantine/core"; +import { useLocalStorage } from "@mantine/hooks"; +import React from "react"; +import { IconInfoCircle } from "../icons/IconInfoCircle"; + +const DisableAnalyticsLabel = () => { + return ( + + Disable analytics + + + + + + + ); +}; + +export const DisableAnalytics: React.FC = () => { + const [checked, setChecked] = useLocalStorage({ + key: "plausible_ignore", + defaultValue: false, + }); + + const handleChange = (event: React.ChangeEvent) => { + setChecked(event.currentTarget.checked); + }; + + return ( + } + /> + ); +}; diff --git a/apps/xmtp.chat/src/components/Settings.tsx b/apps/xmtp.chat/src/components/Settings.tsx index 0d62bb0d..319f34ae 100644 --- a/apps/xmtp.chat/src/components/Settings.tsx +++ b/apps/xmtp.chat/src/components/Settings.tsx @@ -1,6 +1,7 @@ import { Button, FocusTrap, Popover, Stack, useMatches } from "@mantine/core"; import React, { useEffect, useRef } from "react"; import { IconSettings } from "../icons/IconSettings"; +import { DisableAnalytics } from "./DisableAnalytics"; import { LoggingSelect } from "./LoggingSelect"; import { NetworkSelect } from "./NetworkSelect"; import { useRefManager } from "./RefManager"; @@ -36,6 +37,7 @@ export const Settings: React.FC = () => { + diff --git a/yarn.lock b/yarn.lock index 341348aa..943493d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5222,6 +5222,7 @@ __metadata: "@xmtp/content-type-reply": "npm:^2.0.0" "@xmtp/content-type-text": "npm:^2.0.0" date-fns: "npm:^4.1.0" + plausible-tracker: "npm:^0.3.9" postcss: "npm:^8.5.1" postcss-preset-mantine: "npm:^1.17.0" postcss-simple-vars: "npm:^7.0.1" @@ -10145,6 +10146,13 @@ __metadata: languageName: node linkType: hard +"plausible-tracker@npm:^0.3.9": + version: 0.3.9 + resolution: "plausible-tracker@npm:0.3.9" + checksum: 10/d93176d342382aad10c53e041ab402e476d42f8ad11e04f4d0e598bca477fbf20774579a3b75832c27a42470fecf194469fa810cb521d2a36dfb4695f34a0d5a + languageName: node + linkType: hard + "playwright-core@npm:1.49.1": version: 1.49.1 resolution: "playwright-core@npm:1.49.1"