Как добавить Adsense на сайт, созданный с помощью GatsbyJS? - PullRequest
Новая
       31

Как добавить Adsense на сайт, созданный с помощью GatsbyJS?

0 голосов
/ 21 января 2019

Я хотел бы знать, куда мне следует добавить <script></script>, предоставленный Google Adsense.

Говорят, чтобы добавить его в <head></head>, но в Гэтсби у вас есть шлем как <head>.

Я также попытался добавить сценарий в файл html.js, где он расположен, тег <head> с {``}, чтобы избежать тега <script>, но он выводит в верхней части веб-сайта содержимое сценария.

TL; DR: Какой оптимальный способ добавить Adsense на сайт, созданный с помощью GatsbyJS?

  • Я пытался использовать реагирующий пакет adsense , но я не понимаю, как его использовать с Гэтсби.
  • Я попытался добавить тег <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.

Ответы [ 3 ]

0 голосов
/ 21 января 2019

Благодаря ответу на 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>
0 голосов
/ 16 июля 2019

если вы используете такие службы, как Netlify для развертывания своего веб-сайта, вы можете использовать функцию внедрения фрагмента кода, чтобы сделать эту работу, не касаясь вашего исходного кода.

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

, то выМожно выбрать, куда вы хотите добавить фрагмент (тег сценария).Для Adsense это должно быть до </head>.Надеюсь, поможет.:)

enter image description here

0 голосов
/ 21 января 2019

Чтобы настроить Adsense, поместите тег <script> (без литералов шаблона {``} непосредственно перед закрывающим тегом </body> в свой html.js, например: 

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

Затем, чтобыПоместите рекламный блок, вы можете использовать готовый компонент, такой как react-adsense на npm, как вы упоминали, или создать его самостоятельно.

Это полезная статья, который охватывает как настройку, так и размещение рекламных блоков с компонентом.

Дайте мне знать, если это работает для вас или если что-то не понятно!

...