web-dev-qa-db-ja.com

GatsbyJSで構築されたWebサイトにAdSenseを追加する方法

Googleアドセンスが提供する<script></script>をどこに追加すればよいか知りたいのですが。

彼らはそれを<head></head>に追加すると言っていますが、ギャツビーでは<head>としてヘルメットを持っています。

スクリプトを<head>タグ付きの{``}タグが配置されているhtml.jsファイル内に追加して<script>タグをエスケープすることも試みましたが、Webサイトの上部にスクリプトが出力されますコンテンツ。

TL; DR：GatsbyJSで構築されたWebサイトにAdSenseを追加する最適な方法は何ですか？

  • react adsenseパッケージ を使用しようとしましたが、Gatsbyでの使用方法がわかりません。
  • <script>タグをhtml.jsに追加しようとしましたが、コンパイルされません。
  • {``}でエスケープすると、ウェブサイトの上にスクリプトがそのまま表示されます。
<head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=Edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
          {`<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>`}
             {` <script>
                  (adsbygoogle = window.adsbygoogle || []).Push({
                    google_ad_client: "ca-pub-1540853335472527",
                    enable_page_level_ads: true
                  });
                </script> 
              `}
        </head>

ソース：html.js

ウェブサイトはGoogleクローラーによって検出されるはずです。

reactjsjsxadsensegatsbyhead
10
Joe Doe

Githubで与えられた答えのおかげで、最後に問題が解決されました：

AdSenseを追加する場合：

  • cp .cache/default-html.js src/html.js
  • スクリプトを追加しますが、内部はすべてエスケープする必要があります-> {<some-js-code-here>}
  • 私の状況では、例として：
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
             <script>
                  {`
                    (adsbygoogle = window.adsbygoogle || []).Push({
                      google_ad_client: "ca-pub-1540853335472527",
                      enable_page_level_ads: true
                    });
                  `}
             </script>
9
Joe Doe

Netlifyなどのサービスを使用してWebサイトを展開している場合は、スニペット挿入機能を使用して、ソースコードに手を加えることなくこれを機能させることができます。

settings -> build & deploy -> post processing -> snippet injection -> add snippet

次に、スニペット（スクリプトタグ）を追加する場所を選択できます。 Adsenseの場合、これは</head>。それが役に立てば幸い。 :)

enter image description here

5
Sankha Karunasekara

AdSenseを設定するには、<script>タグ（テンプレートリテラルなし{``}閉店直前</body>タグをhtml.js、 このような：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body>

次に、広告ユニットを配置するために、 react-adsense あなたが言ったようにnpmで、または自分で構築します。

これは役立つ記事です コンポーネントを使用した広告ユニットの設定と配置の両方をカバーしています。

これで問題が解決するか、不明な点があるかをお知らせください。

1
Robin Métral