ホーム

転職ドラフト(次回12/15)

GatsbyのGoogleAdsenseでCORSエラーが出た

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ React 記事の目次はこちら

GatsbyのGoogleAdsenseでCORSエラーが出たので解決方法を書いていきます。

細かいことはよく分かりませんが、もともとAdsense自体は導入ができていて、記事内に無限に貼っていたんですが、

なぜかサイドバーに広告を貼ってみようとするとエラーが出ることに気がつきました。

なぜ・・・

エラーの内容

Error in function Object.invokeGuardedCallbackDev

A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.

No codeFrame could be generated

目次

  1. 解決方法

解決方法

どうやらGoogleAdsenseは、最低でも250pxのwidthを用意しないとダメらしいです。

なんてこった。

普通にスタイルを与える

  &__home-adsense {
    width: 250px;
    height: 50px;
    margin:0 auto;
  }

表示されました・・・!

まとめ

どうやらメインコンテンツに広告を貼るときは十分なWidthがあったりしたのですが、サイドバーは十分なwidthがなかったようで、エラーになっていたようです。

なかなかレアなパターンなのではないでしょうか?

ちなみに実験したら、display:noneでも同じエラーがでました!

それでは!!!

質問、誤記などあれば Twitter などでご指摘よろしくおねがいします!

人気記事

PHP7.4 + Laravel6 のプロジェクトを AWS EC2 にデプロイする

関連記事

【ReactNative+CloudVision】「怒り顔採点アプリ」を作った