docs: Create google analytics doc #2137
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@oluwatobiss is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
| @@ -0,0 +1,65 @@ | |||
| import { Steps } from 'nextra/components' | |||
There was a problem hiding this comment.
This is just example package, you can completely remove this page
| @@ -0,0 +1,65 @@ | |||
| import { Steps } from 'nextra/components' | |||
There was a problem hiding this comment.
This doc related not only to docs theme, but to any theme
There was a problem hiding this comment.
So, would moving it under "Guide" be better?
There was a problem hiding this comment.
Under guide -> advanced
|
|
||
| Use [`next/script`](https://nextjs.org/docs/pages/building-your-application/optimizing/scripts) to add your Google Analytics tracking code to the custom App (`pages/_app.mdx`) as follows: | ||
|
|
||
| ```jsx filename="pages/_app.mdx" |
There was a problem hiding this comment.
Seems your example will not fire when the page is changed with client-side rendering, here is official example https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
There was a problem hiding this comment.
I've updated the doc with examples that now work with client-side rendering.
|
All done. |
inline analytics code to website's head This update resolves the "Do not add <script> tags using next/head" error browsers throw. Closes shuding#2128
| ```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 | ||
| }) | ||
| } | ||
| ``` |
There was a problem hiding this comment.
personally would recommend this being ts since the rest of the project is
| ```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 | |
| }) | |
| } | |
| ``` | |
| ```js filename="lib/gtag.ts" | |
| export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID | |
| export const pageview = (url: string) => { | |
| window.gtag('config', GA_TRACKING_ID, { | |
| page_path: url | |
| }) | |
| } | |
| type EventParams = { | |
| event_category: string; | |
| event_label?: string; | |
| value?: number; | |
| } | |
| export const event = ({ action, params }: { action: string; params: EventParams }) => { | |
| window.gtag("event", action, params); | |
| }; |
|
|
||
| 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" |
There was a problem hiding this comment.
this can be _app.tx
| ```jsx filename="pages/_app.mdx" | |
| ```jsx filename="pages/_app.tsx" |
|
|
||
| Use [`next/script`](https://nextjs.org/docs/pages/building-your-application/optimizing/scripts) and the [`afterInteractive` script loading strategy](https://nextjs.org/docs/pages/api-reference/components/script#afterinteractive) to add the external Google tag code to your website: | ||
|
|
||
| ```jsx filename="pages/_app.mdx" {2,30-33} |
There was a problem hiding this comment.
| ```jsx filename="pages/_app.mdx" {2,30-33} | |
| ```jsx filename="pages/_app.tsx" {2,30-33} |
|
|
||
| Use [`next/script`](https://nextjs.org/docs/pages/building-your-application/optimizing/scripts) and the [`beforeInteractive` script loading strategy](https://nextjs.org/docs/pages/api-reference/components/script#beforeinteractive) to add the inline Google Tag code to your website's `<head>`: | ||
|
|
||
| ```jsx filename="pages/_app.mdx" {2,20-29} |
There was a problem hiding this comment.
| ```jsx filename="pages/_app.mdx" {2,20-29} | |
| ```jsx filename="pages/_app.tsx" {2,20-29} |
|
|
||
| ### Create Logic for Sending Pageview and Events to Google Analytics | ||
|
|
||
| Create a `lib/gtag.js` file that exports the following: |
There was a problem hiding this comment.
| Create a `lib/gtag.js` file that exports the following: | |
| Add [@types/gtag.js](https://www.npmjs.com/package/@types/gtag.js) | |
| Create a `lib/gtag.ts` file that exports the following: |
Thank you, @basedMcghee, for your helpful suggestions. Having TypeScript examples makes sense. However, we don't need to replace the JavaScript. Instead, we can document the two options so that users who do not wish to use TypeScript can still follow along with the JavaScript examples. |
|
I've tried these changes and get a syntax error: |
|
This guide is specifically designed to work with Vercel, but it doesn't work under different conditions. |
|
closing since what works with Next.js - works with Nextra, so just follow Next.js Google Analytics examples for Pages router |
Motivation
This PR creates a Google Analytics doc showing how to add Google's Global Site Tag (
gtag.js) to a Nextra website.Issue
Closes #2128