0件ヒットしました
    2020-11-11

    Gatsby - MarkdownページにAdSenseを挿入する方法

    以前にGatsbyサイトにGoogle AdSenseを導入する方法をご紹介しました。
    その方法では広告を表示したい場所にAdSense用のReactコンポーネントを配置する必要があるため、Markdownでコンテンツを作っている場合はページの途中に広告を表示することができませんでした。
    そこで、今回はMarkdownで作成したページの途中にAdSenseを挿入する方法を説明します。

    アプローチ

    rehype-reactを用いることで、Markdownファイル中の特定のhtmlタグをビルド時にAdSense用コンポーネントで置換します。

    <!-- Markdownファイル.md -->
    
    ## 1日目
    今日はいい天気ですね。〜〜〜〜。
    
    <adsense></adsense>  <!-- このadsenseタグがAdSense用コンポーネントで置換される -->
    
    ## 2日目
    こんばんは、〇〇です。...........。

    1. 準備

    Google AdSenseスクリプトの挿入およびAdSense用コンポーネントの準備はできているものとします。
    未済の場合は前回記事を参照してください。

    2. react-hypeのインストール

    rehype-reactをインストールします。

    $ yarn add rehype-react
    # or
    $ npm install rehype-react

    3. Markdownページテンプレートにrehype-reactを導入用する

    Markdownページのテンプレートを編集していきます。
    今回はGatsbyの公式が提供しているMarkdownページテンプレートsrc/templates/blogTemplate.jsを使用して説明します。

    rehypeインスタンスの作成

    rehype-reactとAdSense用コンポーネントをインポートして、rehypeインスタンス(下記ではrenderAst)を作成する。

    // src/templates/blogTemplate.js
    
    import rehypeReact from 'rehype-react'
    import { AdSense } from '../components/adsense/adsense';
    
    const renderAst = new rehypeReact({
      createElement: React.createElement,
      components: {
        'adsense': AdSense, // この設定により、adsenseタグがAdSenseコンポーネントに置換される
      },
    }).Compiler;
    
    // 以下省略

    graphqlでhtmlAstをクエリする

    rehypeインスタンスはhtmlAstを変換してhtmlを生成するため、graphqlでhtmAstをクエリする。

    // src/templates/blogTemplate.js
    
    // 省略
    
    export const pageQuery = graphql`
      query($slug: String!) {
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
          html
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            slug
            title
          }
          htmlAst  // これを追加する
        }
      }
    `

    dangerouslySetInnerHTMLをrehypeインスタンスで置き換える

    テンプレートではMarkdownコンテンツを挿入する部分が<div dangerouslySetInnerHTML={{ __html: html }}/>のようになっているが、ここをrehypeインスタンスで置換してhtmlAstを描画させる。

    // src/templates/blogTemplate.js
    
    // 省略
    
    export default function Template({
      data,
    }) {
      const { markdownRemark } = data
      const { frontmatter, htmlAst } = markdownRemark  // htmlAstを使用する
      return (
        <div className="blog-post-container">
          <div className="blog-post">
            <h1>{frontmatter.title}</h1>
            <h2>{frontmatter.date}</h2>
            {/* <div
              className="blog-post-content"
              dangerouslySetInnerHTML={{ __html: html }}
            /> */}
            <div>{renderAst(post.htmlAst)}</div> {/* renderAstに置き換える。引数にhtmlAstを渡す。 */}
          </div>
        </div>
      )
    }
    
    // 省略

    4. Markdownページの広告を表示したい場所に<adsense>タグを挿入する

    あとはMarkdownページのお好みの場所に<adsense></adsense>を挿入すれば良い。
    自己終了タグ(<adsense/>)では正しく動作しないため注意。

    <!-- Markdownファイル.md -->
    
    ## 1日目
    今日はいい天気ですね。〜〜〜〜。
    
    <adsense></adsense>  <!-- このadsenseタグがAdSense用コンポーネントで置換される -->
    
    ## 2日目
    こんばんは、〇〇です。...........。

    以上です。

    参考

    emoji-link AdSense in Gatsby