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

📆April 12, 2020🔖 Notion Blog Notion

🐈 「（少しマニアックな）Notion の使い方まとめ」という note マガジンでも、毎週1本 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 のインストール

ライブラリを使って、広告を埋め込みます。以下のコマンドで、 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'
/>

以上の簡単な3ステップで、広告を貼ることができます。不明点等あれば、Twitter アカウント（@___35d）までお気軽にご連絡くださいませ。

（参考）

https://github.com/hustcc/react-adsense