GatsbyのBlogでGoogle AdSenseがうまく表示できないときは
記事にGoogle AdSenseを貼りたいと思いました。
無駄にアドマネージャーを導入してみたのですが、ドキュメントの通りにタグを貼ってもうまくいきませんでした なんとか解決したので、その顛末を書いておきます。
おきたこと
ドキュメントの通りにタグを埋め込んだところ、topから記事に遷移しても広告が表示されず、リロードすると表示される、という現象が出ていました。
原因
chrome dev toolのNetworkタブを見ていると、topを表示したときに広告取得のリクエストが飛んでいました。
広告取得のタグは記事ページに埋めてあるので、タイミングが変です。
これは、topページから記事へのリンクをgatsby-linkで生成していることに原因がありました。
gatsby-linkはprefetchが効いている
gatsby-linkはprefetchといって、リンク先のリソースを先読みする仕組みが効いています。 このprefetchによって、topで広告取得のリクエストが発行され、記事ページ遷移時には広告取得のリクエストが発行されなくなっておりました。
結果、空のdivは出るが広告は取得できていないので表示できない、ということになっていました。
解決策
gatsby-link使うのやめてaタグを使えばいいだけです。
色々調べて、Gatsby Browser APIのdisableCorePrefetcingを見つけて試してみたもののうまくいかず、困り果てていたところ
同じような悩みがGatsbyJSのissueにあがっており、このコメント見て解決しました。ありがとうございます。
はてなblog時代ははてなの設定画面にscriptをベタ貼りするだけだったので、はてなblogの便利さを改めて実感しました。。。
おまけ
gptタグについて色々調べていたら、任意のタイミングで広告を読み込んだり、リフレッシュしたりという方法が用意されていることに気づきました。 Control ad loading and refresh
ちょっと面白そうですね。