web-dev-qa-db-fra.com

Comment ajouter Adsense à un site Web construit avec GatsbyJS?

Je voudrais savoir où ajouter le <script></script> fourni par Google Adsense.

Ils disent de l'ajouter dans le <head></head>, mais à Gatsby, vous avez le casque en tant que <head>.

J'ai également essayé d'ajouter le script dans un fichier html.js où il se trouve un <head> tag avec {``} pour échapper au <script> tag, mais il affiche en haut du site Web le contenu du script.

TL; DR: Quelle est la meilleure façon d'ajouter Adsense à un site Web construit avec GatsbyJS?

  • J'ai essayé d'utiliser le react adsense package mais je ne comprends pas comment l'utiliser avec Gatsby.
  • J'ai essayé d'ajouter le <script> tag vers html.js et il ne se compile pas.
  • Si vous y échappez avec {``} vous obtenez le script tel quel, en haut du site Web.
<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>

source: html.js

Le site Web devrait être détecté par les robots de Google.

reactjsjsxadsensegatsbyhead
10
Joe Doe

Grâce à une réponse donnée sur Github, enfin le problème est résolu:

Si vous souhaitez ajouter Adsense:

  • cp .cache/default-html.js src/html.js
  • Ajoutez le script mais tout à l'intérieur doit être échappé -> {<some-js-code-here>}
  • Dans ma situation et à titre d'exemple:
<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

si vous utilisez des services comme Netlify pour déployer votre site Web, vous pouvez utiliser la fonctionnalité d'injection d'extraits pour que cela fonctionne sans toucher à votre code source.

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

vous pouvez ensuite sélectionner l'emplacement auquel vous souhaitez ajouter l'extrait (balise de script). Pour le Adsense cela doit être avant le </head>. J'espère que ça aide. :)

enter image description here

5
Sankha Karunasekara

Pour configurer Adsense, placez le <script> tag (sans littéraux de modèle {``} juste avant votre fermeture </body> tag dans votre html.js, comme ça:

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

Ensuite, pour placer un bloc d'annonces, vous pouvez soit utiliser un composant prédéfini comme react-adsense sur npm, comme vous l'avez mentionné, ou construisez-le vous-même.

Ceci est un article utile qui couvre à la fois la configuration et le placement des blocs d'annonces avec un composant.

Faites-moi savoir si cela fonctionne pour vous ou si quelque chose n'est pas clair!

1
Robin Métral