Remarque: cette branche est pour le module compatible Nuxt 3 . Découvrez la branche legacy-v2
pour le support Nuxt 2 .
Intégration Google Adsense pour nuxt.js. Les publicités se mettront à jour chaque fois que l'itinéraire de la page change
@nuxtjs/google-adsense
la dépendance à l'aide du fil ou du NPM à votre projet@nuxtjs/google-adsense
aux modules
section de nuxt.config.js
{
modules : [
// Simple usage
[ '@nuxtjs/google-adsense' , {
id : 'ca-pub-###########'
} ]
]
}
Utilisation d'options de niveau supérieur:
{
modules : [
[ '@nuxtjs/google-adsense' ]
] ,
googleAdsense : {
id : 'ca-pub-#########'
}
}
Utilisation de la configuration d'exécution:
{
modules : [
[ '@nuxtjs/google-adsense' ]
] ,
googleAdsense : {
onPageLoad : false ,
pageLevelAds : false ,
} ,
publicRuntimeConfig : {
googleAdsense : {
id : process . env . GOOGLE_ADSENSE_ID ,
test : process . env . GOOGLE_ADSENSE_TEST_MODE === 'true' ,
} ,
} ,
}
Le code publicitaire asynchrone ( //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
) est automatiquement ajouté à la section <head>
de vos pages.
Option | taper | description |
---|---|---|
id | Chaîne | Votre ID du client Google Adsense Publisher (c'est-à-dire ca-pub-######### ). Requis lorsqu'il n'est pas en mode test. |
adFormat | Chaîne | Définit un format d'annonce par défaut global. Peut être remplacé par des accessoires de composants. |
analyticsDomainName | Chaîne | Domaine de compte Google Analytics (IF Rendre les analyses avec AdSense, c'est-à-dire example.com ). |
analyticsUacct | Chaîne | ID de compte Google Analytics (IF Rendre les analyses avec AdSense, c'est-à-dire UA-#######-# ). |
hideFilled | Booléen | Lorsque des annonces false , non remplies ne seront pas cachées, lorsque true annonces non remplies seront cachées. La valeur par défaut est false . |
includeQuery | Booléen | Lorsqu'il false , seul $route.path est vérifié pour les modifications. Si réglé sur true $route.query sera également pris en compte. La valeur par défaut est false . |
onPageLoad | Booléen | Charge le script AdSense après le chargement de la page. La valeur par défaut est false . |
overlayBottom | Booléen | Permettez aux annonces d'ancrage AdSense à afficher en bas. La valeur par défaut est false . Reportez-vous aux documents Adsense pour plus de détails. |
pageLevelAds | Booléen | Activez les annonces de niveau de page AdSense. La valeur par défaut est false . Reportez-vous aux documents Adsense pour plus de détails. |
pauseOnLoad | Booléen | Pause les demandes d'annonces pour obtenir le consentement des utilisateurs pour utiliser des cookies ou un autre stockage local conformément au RGPD. Reportez-vous aux documents Adsense pour plus de détails. false . |
tag | Chaîne | Nom de la balise du composant adsense. Par défaut à adsbygoogle . |
test | Booléen | Forcer Adsense en mode test (voir ci-dessous). |
Le module AdSense passera automatiquement en mode test
lors de l'exécution de Nuxt en mode dev
. Mais vous pouvez continuer le mode de test en production en définissant le test
de l'option de configuration sur true
.
Le mode test utilise un ID d'éditeur de test, afin que vous ne violerez pas AdSense TOS.
Notez que les publicités de test apparaîtront généralement comme un espace vide, mais auront les dimensions correctes (c'est-à-dire occuper l'espace correct nécessaire à l'annonce rendue).
Insérez le composant <Adsbygoogle />
partout où vous souhaitez une publicité placée.
Vous devez placer le composant <Adsbygoogle />
dans un élément de conteneur qui a une largeur spécifiée (min / max) et (min / max) (qui peut être basé sur des requêtes multimédias), ou utiliser un style ou des classes sur le <Adsbygoogle />
Composant pour restreindre l'annonce à une taille (ou des tailles) spécifique.
Utilisez la propriété ad-slot
pour spécifier votre valeur de l'emplacement AD Google AdSense (spécifié en tant que chaîne).
Veuillez vous référer à la documentation AdSense pour plus d'informations. Documentation Google Adsense
Accessoires de composant:
soutenir | taper | description |
---|---|---|
ad-slot | Chaîne | Google Adsense ADSLOT. Cet accessoire est requis lorsqu'il n'est pas en mode test . Reportez-vous à votre compte AdSense pour les valeurs AD-Slot. |
ad-format | Chaîne | Facultatif. Reportez-vous aux documents AdSense pour d'autres options |
ad-style | Objet | Styles à appliquer à l'élément <ins> rendu. Par défaut: { display: 'block' } . Reportez-vous aux documents de liaison de style Vuejs pour le format objet. |
ad-layout | Chaîne | Facultatif. Reportez-vous aux documents Adsense |
ad-layout-key | Chaîne | Facultatif. Reportez-vous aux documents Adsense |
hide-unfilled | Booléen | Facultatif. Cache des annonces non remplies si elle est vraie. |
page-url | Chaîne | Facultatif. Définissez une URL de page de référence (de contenu similaire) si l'annonce se trouve sur une page qui nécessite une authentification. Lorsqu'il est défini, cet accessoire doit être une URL pleinement qualifiée (y compris le protocole et le nom d'hôte). |
include-query | Booléen | L'option globale de remplacement includeQuery sur une base publicitaire. Assurez-vous que toutes les annonces d'une page ont le même paramètre. |
analytics-uacct | Chaîne | ID de compte Google Analytics (IF Rendre les analyses avec AdSense, c'est-à-dire UA-#######-# ). Par défaut, la valeur spécifiée dans l'option Plugin analyticsUacct . |
analytics-domain-name | Chaîne | Domaine de compte Google Analytics (IF Rendre les analyses avec AdSense, c'est-à-dire example.com ). Par défaut, la valeur spécifiée dans l'option Plugin analyticsDomainName . |
Composant Données internes exposées | Nom | Type | Description | ____ | ____ | ___________ | showAd
| Méthode | Déclenchez la méthode ADM Show pour afficher l'annonce. | updateAd
| Méthode | Déclenchez la méthode AD de mise à jour pour actualiser l'annonce. | isUnfilled
| Réf. Trace l'attribut non rempli sur l'élément AD. Renvoie true
If data-ad-state
= «INDEBLABLE».
Chaque fois que votre itinéraire change ou éventuellement si les paramètres de la requête de votre itinéraire changent, toutes les annonces affichées se mettaient à jour, tout comme ils le feraient sur les charges de page normales.
page-url
sur le composant <Adsbygoogle />
sur l'URL d'une page de votre site accessible au public, qui aurait un contenu similaire / pertinent. Ce module utilise une technique développée par l'équipe angulaire (avec l'aide de Google AdSense) pour gérer les annonces de mise à jour sur les applications Web progressives:
Chaque fois qu'une nouvelle publicité est demandée, le paramètre AdSense data-ad-region
est mis à jour à une valeur aléatoire. Pour cette raison, vous ne pouvez pas définir l'attribut data-ad-region
sur le composant <Adsbygoogle />
.
Licence MIT