// 📆 April 12, 2020🔖 Notion BlogNotion
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'
/>
以上の簡単な3ステップで、広告を貼ることができます。不明点等あれば、Twitter アカウント(@___35d)までお気軽にご連絡くださいませ。
https://github.com/hustcc/react-adsense
🦥(筆者が喜びます)