+ )
+}
+```
+
+
+
+Refer to the [Tag Manager](https://developers.google.com/tag-platform/tag-manager/datalayer)
+documentation to learn about the different variables and events that can be passed into the
+function.
+
+#### Options
+
+Options to pass to the Google Maps Embed. For a full list of options, read the [Google Map Embed
+docs](https://developers.google.com/maps/documentation/embed/embedding-map).
+
+| Name | Type | Description |
+| --------------- | -------- | ------------------------------------------------------------------------------- |
+| `gtmId` | Required | Your GTM container id. |
+| `dataLayer` | Optional | Data layer array to instantiate the container with. Defaults to an empty array. |
+| `dataLayerName` | Optional | Name of the data layer. Defaults to `dataLayer`. |
+| `auth` | Optional | Value of authentication parameter (`gtm_auth`) for environment snippets. |
+| `preview` | Optional | Value of preview parameter (`gtm_preview`) for environment snippets. |
+
+### Google Maps Embed
+
+The `GoogleMapsEmbed` component can be used to add a [Google Maps
+Embed](https://developers.google.com/maps/documentation/embed/embedding-map) to your page. By
+default, it uses the `loading` attribute to lazy-load the embed below the fold.
+
+
+
+```jsx filename="app/page.js"
+import { GoogleMapsEmbed } from '@next/third-parties/google'
+
+export default function Page() {
+ return (
+
+ )
+}
+```
+
+
+
+
+
+```jsx filename="pages/index.js"
+import { GoogleMapsEmbed } from '@next/third-parties/google'
+
+export default function Page() {
+ return (
+
+ )
+}
+```
+
+
+
+#### Options
+
+Options to pass to the Google Maps Embed. For a full list of options, read the [Google Map Embed
+docs](https://developers.google.com/maps/documentation/embed/embedding-map).
+
+| Name | Type | Description |
+| ----------------- | -------- | --------------------------------------------------------------------------------------------------- |
+| `apiKey` | Required | Your api key. |
+| `mode` | Required | [Map mode](https://developers.google.com/maps/documentation/embed/embedding-map#choosing_map_modes) |
+| `height` | Optional | Height of the embed. Defaults to `auto`. |
+| `width` | Optional | Width of the embed. Defaults to `auto`. |
+| `style` | Optional | Pass styles to the iframe. |
+| `allowfullscreen` | Optional | Property to allow certain map parts to go full screen. |
+| `loading` | Optional | Defaults to lazy. Consider changing if you know your embed will be above-the-fold. |
+| `q` | Optional | Defines map marker location. _This may be required depending on the map mode_. |
+| `center` | Optional | Defines center of the map view. |
+| `zoom` | Optional | Sets initial zoom level of the map. |
+| `maptype` | Optional | Defines type of map tiles to load. |
+| `language` | Optional | Defines the language to use for UI elements and for the display of labels on map tiles. |
+| `region` | Optional | Defines the appropriate borders and labels to display, based on geo-political sensitivities. |
+
+### YouTube Embed
+
+The `YouTubeEmbed` component can be used to load and display a YouTube embed. This component loads
+faster by using [`lite-youtube-embed`](https://github.com/paulirish/lite-youtube-embed) under the
+hood.
+
+
+
+```jsx filename="app/page.js"
+import { YouTubeEmbed } from '@next/third-parties/google'
+
+export default function Page() {
+ return
+}
+```
+
+
+
+
+
+```jsx filename="pages/index.js"
+import { YouTubeEmbed } from '@next/third-parties/google'
+
+export default function Page() {
+ return
+}
+```
+
+
+
+#### Options
+
+| Name | Type | Description |
+| ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `videoid` | Required | YouTube video id. |
+| `width` | Optional | Width of the video container. Defaults to `auto` |
+| `height` | Optional | Height of the video container. Defaults to `auto` |
+| `playlabel` | Optional | A visually hidden label for the play button for accessibility. |
+| `params` | Optional | The video player params defined [here](https://developers.google.com/youtube/player_parameters#Parameters). Params are passed as a query param string. Eg: `params="controls=0&start=10&end=30"` |
+| `style` | Optional | Used to apply styles to the video container. |
diff --git a/docs/03-pages/01-building-your-application/05-optimizing/11-third-party-libraries.mdx b/docs/03-pages/01-building-your-application/05-optimizing/11-third-party-libraries.mdx
new file mode 100644
index 0000000000000..0ca3a1ece15dc
--- /dev/null
+++ b/docs/03-pages/01-building-your-application/05-optimizing/11-third-party-libraries.mdx
@@ -0,0 +1,7 @@
+---
+title: Third Party Libraries
+description: Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
+source: app/building-your-application/optimizing/third-party-libraries
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `Content` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
diff --git a/examples/with-google-tag-manager/.env.local.example b/examples/with-google-tag-manager/.env.local.example
deleted file mode 100644
index 474e6beaa7ecb..0000000000000
--- a/examples/with-google-tag-manager/.env.local.example
+++ /dev/null
@@ -1 +0,0 @@
-NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
\ No newline at end of file
diff --git a/examples/with-google-tag-manager/.gitignore b/examples/with-google-tag-manager/.gitignore
deleted file mode 100644
index fd3dbb571a12a..0000000000000
--- a/examples/with-google-tag-manager/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/examples/with-google-tag-manager/README.md b/examples/with-google-tag-manager/README.md
deleted file mode 100644
index 1541fec9fd06f..0000000000000
--- a/examples/with-google-tag-manager/README.md
+++ /dev/null
@@ -1,35 +0,0 @@
-## Example app using Google Tag Manager
-
-This example shows how to use Next.js along with Google Tag Manager. [`pages/_document.js`](pages/_document.js) is used to inject [base code](https://developers.google.com/tag-manager/quickstart). [`pages/_app.js`](pages/_app.js) is used to track route changes and send page views to Google Tag Manager.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
-
-[](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager&project-name=with-google-tag-manager&repository-name=with-google-tag-manager)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-google-tag-manager with-google-tag-manager-app
-```
-
-```bash
-yarn create next-app --example with-google-tag-manager with-google-tag-manager-app
-```
-
-```bash
-pnpm create next-app --example with-google-tag-manager with-google-tag-manager-app
-```
-
-Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
-
-```bash
-cp .env.local.example .env.local
-```
-
-Set the `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID` variable in `.env.local` to match your Google Tag Manager ID.
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-google-tag-manager/lib/gtm.js b/examples/with-google-tag-manager/lib/gtm.js
deleted file mode 100644
index 299c4aa7b8d8c..0000000000000
--- a/examples/with-google-tag-manager/lib/gtm.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID
-
-export const pageview = (url) => {
- window.dataLayer.push({
- event: 'pageview',
- page: url,
- })
-}
diff --git a/examples/with-google-tag-manager/package.json b/examples/with-google-tag-manager/package.json
deleted file mode 100644
index 65f904f0513c2..0000000000000
--- a/examples/with-google-tag-manager/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "private": true,
- "scripts": {
- "dev": "next dev",
- "build": "next build",
- "start": "next start"
- },
- "dependencies": {
- "next": "latest",
- "react": "^18.2.0",
- "react-dom": "^18.2.0"
- }
-}
diff --git a/examples/with-google-tag-manager/pages/_app.js b/examples/with-google-tag-manager/pages/_app.js
deleted file mode 100644
index 5481c3d3c97ac..0000000000000
--- a/examples/with-google-tag-manager/pages/_app.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useEffect } from 'react'
-import Script from 'next/script'
-import { useRouter } from 'next/router'
-import { GTM_ID, pageview } from '../lib/gtm'
-
-function MyApp({ Component, pageProps }) {
- const router = useRouter()
- useEffect(() => {
- router.events.on('routeChangeComplete', pageview)
- return () => {
- router.events.off('routeChangeComplete', pageview)
- }
- }, [router.events])
-
- return (
- <>
- {/* Google Tag Manager - Global base code */}
-
-
-
- )
-}
-
-export default MyApp
diff --git a/examples/with-google-tag-manager/pages/_document.js b/examples/with-google-tag-manager/pages/_document.js
deleted file mode 100644
index ce25d5678384c..0000000000000
--- a/examples/with-google-tag-manager/pages/_document.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-import { GTM_ID } from '../lib/gtm'
-
-export default function Document() {
- return (
-
-