docusaurus-plugin-google-adsense

This plugin is for Docusaurus v2 and v3.

Installation

yarn add docusaurus-plugin-google-adsense

Usage

Modify docusaurus.config.ts:

import type { Config } from "@docusaurus/types";

const config: Config = {
  plugins: ['docusaurus-plugin-google-adsense'],

  themeConfig: {
    googleAdsense: {
      dataAdClient: 'ca-pub-xxxxxxxxxx',
    },
  },
};

export default config;

Swizzle DocItem/Content

yarn swizzle @docusaurus/theme-classic DocItem/Content --wrap

Modify src/theme/DocItem/Content/index.tsx like this:

import React from "react";
import Content from "@theme-original/DocItem/Content";
import type ContentType from "@theme/DocItem/Content";
import type { WrapperProps } from "@docusaurus/types";

import AdSense from "react-adsense";

type Props = WrapperProps<typeof ContentType>;

export default function ContentWrapper(props: Props): JSX.Element {
  return (
    <>
      <div>
        <AdSense.Google
          client="ca-pub-xxxxxxxxxx"
          slot="yyyyyyyyyy"
          style={{ display: "block" }}
          format="auto"
          responsive="true"
        />
      </div>

      <br />

      <Content {...props} />

      <br />

      <div>
        <AdSense.Google
          client="ca-pub-xxxxxxxxxx"
          slot="yyyyyyyyyy"
          style={{ display: "block" }}
          format="auto"
          responsive="true"
        />
      </div>
    </>
  );
}

Publish

npm login

npm publish