From 717f9b5da0e6d148f6aa8896138720bdf5d2f33a Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 24 Oct 2023 10:35:15 -0400 Subject: [PATCH 001/419] Remove unsupported ga-lite and update existing calls to GA4 (#6366) * Cleanup old ga-lite tag and refactor GA4 * cleanup * cleanup2 --- .env.production | 2 +- package.json | 1 - src/components/Layout/Feedback.tsx | 15 ++++++--------- src/pages/_app.tsx | 17 +++++++++-------- src/pages/_document.tsx | 4 ++-- src/siteConfig.js | 1 - yarn.lock | 5 ----- 7 files changed, 18 insertions(+), 27 deletions(-) diff --git a/.env.production b/.env.production index d25eb7dd4..e403f96b6 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4' \ No newline at end of file +NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT' \ No newline at end of file diff --git a/package.json b/package.json index 472ef79c9..b5e07d70a 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "classnames": "^2.2.6", "date-fns": "^2.16.1", "debounce": "^1.2.1", - "ga-lite": "^2.1.4", "github-slugger": "^1.3.0", "next": "^13.4.1", "next-remote-watch": "^1.0.0", diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index 2bf9afe57..86fc91350 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -4,7 +4,6 @@ import {useState} from 'react'; import {useRouter} from 'next/router'; -import {ga} from '../../utils/analytics'; export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { const {asPath} = useRouter(); @@ -48,14 +47,12 @@ const thumbsDownIcon = ( function sendGAEvent(isPositive: boolean) { // Fragile. Don't change unless you've tested the network payload // and verified that the right events actually show up in GA. - ga( - 'send', - 'event', - 'button', - 'feedback', - window.location.pathname, - isPositive ? '1' : '0' - ); + // @ts-ignore + gtag('event', 'feedback', { + event_category: 'button', + event_label: window.location.pathname, + value: isPositive ? 1 : 0, + }); } function SendFeedback({onSubmit}: {onSubmit: () => void}) { diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 717375968..5431f87cc 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,7 +5,6 @@ import {useEffect} from 'react'; import {AppProps} from 'next/app'; import {useRouter} from 'next/router'; -import {ga} from '../utils/analytics'; import '@docsearch/css'; import '../styles/algolia.css'; @@ -13,13 +12,13 @@ import '../styles/index.css'; import '../styles/sandpack.css'; if (typeof window !== 'undefined') { - if (process.env.NODE_ENV === 'production') { - ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto'); - ga('send', 'pageview'); - } const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload'; window.addEventListener(terminationEvent, function () { - ga('send', 'timing', 'JS Dependencies', 'unload'); + // @ts-ignore + gtag('event', 'timing', { + event_label: 'JS Dependencies', + event: 'unload', + }); }); } @@ -44,8 +43,10 @@ export default function MyApp({Component, pageProps}: AppProps) { useEffect(() => { const handleRouteChange = (url: string) => { const cleanedUrl = url.split(/[\?\#]/)[0]; - ga('set', 'page', cleanedUrl); - ga('send', 'pageview'); + // @ts-ignore + gtag('event', 'pageview', { + event_label: cleanedUrl, + }); }; router.events.on('routeChangeComplete', handleRouteChange); return () => { diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index d8fb0c621..823ca0b71 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -11,11 +11,11 @@ const MyDocument = () => { +``` + + + + + +--- + +## Reference {/*reference*/} + +### ` + + ); +} + +export default function Page() { + return ( + +

My Website

+ +

Welcome

+ + ); +} +``` + + \ No newline at end of file diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md new file mode 100644 index 000000000..f5cf231a6 --- /dev/null +++ b/src/content/reference/react-dom/components/style.md @@ -0,0 +1,106 @@ +--- +style: " +``` + + + + + +--- + +## Reference {/*reference*/} + +### ` +``` + +[See more examples below.](#usage) + +#### Props {/*props*/} + +` + + … + + + ); +} + +export default function App() { + return ( + + + + ); +} +``` + + diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md new file mode 100644 index 000000000..9d6ed18cc --- /dev/null +++ b/src/content/reference/react-dom/components/title.md @@ -0,0 +1,98 @@ +--- +title: "" +canary: true +--- + +<Canary> + +React's extensions to `<title>` are currently only available in React's canary and experimental channels. In stable releases of React `<title>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). + +</Canary> + + +<Intro> + +The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you specify the title of the document. + +```js +<title>My Blog +``` + + + + + +--- + +## Reference {/*reference*/} + +### `` {/*title*/} + +To specify the title of the document, render the [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). You can render `<title>` from any component and React will always place the corresponding DOM element in the document head. + +```js +<title>My Blog +``` + +[See more examples below.](#usage) + +#### Props {/*props*/} + +`` supports all [common element props.](/reference/react-dom/components/common#props) + +* `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text. + +#### Special rendering behavior {/*special-rendering-behavior*/} + +React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself. + +There are two exception to this: +* If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title). +* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page. + +<Pitfall> + +Only render a single `<title>` at a time. If more than one component renders a `<title>` tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined. + +</Pitfall> + +--- + +## Usage {/*usage*/} + +### Set the document title {/*set-the-document-title*/} + +Render the `<title>` component from any component with text as its children. React will put a `<title>` DOM node in the document `<head>`. + +<SandpackWithHTMLOutput> + +```js App.js active +import ShowRenderedHTML from './ShowRenderedHTML.js'; + +export default function ContactUsPage() { + return ( + <ShowRenderedHTML> + <title>My Site: Contact Us +

Contact Us

+

Email us at support@example.com

+ + ); +} +``` + + + +### Use variables in the title {/*use-variables-in-the-title*/} + +The children of the `` component must be a single string of text. (Or a single number or a single object with a `toString` method.) It might not be obvious, but using JSX curly braces like this: + +```js +<title>Results page {pageNumber} // 🔴 Problem: This is not a single string +``` + +... actually causes the `` component to get a two-element array as its children (the string `"Results page"` and the value of `pageNumber`). This will cause an error. Instead, use string interpolation to pass `<title>` a single string: + +```js +<title>{`Results page ${pageNumber}`} +``` + diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 315ea3e0b..08e0132af 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -218,6 +218,31 @@ { "title": "