35D BLOG

Notion Blog (Next.js) に Google Adsense を導入する

// 🙎‍♂️ Yuji Tsuburaya📆 April 12, 2020🔖 Notion Blog Notion

Notion Blog (Next.js) の記事下に、Google Adsense を表示するようにしました。少しハマりながらもなんとかできたので、実現方法を書いておきたいと思います。

スクリプトタグの埋め込み

_document.tsx というファイルに、スクリプトタグを埋め込みます。なければ、以下を参考に、新規作成してください。Google Adsense のコード生成ツールでは、広告を埋め込む場所ごとにこのスクリプトタグが書かれていますが、このタグはレンダリング時に一度だけ呼ばれれば良いので、Head 内に配置することにしました。

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { GA_TRACKING_ID } from '../lib/gtag'
class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja">
        <Head>
          <script data-ad-client="<YOUR CLIENT ID>" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

ライブラリを使って、広告を埋め込みます。以下のコマンドで、 react-adsense というライブラリをインストールしてください。

$ yarn add react-adsense

ライブラリを使って、広告用のコンポーネントを配置する

あとは、使用したい位置で、以下のようにライブラリを呼び出せばOKです。

import React from 'react';
import AdSense from 'react-adsense';

// ads with no set-up
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
/>