analytics: use next-plausible library

2 years ago · 5354420931
4 changed files with 16 additions and 10 deletions
--- a/components/BlogList.js
+++ b/components/BlogList.js
@ -1,8 +1,10 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { usePlausible } from 'next-plausible'

 const BlogList = ({ posts }) => {
    const router = useRouter();
+    const plausible = usePlausible();

    const isPublicPost = (post) => !post.slug.startsWith("_");
    const publicPosts = posts.filter(isPublicPost);
@ -18,12 +20,12 @@ const BlogList = ({ posts }) => {
        const randomUrl = `/posts/${randomPost?.slug}`;
        return (
            <p>
-                <Link
+                <a
                    href={randomUrl}
                    onClick={() => plausible("random_post_clicked")}
                >
                    ✨ Random Post ✨
-                </Link>
+                </a>
            </p>
        );
    };
--- a/components/Meta.js
+++ b/components/Meta.js
@ -1,5 +1,4 @@
 import Head from "next/head";
-import Script from "next/script";
 import { useEffect } from "react";

 export default function Meta(props) {
@ -19,11 +18,6 @@ export default function Meta(props) {

    return (
        <>
-            <Script
-                defer
-                data-domain="garrit.xyz"
-                src="https://analytics.slashdev.space/js/plausible.js"
-            ></Script>
            <Head>
                <meta
                    name="viewport"
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
  "dependencies": {
    "markdown": "0.5.0",
    "next": "^12.1.0",
+    "next-plausible": "^3.1.6",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-markdown": "7.1.1",
--- a/pages/_app.js
+++ b/pages/_app.js
@ -1,7 +1,16 @@
-import '../styles/index.scss'
+import PlausibleProvider from "next-plausible";
+import "../styles/index.scss";

 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+    return (
+        <PlausibleProvider
+            domain="garrit.xyz"
+            customDomain="https://analytics.slashdev.space"
+            trackOutboundLinks
+        >
+            <Component {...pageProps} />;
+        </PlausibleProvider>
+    );
 }

 export default MyApp;