質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.05%

Reactでadsenseコードを代入しようした時にページが表示されない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 449

eng___

score 5

gatsbyjs(静的サイトジェネレーター)を利用して、ブログを作りましたが、①記事が表示されない、②Google adsenseを挿入しようと思うとエラーが発生する問題が起き、ご助言いただきたくお願いします。

やりたいこと

マークダウンファイル(記事)をにadsenseコードを代入した後(コード内のinsertAdsense)、componentDIdMountでadsbygoogleをpushし、記事内にアドセンス広告を表示したい

エラー内容

下記の3通りの出来事が起きており、
①問題なく記事内に広告が設置される
②記事タイトル等は表示されるが、記事コンテンツが表示されない
③記事が表示されず、画面が真っ白になる

②、③のエラー時には、「"adsbygoogle.push() error: All ins elements in the DOM with class=adsbygoogle already have ads in them."」というエラーが表示されます。

②、③が起きた場合でも、リロードすればきちんと表示されるので、コード実行の順番などが原因ではないかと思っています。(おそらく、dangerouslySetInnerHTMLで記事コンテンツが完全にセットされる前に、componentDidMountが起きているから②・③が起きているのか?とも思っておりますが、うまく行かず、、、)

問題が起きているサイト

https://englissu.com

コード(抜粋)

post.js側で、
記事コンテンツを取得(post)
⇨ insertAdsenseでマークダウンファイルのコンテンツ内にアドセンスコードを挿入
⇨ componentDidMountでadsbygoogleをpush
という大きな流れです。

post.js

import AdsenseRectangle from "../components/InsertAdsense"
import { insertAdsense } from "../components/InsertAdsense"



class BlogPostTemplate extends React.Component {
  constructor(props) {
    super(props)
    const post = this.props.data.markdownRemark
    const slug = this.props.pageContext
    const { temp1, numberOfAds } = insertAdsense(post.html, slug)
    this.state = { numberOfAdsense: numberOfAds }
  }

  componentDidMount() {
    if (window)
      for (let i = 0; i < this.state.numberOfAdsense + 1; i++) {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
      }
  }

  render() {
    const post = this.props.data.markdownRemark

    const siteTitle = this.props.data.site.siteMetadata.title
    const { relatedPosts, slug } = this.props.pageContext

    const { post2, temp2 } = insertAdsense(post.html, slug)

    const { title, description, date, category, tags } = post.frontmatter

    const sizes = post.frontmatter.featuredImage
      ? post.frontmatter.featuredImage.childImageSharp.sizes
      : 0

    const { categories } = this.props.data.site.siteMetadata
    const categoryObject = categories.find(cat => {
      return cat.slug === category
    })
    const categoryColor = categoryObject ? categoryObject.color : "#555"

    return (
      <Layout location={this.props.location} title={siteTitle} pageAd={"true"}>
        <SEO title={title} description={description || post.excerpt} />
        <Helmet>
          <link
            rel="canonical"
            href={`https://englissu.com${this.props.location.pathname}`}
          />
        </Helmet>
        <PostJsonLd
          title={title}
          description={description || post.excerpt}
          date={date}
          url={this.props.location.href}
          categorySlug={category}
        />
        <Content>
          <ContentMain>
            <PostTitle>{title}</PostTitle>
            <Labels>
              <CategoryLabel slug={category} isLink="true" />
              {tags.map(({ tag }, index) => {
                return <TagLabel key={index} slug={tags[index]} isLink="true" />
              })}
            </Labels>
            <PostDate>{date}</PostDate>

            <FeaturedImage sizes={sizes} className="featured-image" />
            <PostContent
              categoryColor={categoryColor}
              categorySlug={category}
              dangerouslySetInnerHTML={{ __html: post2 }}

            <FollowBudge />
            <ShareButtons slug={slug} title={title} />
          </ContentMain>

          <AdsenseRectangle slug={slug} />

          <aside>
            <RelatedPosts posts={relatedPosts} />
          </aside>
        </Content>
      </Layout>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query blogPostBySlug($slug: String!) {
          site {
          siteMetadata {
          title
        author
        categories {
          name
          slug
        color
      }
    }
  }

    markdownRemark(fields: {slug: {eq: $slug } }) {
          id
      excerpt(pruneLength: 160)
        html
      frontmatter {
          title
        description
        date(formatString: "YYYY.MM.DD")
        category
        tags
        featuredImage {
          childImageSharp {
          sizes(maxWidth: 630) {
          ...GatsbyImageSharpSizes
        }
        }
      }
    }
  }
}
`

insertAdsense.js

import React from 'react';

class Adsense extends React.Component {
  render() {
    return <div>{this.props.component}</div>;
  }
}

const Rectangle = (props) => {
  return (
    <ins
      className="adsbygoogle"
      style={{ display: 'block' }}
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true"
      key={'5-' + props.slug}
    />
  );
};

const AdsenseRectangle = (props) =>
  <Adsense
    component={<Rectangle slug={props.slug} />}
  />

export default AdsenseRectangle

const parser = typeof DOMParser !== "undefined" && new DOMParser()

export const insertAdsense = (html, slug) => {
  if (!parser) return html
  const dom = parser.parseFromString(html, "text/html")
  const eles = [].slice.call(dom.querySelectorAll(".adsense1, .adsense2, .adsense3, .adsense4"))

  const ad1 = `
    <ins class="adsbygoogle"
      style="display: block;"
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true"
      key={'1-' + ${slug}}
    ></ins>
  `

  const ad2 = `
    <ins class="adsbygoogle"
      style="display: block;"
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true"
      key={'2-' + ${slug}}
    ></ins>
  `

  const ad3 = `
    <ins class="adsbygoogle"
      style="display: block;"
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true"
      key={'3-' + ${slug}}
    ></ins>
  `

  const ad4 = `
    <ins class="adsbygoogle"
      style="display: block;"
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true
      key={'4-' + ${slug}}
    ></ins>
  `

  const ads = [ad1, ad2, ad3, ad4]
  const numberOfAds = eles.length;

  if (eles) {
    eles.map((ele, index) => (ele.innerHTML = ads[index]))
  }

  return { post2: dom.body.innerHTML, numberOfAds: numberOfAds }
}

初心者の汚いコードで大変申し訳ございませんが、お力添えのほどよろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る