Plausible setup (#11)

BuidlGuidl · Aug 1, 2023 · 404c58e · 404c58e
1 parent 621b779
commit 404c58e
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 48 deletions.
diff --git a/packages/nextjs/components/BuildCard.tsx b/packages/nextjs/components/BuildCard.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import TrackedLink from "~~/components/TrackedLink";
 
 export const BuildCard = ({
   name,
@@ -12,19 +13,18 @@ export const BuildCard = ({
   link: string;
 }) => {
   return (
-    <a
+    <TrackedLink
+      id={name}
       href={link}
-      target="_blank"
-      rel="noreferrer"
       className="card card-compact lg:w-1/3 max-w-xs bg-white shadow-lg rounded-[46px]"
     >
       <div className="w-full h-[220px] relative">
-        <Image src={src} alt="Shoes" fill className="w-full object-center" />
+        <Image src={src} alt={name} fill className="w-full object-center" />
       </div>
       <div className="card-body gap-0 border-t">
         <h3 className="card-title m-0">{name}</h3>
         <p className="m-0">{description}</p>
       </div>
-    </a>
+    </TrackedLink>
   );
 };
diff --git a/packages/nextjs/components/ChallengeCard.tsx b/packages/nextjs/components/ChallengeCard.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import TrackedLink from "~~/components/TrackedLink";
 
 /**
  * Site header
@@ -26,14 +27,9 @@ export const Card = ({
         <h3 className="text-lg m-0 mb-2">{name}</h3>
         <p className="text-gray-700 m-0 text-sm">{description}</p>
       </div>
-      <a
-        href={link}
-        target="_blank"
-        rel="noreferrer"
-        className="btn btn-accent btn-sm md:self-start rounded-3xl mt-auto"
-      >
+      <TrackedLink id={name} href={link} className="btn btn-accent btn-sm md:self-start rounded-3xl mt-auto">
         Fork the Repo
-      </a>
+      </TrackedLink>
     </div>
   );
 };
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
+import TrackedLink from "~~/components/TrackedLink";
 
 /**
  * Site header
@@ -16,14 +17,13 @@ export const Header = () => {
         </Link>
       </div>
       <div className="navbar-end flex-grow mr-4 space-x-6">
-        <a
+        <TrackedLink
+          id="buidlguidl:app"
           href="https://app.buidlguidl.com"
-          target="_blank"
           className="btn btn-neutral text-accent-content btn-xs md:btn-sm px-4 font-light"
-          rel="noreferrer"
         >
           Go to App
-        </a>
+        </TrackedLink>
       </div>
     </div>
   );

diff --git a/packages/nextjs/components/LearnMoreCard.tsx b/packages/nextjs/components/LearnMoreCard.tsx
@@ -1,15 +1,16 @@
+import TrackedLink from "~~/components/TrackedLink";
+
 export const LearnMoreCard = ({ name, description, link }: { name: string; description: string; link: string }) => {
   return (
-    <a
+    <TrackedLink
+      id={name}
       href={link}
-      target="_blank"
-      rel="noreferrer"
       className="flex flex-col lg:w-[30%] max-w-xs shadow-lg bg-white rounded-[42px] p-5 mt-4"
     >
       <div className="mb-4">
         <h3 className="text-lg m-0 mb-2">{name}</h3>
         <p className="text-gray-700 m-0 text-sm">{description}</p>
       </div>
-    </a>
+    </TrackedLink>
   );
 };
diff --git a/packages/nextjs/components/TrackedLink.tsx b/packages/nextjs/components/TrackedLink.tsx
@@ -0,0 +1,27 @@
+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();
+  console.log(id);
+
+  return (
+    <a
+      href={href}
+      target="_blanck"
+      rel="noreferrer"
+      className={className}
+      onClick={() => plausible("click", { props: { id } })}
+    >
+      {children}
+    </a>
+  );
+}
diff --git 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 = {
@@ -40,4 +42,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withPlausibleProxy()(nextConfig);
diff --git 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",
     "react": "^18.2.0",
     "react-blockies": "^1.4.1",

diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import type { AppProps } from "next/app";
 import { RainbowKitProvider, darkTheme, 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 { useDarkMode } from "usehooks-ts";
@@ -21,19 +22,21 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   }, [isDarkMode]);
 
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <NextNProgress />
-      <RainbowKitProvider
-        chains={appChains.chains}
-        avatar={BlockieAvatar}
-        theme={isDarkTheme ? darkTheme() : lightTheme()}
-      >
-        <main className="font-space-grotesk">
-          <Component {...pageProps} />
-        </main>
-        <Toaster />
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <PlausibleProvider domain="buidlguidl.com">
+      <WagmiConfig config={wagmiConfig}>
+        <NextNProgress />
+        <RainbowKitProvider
+          chains={appChains.chains}
+          avatar={BlockieAvatar}
+          theme={isDarkTheme ? darkTheme() : lightTheme()}
+        >
+          <main className="font-space-grotesk">
+            <Component {...pageProps} />
+          </main>
+          <Toaster />
+        </RainbowKitProvider>
+      </WagmiConfig>
+    </PlausibleProvider>
   );
 };
 

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -6,6 +6,7 @@ import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
 import { LearnMoreCard } from "~~/components/LearnMoreCard";
 import { MetaHeader } from "~~/components/MetaHeader";
+import TrackedLink from "~~/components/TrackedLink";
 import { Address } from "~~/components/scaffold-eth";
 
 const Home: NextPage = () => {
@@ -33,14 +34,13 @@ const Home: NextPage = () => {
               <li>Level up your skills and get paid</li>
             </ul>
             <div className="text-center lg:text-left">
-              <a
+              <TrackedLink
+                id="SpeedRunEthereum"
                 href="https://speedrunethereum.com/"
-                target="_blank"
-                rel="noreferrer"
                 className="btn btn-accent btn-md lg:self-start px-8"
               >
                 Get Started Now!
-              </a>
+              </TrackedLink>
             </div>
           </div>
           <div className="max-w-[300px] lg:max-w-none">
@@ -105,14 +105,13 @@ const Home: NextPage = () => {
               <li>Open source tooling built and maintained by BuidlGuidl</li>
             </ul>
             <div className="text-center lg:text-left">
-              <a
+              <TrackedLink
+                id="Scaffold-ETH-2"
                 href="https://www.github.com/scaffold-eth/scaffold-eth-2"
-                target="_blank"
-                rel="noreferrer"
                 className="btn btn-accent btn-md lg:self-start px-8"
               >
                 Start using SE-2
-              </a>
+              </TrackedLink>
             </div>
           </div>
           <div className="flex flex-col items-center">
@@ -161,9 +160,9 @@ const Home: NextPage = () => {
               link="https://buidlguidl.com/build/oFWIYHo7WkvFQ29WQ12J"
             />
           </div>
-          <a href="https://app.buidlguidl.com/builds" target="_blank" rel="noreferrer" className="link mt-8">
+          <TrackedLink id="buidlguidl:projects" href="https://app.buidlguidl.com/builds" className="link mt-8">
             See all projects
-          </a>
+          </TrackedLink>
         </div>
       </div>
 
@@ -212,14 +211,13 @@ const Home: NextPage = () => {
             <p className="lg:w-4/5 m-0 mb-6">
               Our goal is to enrich open learning within the Ethereum developer ecosystem.
             </p>
-            <a
+            <TrackedLink
+              id="partnerships-email"
               href="mailto:[email protected]"
-              target="_blank"
-              rel="noreferrer"
               className="btn btn-secondary btn-md px-8 mt-2"
             >
               Connect with us
-            </a>
+            </TrackedLink>
           </div>
           <div className="flex flex-col items-center w-1/2">
             <p className="text-center mb-4 lg:mb-8 mt-12 lg:mt-0">SUPPORTED BY</p>

diff --git a/yarn.lock b/yarn.lock
@@ -1132,6 +1132,7 @@ __metadata:
     eslint-config-prettier: ^8.5.0
     eslint-plugin-prettier: ^4.2.1
     next: ^13.1.6
+    next-plausible: ^3.10.1
     nextjs-progressbar: ^0.0.16
     postcss: ^8.4.16
     prettier: ^2.8.4
@@ -6267,6 +6268,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-plausible@npm:^3.10.1":
+  version: 3.10.1
+  resolution: "next-plausible@npm:3.10.1"
+  peerDependencies:
+    next: ^11.1.0 || ^12.0.0 || ^13.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 5ff1e007fb6c4af37467143de67b41f54fc15940c3a714a0090e12551b23d03100b49870300a222ca8ea6a21edc8875a8119a1b1311b8f1ffc42221e70ac4a99
+  languageName: node
+  linkType: hard
+
 "next@npm:^13.1.6":
   version: 13.1.6
   resolution: "next@npm:13.1.6"