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

// 🙎‍♂️ Yuji Tsuburaya📆 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 のインストール

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

広告

書いた人

___35d

Yuji Tsuburaya (@___35d

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

広告