> For AI agents: the complete documentation index is available at https://rspress.rs/zh/llms.txt, the full documentation bundle is available at https://rspress.rs/zh/llms-full.txt.

# rspress-plugin-third-parties 

[源码](https://github.com/rstackjs/rspress-plugins/tree/main/packages/rspress-plugin-third-parties)

该插件提供 YouTube、Twitter/X 和 Google 地图嵌入组件，支持接入 Google Analytics 和 Google Tag Manager，并通过 `Script` 组件控制脚本加载时机。

:::note
这是一个由社区维护的集成方案。

- [文档与 Demo](https://sanjaiyan-dev.github.io/rspress-plugin-third-parties/)：由插件作者维护。
- [插件 README](https://github.com/rstackjs/rspress-plugins/tree/main/packages/rspress-plugin-third-parties#readme)：查看完整组件选项。

:::

## 安装 \{#installation}


```sh [npm]
npm add rspress-plugin-third-parties -D
```

```sh [yarn]
yarn add rspress-plugin-third-parties -D
```

```sh [pnpm]
pnpm add rspress-plugin-third-parties -D
```

```sh [bun]
bun add rspress-plugin-third-parties -D
```

```sh [deno]
deno add npm:rspress-plugin-third-parties -D
```

## 全局统计 \{#global-analytics}

在 `rspress.config.ts` 中注册插件，为所有页面添加 Google Analytics。将 `G-XXXXXXXXXX` 替换为你的 GA4 衡量 ID：

```ts title="rspress.config.ts"
import { defineConfig } from '@rspress/core';
import { pluginThirdParties } from 'rspress-plugin-third-parties/plugin';

export default defineConfig({
  plugins: [
    pluginThirdParties({
      googleAnalytics: { gaId: 'G-XXXXXXXXXX' },
    }),
  ],
});
```

如需跟踪客户端路由跳转，请配置 [GA4 单页应用衡量](https://developers.google.com/analytics/devguides/collection/ga4/single-page-applications)。

## 组件 \{#components}

在 MDX 页面或自定义主题中导入组件。下方的 YouTube 和 Tweet 示例提供实时预览及对应代码。

### `<YouTubeEmbed />`


[源码](https://github.com/rstackjs/rspress-plugins/blob/main/packages/rspress-plugin-third-parties/src/components/YouTubeEmbed.tsx)

先显示视频缩略图，点击播放后加载 YouTube 播放器。

```mdx preview
import { YouTubeEmbed } from 'rspress-plugin-third-parties';

<YouTubeEmbed
  videoid="sSbDtQTtwBY"
  playlabel="Digital Tamizh - A Lineage of Logic, A Future of Code (Unreal Engine Showcase)"
/>
```

### `<TweetEmbed />`


[源码](https://github.com/rstackjs/rspress-plugins/blob/main/packages/rspress-plugin-third-parties/src/components/TweetEmbed.tsx)

嵌入 Twitter/X 推文，并跟随站点的亮色或暗色主题。

```mdx preview
import { TweetEmbed } from 'rspress-plugin-third-parties';

<TweetEmbed id="2017178323550605790" />
```

### `<GoogleMapsEmbed />`


[源码](https://github.com/rstackjs/rspress-plugins/blob/main/packages/rspress-plugin-third-parties/src/components/GoogleMapsEmbed.tsx)

嵌入 Google 地图。使用此示例时，请将占位符替换为你的 Google Maps Embed API Key。

```mdx
import { GoogleMapsEmbed } from 'rspress-plugin-third-parties';

<GoogleMapsEmbed
  apiKey="YOUR_GOOGLE_MAPS_API_KEY"
  mode="place"
  q="Point Pedro, Sri Lanka"
  height={400}
/>
```

### `<Script />`


[源码](https://github.com/rstackjs/rspress-plugins/blob/main/packages/rspress-plugin-third-parties/src/components/Script.tsx)

加载外部或内联脚本，并在页面切换时避免重复加载同一外部脚本。默认策略为 `afterInteractive`；使用 `lazyOnload` 可等到页面加载完成且浏览器空闲时再加载。

```mdx
import { Script } from 'rspress-plugin-third-parties';

<Script src="https://example.com/widget.js" strategy="lazyOnload" />
```

### `<GoogleTagManager />`


[源码](https://github.com/rstackjs/rspress-plugins/blob/main/packages/rspress-plugin-third-parties/src/components/GoogleTagManager.tsx)

在自定义主题布局中添加 Google Tag Manager。

```mdx
import { GoogleTagManager } from 'rspress-plugin-third-parties';

<GoogleTagManager gtmId="GTM-XXXXXXX" />
```

### `<GoogleAnalytics />`


[源码](https://github.com/rstackjs/rspress-plugins/blob/main/packages/rspress-plugin-third-parties/src/components/GoogleAnalytics/index.tsx)

在自定义主题布局中添加 GA4。如果已通过全局插件注册同一个衡量 ID，则无需再添加此组件。

```mdx
import { GoogleAnalytics } from 'rspress-plugin-third-parties';

<GoogleAnalytics gaId="G-XXXXXXXXXX" />
```

配置 Google Analytics 后，可以在事件处理函数中使用 `sendGAEvent` 发送自定义事件：

```ts
import { sendGAEvent } from 'rspress-plugin-third-parties';

sendGAEvent('event', 'documentation_feedback', { sentiment: 'yes' });
```