#rspress-plugin-third-parties

Source Code

This plugin provides components for YouTube, Twitter/X, and Google Maps, integrations for Google Analytics and Google Tag Manager, and a Script component for controlling when scripts load.

#Installation

npm add rspress-plugin-third-parties -D

yarn add rspress-plugin-third-parties -D

pnpm add rspress-plugin-third-parties -D

bun add rspress-plugin-third-parties -D

deno add npm:rspress-plugin-third-parties -D

#Global analytics

To add Google Analytics to all pages, register the plugin in rspress.config.ts and replace G-XXXXXXXXXX with your GA4 measurement ID:

import { defineConfig } from '@rspress/core';
import { pluginThirdParties } from 'rspress-plugin-third-parties/plugin';

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

For client-side navigation tracking, configure GA4 single-page application measurement.

#Components

Import components into an MDX page or custom theme. The YouTube and Tweet examples below include live previews alongside their source code.

#<YouTubeEmbed />

Shows a video thumbnail and loads the YouTube player when you click play.

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 />

Embeds a Twitter/X post and follows the site's light or dark theme.

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

<TweetEmbed id="2017178323550605790" />

#<GoogleMapsEmbed />

Embeds a Google Map. Replace the placeholder with your Google Maps Embed API key to use this example.

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

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

#<Script />

Loads external or inline scripts and deduplicates external script loads across page transitions. The default strategy is afterInteractive; use lazyOnload to wait until the page has loaded and the browser is idle.

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

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

#<GoogleTagManager />

Add Google Tag Manager to your custom theme layout.

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

<GoogleTagManager gtmId="GTM-XXXXXXX" />

#<GoogleAnalytics />

Add GA4 to your custom theme layout. Skip this component if you already registered the same measurement ID with the global plugin.

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

<GoogleAnalytics gaId="G-XXXXXXXXXX" />

After configuring Google Analytics, use sendGAEvent in an event handler to send custom events:

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

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