diff --git a/examples/docs/src/pages/themes/docs/google-analytics.mdx b/examples/docs/src/pages/themes/docs/google-analytics.mdx deleted file mode 100644 index c841312c46..0000000000 --- a/examples/docs/src/pages/themes/docs/google-analytics.mdx +++ /dev/null @@ -1,184 +0,0 @@ -import { Steps } from 'nextra/components' - -# Google Analytics - -This page describes how to configure your Nextra website with Google Analytics (`gtag.js`). - -**Note:** This guide assumes you already have a [Google Analytics measurement id](https://support.google.com/analytics/answer/9304153) for your Nextra site. - -## Configuration - - - -### Create Logic for Sending Pageview and Events to Google Analytics - -Create a `lib/gtag.js` file that exports the following: - -```js filename="lib/gtag.js" -export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID; - -export const pageview = (url) => { - window.gtag("config", GA_TRACKING_ID, { - page_path: url, - }); -}; - -export const event = ({ action, category, label, value }) => { - window.gtag("event", action, { - event_category: category, - event_label: label, - value: value, - }); -}; -``` - -- `GA_TRACKING_ID`: A reference to your environment variable's Google Analytics measurement id. -- [`pageview`](https://developers.google.com/analytics/devguides/collection/gtagjs/pages): A function that sends a pageview to Google Analytics. -- [`event`](https://developers.google.com/analytics/devguides/collection/gtagjs/events): A function that sends events to Google Analytics. - - -### Create a Custom App - -Add a custom App (`_app.mdx`) to the `pages` directory of your project. - -### Send Pageview to Google Analytics - -Import the `lib/gtag.js` file. And use the `pageview` function to send pageviews to Google Analytics whenever users navigate to a new page. - -```jsx filename="pages/_app.mdx" -import { useEffect } from "react"; -import { useRouter } from "next/router"; -import * as gtag from "../lib/gtag"; - -export default function App({ Component, pageProps }) { - const router = useRouter(); - useEffect(() => { - const handleRouteChange = (url) => { - gtag.pageview(url); - }; - router.events.on("routeChangeComplete", handleRouteChange); - return () => { - router.events.off("routeChangeComplete", handleRouteChange); - }; - }, [router.events]); - -return ( -<> - - -); } -``` - -### Add Google Tag to your website's `` - -Use [`next/head`](https://nextjs.org/docs/pages/api-reference/components/head) to add Google Tag to your website's `` as shown below: - -```jsx filename="pages/_app.mdx" {1,20-34} -import Head from "next/head"; -import { useEffect } from "react"; -import { useRouter } from "next/router"; -import * as gtag from "../lib/gtag"; - -export default function App({ Component, pageProps }) { - const router = useRouter(); - useEffect(() => { - const handleRouteChange = (url) => { - gtag.pageview(url); - }; - router.events.on("routeChangeComplete", handleRouteChange); - return () => { - router.events.off("routeChangeComplete", handleRouteChange); - }; - }, [router.events]); - -return ( -<> - -