Gatsby.jsでh2タグの前にアドセンス広告を置く方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Gatsby.jsでh2タグの前にアドセンス広告を置く方法についてまとめました
順を追って記事を書きますが、すでにアドセンスが使えている人は目次で飛んでください。
アドセンス広告を導入する方法
申請時のサイトの紐付け方法
方法は３つありますが、Gatsby.js では ads.txt を使ったやり方が一番簡単だと思います。
- Google の管理画面で ads.txt を選び、コードをコピーします。
static/ads.txtというファイルを作成し、貼り付け
以上完了したら本番環境を更新すれば OK です。
ちなみに以下のようなコードを貼り付けることになります。
google.com, pub-**********, DIRECT, f08c47fec1234556react-adsense を使う
パッケージを使わせていただき、コンポーネントを作成します。
npm i react-adsensesrc/components/Adsense.js
import AdSense from "react-adsense"
import React from "react"
const Adsense = () => (
<AdSense.Google
client="ca-pub-*************"
slot="12345678901"
style={{ display: "block", marginBottom: "36px" }}
format="fluid"
responsive="true"
layoutKey="-gw-1+2a-9x+5c"
/>
)
export default Adsenseclient には、ca-pub から始まる「パブリッシャー ID」を入力
slot には、AdSense の広告ユニットごとに付与される slot の数字を入力します。
既存のユニットの名前の下の数字や、コードを取得で表示されるdata-ad-slot="**********"の数字です。
あとはこのコンポーネントを呼び出せば広告を表示できます。
H2 タグの前に広告を表示する方法
MDX ファイルの場合
自分は MDX で記事を書いているので、@mdx-js/reactというパッケージを使います。
MDXProvider というコンポーネントを使うことで、タグを置き換えることができます。
今回は<h2></h2>タグを<Adsense/><h2></h2>にするだけです。
ブログの MDX を呼び出している template ページで
src/templates/blog-post.js
import { MDXProvider } from "@mdx-js/react"
import Adsense from "../../components/Adsense"
//略
const H2 = ({ children }) => {
return (
<>
<Adsense />
<h2>{children}</h2>
</>
)
}
const components = {
h2: H2,
}
const BlogPostTemplate = ({ data, children }) => {
return (
//HTMLタグ省略
<div>
<MDXProvider components={components}>{children}</MDXProvider>
</div>
)
}
//GraphQL省略MD ファイルの場合
renderAstを使うとほとんど同じような書き方でできます。
Gatsby で Markdown 内で独自コンポーネントを作成して使用する
$ npm install gatsby-remark-component rehype-reactgatsby.config.js
plugins: [
//省略
`gatsby-remark-component`, //追加
],あとはほ とんど同じですが、MDX と MD では地味に出力結果が違うのでこんな感じになります。
import RehypeReact from "rehype-react"
import Adsense from "../../components/Adsense"
const H2 = children => {
return (
<>
<Adsense />
<h2>{children}</h2>
</>
)
}
const renderAst = new rehypeReact({
createElement: React.createElement,
components: {
h2: H2,
},
}).Compiler
const BlogPostTemplate = ({ data }) => {
return (
//HTMLタグ省略
<div>{renderAst(data.markdownRemark.htmlAst)}</div>
)
}
//GraphQL
export const query = graphql`
query PageBySlug($id: String!) {
markdownRemark(id: { eq: $id }) {
htmlAst //これを追加
//省略
}
}
`GraphQL に htmlAst を追加してください。
これで H2 タグの前に Adsense のタグを入れることができました。
めでたし。
以上、誰かの参考になれば幸いです。
