From 91dc29d94498738348f70d30b63577c8bea1d6c5 Mon Sep 17 00:00:00 2001 From: Utku <74243531+utkubakir@users.noreply.github.com> Date: Wed, 25 Oct 2023 22:52:18 +0300 Subject: [PATCH] Fix landing analytics (#1675) fixerino --- apps/landing/next.config.js | 3 ++- apps/landing/package.json | 1 + apps/landing/src/app/Downloads.tsx | 35 ++++++++++++++++++++---------- apps/landing/src/app/layout.tsx | 10 +++++++++ apps/landing/vercel.json | 12 ---------- pnpm-lock.yaml | 25 ++++++++++++++++----- 6 files changed, 56 insertions(+), 30 deletions(-) delete mode 100644 apps/landing/vercel.json diff --git a/apps/landing/next.config.js b/apps/landing/next.config.js index ef7c433c1..f16ffbef6 100644 --- a/apps/landing/next.config.js +++ b/apps/landing/next.config.js @@ -3,6 +3,7 @@ const { withContentlayer } = require('next-contentlayer'); const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' }); +const { withPlausibleProxy } = require('next-plausible'); // Validate env on build // TODO: I wish we could do this so Vercel can warn us when we are wrong but it's too hard. // import './src/env.mjs'; @@ -77,4 +78,4 @@ const nextConfig = { } }; -module.exports = withBundleAnalyzer(withContentlayer(nextConfig)); +module.exports = withPlausibleProxy()(withBundleAnalyzer(withContentlayer(nextConfig))); diff --git a/apps/landing/package.json b/apps/landing/package.json index a23559bcf..599a549e5 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -25,6 +25,7 @@ "markdown-to-jsx": "^7.3.2", "next": "13.5.6", "next-contentlayer": "^0.3.4", + "next-plausible": "^3.11.2", "react": "18.2.0", "react-burger-menu": "^3.0.9", "react-device-detect": "^2.2.3", diff --git a/apps/landing/src/app/Downloads.tsx b/apps/landing/src/app/Downloads.tsx index 7dd4cab99..2b8c117fe 100644 --- a/apps/landing/src/app/Downloads.tsx +++ b/apps/landing/src/app/Downloads.tsx @@ -2,8 +2,8 @@ import { AndroidLogo, Globe, LinuxLogo, WindowsLogo } from '@phosphor-icons/react'; import { Apple, Github } from '@sd/assets/svgs/brands'; -import clsx from 'clsx'; import { motion } from 'framer-motion'; +import { usePlausible } from 'next-plausible'; import { ComponentProps, FunctionComponent, useEffect, useState } from 'react'; import { Tooltip } from '@sd/ui'; @@ -56,6 +56,8 @@ export function Downloads({ latestVersion }: Props) { const [selectedPlatform, setSelectedPlatform] = useState(null); const currentPlatform = useCurrentPlatform(); + const plausible = usePlausible(); + const formattedVersion = (() => { const platform = selectedPlatform ?? currentPlatform; @@ -80,10 +82,15 @@ export function Downloads({ latestVersion }: Props) { ? `${BASE_DL_LINK}/${currentPlatform.os}/${links[0].arch}` : undefined } - className={`z-5 plausible-event-name=download plausible-event-os= relative${currentPlatform.name}`} + className={`z-5 relative`} icon={Icon ? : undefined} text={`Download for ${currentPlatform.name}`} - onClick={() => setSelectedPlatform(currentPlatform)} + onClick={() => { + plausible('download', { + props: { os: currentPlatform.name } + }); + setSelectedPlatform(currentPlatform); + }} /> ); })()} @@ -106,10 +113,12 @@ export function Downloads({ latestVersion }: Props) { text={name} target="_blank" href={`${BASE_DL_LINK}/${selectedPlatform.os}/${arch}`} - className={clsx( - 'z-5 relative !py-1 !text-sm', - `plausible-event-name=download plausible-event-os=${selectedPlatform.name}+${arch}` - )} + onClick={() => { + plausible('download', { + props: { os: selectedPlatform.name + arch } + }); + }} + className="z-5 relative !py-1 !text-sm" /> ))} @@ -135,13 +144,15 @@ export function Downloads({ latestVersion }: Props) { { - if (platform.links && platform.links.length > 1) + if (platform.links && platform.links.length === 1) { + plausible('download', { + props: { os: platform.name } + }); + } + if (platform.links && platform.links.length > 1) { setSelectedPlatform(platform); + } }} /> diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx index 5db9ec027..1be2b10b9 100644 --- a/apps/landing/src/app/layout.tsx +++ b/apps/landing/src/app/layout.tsx @@ -7,6 +7,8 @@ import '@sd/ui/style/style.scss'; import '~/styles/prism.css'; import '~/styles/style.scss'; +import PlausibleProvider from 'next-plausible'; + import { Providers } from './Providers'; export const metadata = { @@ -25,6 +27,14 @@ export const metadata = { export default function Layout({ children }: PropsWithChildren) { return ( + + +
diff --git a/apps/landing/vercel.json b/apps/landing/vercel.json deleted file mode 100644 index f8b9712ee..000000000 --- a/apps/landing/vercel.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "rewrites": [ - { - "source": "/stats/js/script.js", - "destination": "https://plausible.io/js/script.tagged-events.outbound-links.js" - }, - { - "source": "/stats/api/event", - "destination": "https://plausible.io/api/event" - } - ] -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b9a0f323e..529fc61dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -193,6 +193,9 @@ importers: next-contentlayer: specifier: ^0.3.4 version: 0.3.4(contentlayer@0.3.4)(esbuild@0.19.5)(next@13.5.6)(react-dom@18.2.0)(react@18.2.0) + next-plausible: + specifier: ^3.11.2 + version: 3.11.2(next@13.5.6)(react-dom@18.2.0)(react@18.2.0) react: specifier: 18.2.0 version: 18.2.0 @@ -4142,7 +4145,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.2.2) typescript: 5.2.2 - vite: 4.5.0(less@4.2.0) + vite: 4.5.0(@types/node@18.17.19) /@jridgewell/gen-mapping@0.3.3: resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} @@ -7209,7 +7212,7 @@ packages: magic-string: 0.30.5 rollup: 3.29.4 typescript: 5.2.2 - vite: 4.5.0(less@4.2.0) + vite: 4.5.0(@types/node@18.17.19) transitivePeerDependencies: - encoding - supports-color @@ -7562,7 +7565,7 @@ packages: react: 18.2.0 react-docgen: 6.0.4 react-dom: 18.2.0(react@18.2.0) - vite: 4.5.0(less@4.2.0) + vite: 4.5.0(@types/node@18.17.19) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -8643,7 +8646,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2) magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 4.5.0(less@4.2.0) + vite: 4.5.0(@types/node@18.17.19) transitivePeerDependencies: - supports-color @@ -15962,6 +15965,18 @@ packages: - supports-color dev: false + /next-plausible@3.11.2(next@13.5.6)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-T/5RPVYFRk4HODvcnpMPk6pe4HYHQHSwJFGUbAdyKIJWgs4jl3oq3S16D6xKSKP3AEjIwQe4YsotQrDN2ILbjA==} + 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 + dependencies: + next: 13.5.6(@babel/core@7.23.2)(@opentelemetry/api@1.6.0)(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /next@13.5.6(@babel/core@7.23.2)(@opentelemetry/api@1.6.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==} engines: {node: '>=16.14.0'} @@ -20776,7 +20791,6 @@ packages: rollup: 3.29.4 optionalDependencies: fsevents: 2.3.3 - dev: true /vite@4.5.0(less@4.2.0): resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==} @@ -20812,6 +20826,7 @@ packages: rollup: 3.29.4 optionalDependencies: fsevents: 2.3.3 + dev: true /vite@4.5.0(sass@1.69.4): resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}