【更新版】Gatsby+NetlifyサイトへGoogle AdSenseを貼るベストプラクティス。(2020年2月8日時点)
10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順
こんにちは、筋肉めがねです。
以前に、以下の記事でGoogle AdSenseの導入方法について書きました。
しかし、広告が表示されたり、表示されなかったりと、なかなか挙動が安定しておりませんでした。それで、諦めずに解決策を探しておりましたら、ようやくこれだ、というものが見つかり、そして早速導入したところ、広告が安定して表示されるようになりましたので、ぜひシェアさせていただきます。
今回も技術的なお話ですが、おそらく、GatsbyサイトにGoogle AdSenseを貼りたい、という方には参考になるかと思います。
そして、今回の導入にあたり、参考にさせていただいた記事はこちらです。
AdSense in Gatsby
以下、本日の目次です。
GatsybyブログにGoogle Adsenseを貼るベストプラクティス
必要なpluginのインストール
まずは、必要なpluginをインストールします。
npm install react-adsense rehype-react gatsby-transformer-remarkそして、gatsby-config.jsファイルで、gatsby-transformer-remarkが設定されている事を確認しましょう。
{
resolve: 'gatsby-transformer-remark',
options: {
...pluginの設定はこれでオッケーです。
AdSense用のComponentの作成
続いて、Google AdSenseを埋め込むComponentを作る必要がありますが、これは、前回Google AdSenseを導入した際に作りましたので、それを活用していきましょう。
import React from 'react';
import AdSense from 'react-adsense';
const Adsense = () => (
<ins className="AdInSiderbar">
<AdSense.Google
client='xxx'
slot='xxx'
style={{ display:'block' }}
format ='auto'
responsive='true'
layoutKey='-gw-1+2a-9x+5c'
/>
</ins>
);
export default Adsense;rehype-reactの設定
ここが大事なところです。
rehype-reactは、Reactで作ったComponentをMarkdownファイル内で使用する事を可能にしてくれます。つまり、例えばGoogle AdSenseのComponentを各記事のMarkdownファイル内に埋め込む事ができる、という訳です。
各記事の詳細なテンプレートを定義しているPostTemplateDetailsで、rehype-reactをimportします。また、Adsenseを/src/components/GoogleAdSenseからimportします。
また、rehypeReactという新しいインスタンスを設定し、renderAstというConstantへassignします。これで、markdownファイル内でadsenseタグを使用する事で、Adsense componentを使用できるようになります。
import React from 'react'
import { Link } from 'gatsby'
...
import rehypeReact from 'rehype-react'
import Adsense from '../GoogleAdsense';
const renderAst = new rehypeReact({
createElement: React.createElement,
components: {
'adsense': Adsense,
},
}).Compiler;graphqlの変更
最後にもう一つ、graphqlに変更を加えます。
このサイトで使用しているテンプレートである”gatsby-v2-starter-lumen”では、PostTemplateDetailsのcomponentで使われている幾つかの変数が他のjsxファイルで定義されています。それが、/src/templates/post-template.jsxです。
そこで、/src/templates/post-template.jsxのgraphqlに一つ変更を加えます。
markdownRemark内で定義されているhtmlをhtmlAstに変更します。
markdownRemark(fields: { slug: { eq: $slug } }) {
id
htmlAst //htmlをhtmlAstに変更します。
fields {
tagSlugs
slug
}
frontmatter {
title
featuredImage {
childImageSharp {
sizes(maxWidth: 630) {
...GatsbyImageSharpSizes
}
}
...そして、PostTemplateDetailsのcomponentに戻り、htmlを使用していた箇所をhtmlAstに置き換えてあげれば完了です。
class PostTemplateDetails extends React.Component {
render() {
const { author } = this.props.data.site.siteMetadata
const post = this.props.data.markdownRemark
const htmlAst = post.htmlAst //htmlAstをpost-template.jsxからimportします。
...
<div className="post-single">
{homeBlock}
<div className="post-single__inner">
<h1 className="post-single__title">{post.frontmatter.title}</h1>
<div className="post-single__date">
{ moment(post.frontmatter.date).format('YYYY年M月DD日')}
</div>
<div className="post-single__body">{renderAst(htmlAst)}</div> {/* htmlではなく、htmlAstを使うように変更します。 */}
...以上で、設定は終わりです。
これで、各記事のmarkdownファイルの中で、広告を表示したい位置にadsenseタグを埋め込めば、広告が表示されます。
adsenseタグの中に”</”がありますが、このままで問題ありません。
---
title: 【更新版】Gatsby+NetlifyサイトへGoogle AdSenseを貼るベストプラクティス。
...
<adsense></<adsense>
### 必要なpluginのインストール
....1つ、注意点は、gatsbyの開発環境（gatsby develop）では広告は表示されないので、設定が正しく行われているか確認する際には、gatsby buildを実行し、そしてgit pushしましょう。
それでも広告が表示されない時は
ここまでの設定をして広告が表示されない場合、以下2つの事が考えられます。
- Markdownファイル内のGoogle Adのコンポーネントが認識されるまでに時間がかかる。
- ネットワークに問題がある。
Google Adのコンポーネントが認識されるまで、時間がかからないとも限りません。これは、根気強く1日は待ってみましょう。
そして、もう一つ。
例えばwifi環境で作業をしている場合、環境によっては、google adをすぐには認識しない事があります。この場合は、場所を変えて違うネットワークを使うなど、異なるネットワーク環境下で、もう一度広告の表示を確認しましょう。
まとめ
いかがでしたでしょうか。ReactベースのGatsbyでGoogle Adsenseを表示するにあたり、ネットには様々な方法がシェアされておりますが、今回の記事で書いた内容が、2020年2月8日時点での僕が思うベストプラクティスです。
それでは、本日は以上です。