Using next-plausible

4lejandrito · Aug 27, 2020 · a634d43 · a634d43
1 parent 147c3b9
commit a634d43
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 14 deletions.
diff --git a/packages/site/components/Button.tsx b/packages/site/components/Button.tsx
@@ -1,14 +1,15 @@
 import classNames from 'classnames'
-import analytics from '../util/analytics'
+import { usePlausible } from 'next-plausible'
 
 export function BuyMeACoffee() {
+  const plausible = usePlausible()
   return (
     <a
       style={{ height: '2.25rem' }}
       className="rounded overflow-hidden border-2 mx-2 flex-shrink-0"
       href="https://www.buymeacoffee.com/b4iusc3"
       target="_blank"
-      onClick={() => analytics('buymeacoffee')}
+      onClick={() => plausible('buymeacoffee')}
     >
       <img
         className="h-full"

diff --git a/packages/site/package.json b/packages/site/package.json
@@ -15,6 +15,7 @@
     "@types/react-select": "^3.0.16",
     "lodash.range": "^3.2.0",
     "next": "9.5.0",
+    "next-plausible": "^1.0.2",
     "next-seo": "^4.7.3",
     "npm-run-all": "^4.1.5",
     "react": "16.13.1",

diff --git a/packages/site/pages/index.tsx b/packages/site/pages/index.tsx
@@ -2,24 +2,17 @@ import Head from 'next/head'
 import { NextSeo } from 'next-seo'
 import Button, { BuyMeACoffee } from '../components/Button'
 import Demo from '../components/Demo'
+import PlausibleProvider from 'next-plausible'
 
 const logo = `${process.env.NEXT_PUBLIC_URL}/logo.png`
 
-export default function Home() {
+function Home() {
   const title = 'React Guitar'
   const description = 'A beautiful and flexible guitar component for React.'
   return (
     <div className="text-gray-800 font-sans min-h-screen flex flex-col items-center justify-center m-auto">
       <Head>
         <link rel="icon" href={logo} />
-        {process.env.NODE_ENV === 'production' && (
-          <script
-            async
-            defer
-            data-domain="react-guitar.com"
-            src="https://plausible.io/js/plausible.js"
-          />
-        )}
       </Head>
 
       <NextSeo
@@ -84,3 +77,11 @@ export default function Home() {
     </div>
   )
 }
+
+export default function HomeWithPlausible() {
+  return (
+    <PlausibleProvider domain="react-guitar.com">
+      <Home />
+    </PlausibleProvider>
+  )
+}
diff --git a/packages/site/util/analytics.ts b/packages/site/util/analytics.ts
diff --git a/yarn.lock b/yarn.lock
@@ -10219,6 +10219,11 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-plausible@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/next-plausible/-/next-plausible-1.0.2.tgz#373b776881e049a6ffcdf0c5c0b29d71409a4c6a"
+  integrity sha512-0J8SrhD8pqmx56FRpISQlyWack+Hc6Z6ohB8DNEVV32ypWCEOO779HITUTbEN69rQ2isXVDgURS+TiQQkVFFiA==
+
 next-seo@^4.7.3:
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.7.3.tgz#8da82dca4f425c84392c4a8462f215dfcb4195b0"