Merge pull request #183 from Developer-DAO/add-plausible-analytics

Author: with-heart

frontend/README.md

@@ -87,6 +87,21 @@ nvm install; # to install the version in .nvmrc
 5. To test Walletconnect functionality, copy `.env.development` to `.env.local` and fill in your `INFURA_ID`.
    `INFURA_ID` can be easily obtained by register at <https://infura.io/>, then create a new Ethereum project for free.
 
+### Deployment
+
+This project uses Vercel to manage deployments. We use the Vercel GitHub integration to automatically deploy in two situations:
+
+- When code is merged into `main`, a production deployment is triggered. Vercel will build the project and deploy it to `developerdao.com`.
+- When a pull request is created, a preview deployment is triggered. Vercel will build the project from the PR's code and deploy it to an auto-generated URL.
+
+In both cases, Vercel runs `next build` to build the project. Since running `next build` automatically sets `NODE_ENV` to `production`, if you need to distinguish between an actual production deployment and a PR preview deployment (example: we only want to run code that connects to analytics in production and not for preview deploys), use the `NEXT_PUBLIC_VERCEL_ENV` (`process.env.NEXT_PUBLIC_VERCEL_ENV`) environment variable. This variable exists in Vercel and provides the following values:
+
+| Vercel Environment | value |
+| --- | --- |
+| Production | `production` |
+| Preview | `preview` |
+| Development | `development` |
+
 ## Contributing
 
 Thanks for showing interest in contributing to Developer DAO. Before submitting any changes please review our contributing gudielines in [CONTRIBUTING.md](./CONTRIBUTING.md).

frontend/next.config.js

@@ -1,5 +1,6 @@
+const { withPlausibleProxy } = require('next-plausible');
 const { i18n } = require('./next-i18next.config');
 
-module.exports = {
+module.exports = withPlausibleProxy()({
   i18n,
-};
+});

frontend/package.json

@@ -20,6 +20,7 @@
     "jest": "^27.2.0",
     "next": "^11.1.2",
     "next-i18next": "^8.8.0",
+    "next-plausible": "^3.1.4",
     "react": "^17.0.2",
     "react-confetti": "^6.0.1",
     "react-dom": "^17.0.2",

frontend/src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import Head from 'next/head';
 import { appWithTranslation } from 'next-i18next';
 import { ChakraProvider } from '@chakra-ui/react';
@@ -9,9 +9,18 @@ import { AppProps } from 'next/app';
 
 import { DEVELOPER_DAO_WEBSITE } from '../utils/DeveloperDaoConstants';
 import { theme } from '../theme';
+import PlausibleProvider from 'next-plausible';
 
 const socialBanner = `${DEVELOPER_DAO_WEBSITE}/social-banner.png`;
 
+const Plausible = ({ children }: { children: ReactNode }) => {
+  return process.env.NEXT_PUBLIC_VERCEL_ENV === 'production' ? (
+    <PlausibleProvider domain="developerdao.com">{children}</PlausibleProvider>
+  ) : (
+    <>{children}</>
+  );
+};
+
 function SEO() {
   const { t } = useTranslation();
 
@@ -134,9 +143,11 @@ user's mobile device or desktop. See https://developers.google.com/web/fundament
 const App = ({ Component, pageProps }: AppProps) => (
   <>
     <SEO />
-    <ChakraProvider theme={theme}>
-      <Component {...pageProps} />
-    </ChakraProvider>
+    <Plausible>
+      <ChakraProvider theme={theme}>
+        <Component {...pageProps} />
+      </ChakraProvider>
+    </Plausible>
   </>
 );
 

frontend/yarn.lock

@@ -7494,6 +7494,11 @@ next-i18next@^8.8.0:
     i18next-fs-backend "^1.0.7"
     react-i18next "^11.8.13"
 
+next-plausible@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/next-plausible/-/next-plausible-3.1.4.tgz#a386ff4e2327995cb4a1307e53e1b4af70817b52"
+  integrity sha512-NMLKJ0AKlKuvYU//RytyqSES5NtLRoH/ym3fCC02w2Ed1SrTgNRUrgpxyJrcguY/DYGPncQ3a0/nQ358vUTAwQ==
+
 next-tick@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz"