diff --git a/packages/nextjs/components/TrackedLink.tsx b/packages/nextjs/components/TrackedLink.tsx new file mode 100644 index 0000000..13c4375 --- /dev/null +++ b/packages/nextjs/components/TrackedLink.tsx @@ -0,0 +1,26 @@ +import { ReactNode } from "react"; +import { usePlausible } from "next-plausible"; + +type TrackedLinkProps = { + id: string; + href: string; + className?: string; + children: ReactNode; +}; + +// Track external clicks on links using plausible +export default function TrackedLink({ id, href, className, children }: TrackedLinkProps) { + const plausible = usePlausible(); + + return ( + plausible("click", { props: { id } })} + > + {children} + + ); +} diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js index 148d011..893b8e5 100644 --- a/packages/nextjs/next.config.js +++ b/packages/nextjs/next.config.js @@ -1,4 +1,6 @@ // @ts-check +// @ts-ignore +const { withPlausibleProxy } = require("next-plausible"); /** @type {import('next').NextConfig} */ const nextConfig = { @@ -11,4 +13,4 @@ const nextConfig = { }, }; -module.exports = nextConfig; +module.exports = withPlausibleProxy()(nextConfig); diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index bc68040..ecc9a27 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -21,6 +21,7 @@ "@uniswap/v2-sdk": "^3.0.1", "daisyui": "^2.31.0", "next": "^13.1.6", + "next-plausible": "^3.10.1", "nextjs-progressbar": "^0.0.16", "qrcode.react": "^3.1.0", "react": "^18.2.0", diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx index f8800e8..54018a3 100644 --- a/packages/nextjs/pages/_app.tsx +++ b/packages/nextjs/pages/_app.tsx @@ -1,6 +1,7 @@ import type { AppProps } from "next/app"; import { RainbowKitProvider, lightTheme } from "@rainbow-me/rainbowkit"; import "@rainbow-me/rainbowkit/styles.css"; +import PlausibleProvider from "next-plausible"; import NextNProgress from "nextjs-progressbar"; import { Toaster } from "react-hot-toast"; import { WagmiConfig } from "wagmi"; @@ -12,16 +13,18 @@ import "~~/styles/globals.css"; const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => { return ( - - - -
- -
-