Comment ajouter du code Adsense dans un composant React
Programming - Jui 13, 2023
L'utilisation du code Google Adsense dans une application React ne nécessite aucun plugin ou bibliothèque supplémentaire. Nous pouvons directement intégrer le code d'annonce Google Adsense dans un composant React et l'utiliser pour afficher des annonces Google.
Tout d'abord, nous expliquerons comment utiliser AdSense avec React à l'aide d'un package appelé react-Adsense. Dans la deuxième partie, nous verrons comment créer un composant AdSense sans aucun package.
Google AdSense et React avec package
Pour ajouter du code Google AdSense dans un composant React à l'aide de react-Adsense , vous pouvez suivre ces étapes :
1 - Connectez-vous à votre compte Google AdSense et créez un bloc d'annonces si vous ne l'avez pas déjà fait. Assurez-vous de choisir la taille et le format d'annonce appropriés.
2 - Installez le package react-adsense depuis npm en exécutant la commande suivante dans votre répertoire de projet :
npm installer réagir-adsense
3 - Importez le composant Ad de react-adsense dans le composant React où vous souhaitez afficher les publicités :
importer React depuis 'react' ;
importer { Ad } de 'react-adsense' ;
4 - Dans la méthode de rendu de votre composant, ajoutez le composant Ad avec le code du bloc d'annonces et le format d'annonce facultatif :
render() {
return (
<div>
<h1>Votre composant</h1>
<Ad client="YOUR_ADSENSE_CLIENT_ID" slot="YOUR_ADSENSE_SLOT_ID" format="auto" />
</div>
);
}5 - Remplacez "YOUR_ADSENSE_CLIENT_ID" par votre identifiant client AdSense et "YOUR_ADSENSE_SLOT_ID" par l'identifiant de votre bloc d'annonces. Vous pouvez trouver ces valeurs dans votre compte AdSense.
Le prop de format est facultatif et peut être défini sur différents formats d'annonces tels que "auto", "rectangle", "vertical", etc., en fonction de vos besoins.
Enfin, assurez-vous que votre composant est rendu dans un composant parent qui est encapsulé avec le GooglePublisherTagProvider de react-adsense. Ce fournisseur configure les scripts nécessaires pour AdSense :
import React from 'react';
import { GooglePublisherTagProvider } from 'react-adsense';
class App extends React.Component {
render() {
return (
<GooglePublisherTagProvider adSenseAttributes={{'data-ad-client': 'YOUR_ADSENSE_CLIENT_ID'}}>
<YourComponent />
</GooglePublisherTagProvider>
);
}
}
export default App;
Remplacez "YOUR_ADSENSE_CLIENT_ID" par votre ID client AdSense.
C'est ça! Avec ces étapes, vous devriez pouvoir ajouter du code AdSense à un composant React à l'aide du package react-adsense. N'oubliez pas de remplacer les valeurs d'espace réservé par vos propres identifiants AdSense.
Google AdSense et React sans forfait
Si vous préférez ne pas utiliser le package react-adsense, vous pouvez ajouter manuellement l'extrait de code AdSense à votre composant React. Voici comment procéder :
1 - Créez un compte AdSense et obtenez votre extrait de code AdSense.
2 - Créez un nouveau composant React ou ouvrez le composant existant dans lequel vous souhaitez ajouter le code AdSense.
3 - Dans votre fichier de composant, importez le crochet useEffect de React :
importez React, { useEffect } de 'react' ;4 - Créez un composant fonctionnel et utilisez le hook useEffect pour charger le script AdSense :
const AdComponent = () => {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}, []);
return (
<div>
<h1>Your Component</h1>
<ins className="adsbygoogle"
style={{ display: 'block' }}
data-ad-client="YOUR_ADSENSE_CLIENT_ID"
data-ad-slot="YOUR_ADSENSE_SLOT_ID"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
</div>
);
};
export default AdComponent;5 - Remplacez "YOUR_ADSENSE_CLIENT_ID" et "YOUR_ADSENSE_SLOT_ID" par vos ID de client et d'emplacement AdSense réels.
6 - Dans le crochet useEffect, un élément de script est créé dynamiquement et ajouté au <head> du document. Le script AdSense est chargé de manière asynchrone. Le hook useEffect inclut également une fonction de nettoyage qui supprime le script lorsque le composant est démonté.
7 - Dans l'instruction return du composant, utilisez l'élément ins avec la classe adsbygoogle pour définir le bloc d'annonces. Définissez les attributs nécessaires tels que data-ad-client, data-ad-slot, data-ad-format et data-full-width-responsive en fonction de votre configuration AdSense et des paramètres publicitaires souhaités.
8 - Utilisez le AdComponent dans votre application là où vous souhaitez que l'annonce AdSense s'affiche :
import React from 'react';
import AdComponent from './AdComponent';
const App = () => {
return (
<div>
<h1>Your App</h1>
<AdComponent />
{/* Other components */}
</div>
);
};
export default App;
En suivant ces étapes, vous pouvez intégrer manuellement le code AdSense dans votre composant React sans vous fier au package react-adsense.
