14
votes

Comment ajouter Adsense à un site Web construit avec GatsbyJS?

J'aimerais savoir où ajouter le <script></script> fourni par Google Adsense.

Ils disent de l'ajouter dans le <head></head> , mais dans Gatsby vous avez Helmet comme <head> .

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

TL; DR: Quelle est la manière optimale d'ajouter Adsense à un site Web construit avec GatsbyJS?

J'ai essayé d'utiliser le package react adsense mais je ne comprends pas comment l'utiliser avec Gatsby.
J'ai essayé d'ajouter la <script> à html.js et cela ne compile pas.
Si vous l'é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 d'exploration de Google.

reactjs gatsby jsx adsense head

3 commentaires

Les guillemets sont transformés & quot; dans le navigateur. Je ne sais pas s'il existe une solution.

Utilisez dangerouslySetInnerHTML pour supprimer les erreurs du navigateur.

<script dangerouslySetInnerHTML={{ __html: '(adsbygoogle = window.adsbygoogle || []).push({google_ad_client: "something",enable_page_level_ads: true});', }} />

3 Réponses :

2
votes

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

<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 tel que react-adsense sur npm, comme vous l'avez mentionné, soit le créer vous-même.

Cet article utile 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!

0 commentaires

15
votes

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 ce qu'il contient 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>

1 commentaires

En fin de compte, si vous souhaitez vérifier que Adsense a été ajouté, vous pouvez contrôler si le <script> relatif aux annonces apparaît -> à l'intérieur de la <head> vous devriez trouver quelque chose comme <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.j‌s"></script>

14
votes

si vous utilisez des services tels que Netlify pour déployer votre site Web, vous pouvez utiliser la fonctionnalité d'injection d' Netlify de code 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 où vous souhaitez ajouter l'extrait (balise de script). Pour l' Adsense cela devrait être avant le </head> . J'espère que cela aide. :)

1 commentaires

Bon! Je n'ai pas à m'inquiéter d'ignorer les choses sur Github