Google AdSense integration for Nuxt.js. Advertisements will update whenever the page route changes
- Add
@nuxtjs/google-adsense
dependency using yarn or npm to your project - Add
@nuxtjs/google-adsense
tomodules
section ofnuxt.config.js
{
modules: [
// Simple usage
['@nuxtjs/google-adsense', {
id: 'ca-pub-###########'
}]
]
}
Using top level options:
{
modules: [
['@nuxtjs/google-adsense']
],
'google-adsense': {
id: 'ca-pub-#########'
}
}
The asynchronous ad code (//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
) is automatically
added to the <head>
section of your pages.
Option | type | description |
---|---|---|
id |
String | Your Google Adsense Publihser client ID (i.e. ca-pub-######### ). Required when not in test mode. |
pageLevelAds |
Boolean | Enable Adsense Page Level Ads. Default is false . Refer to the AdSense docs for details. |
tag |
String | AdSense component tag name. Defaults to adsbygoogle . |
includeQuery |
Boolean | When false , only $route.path is checked for changes. If set to true $route.query will also be taken into account. The default is false . |
analyticsUacct |
String | Google Analytics Account ID (if linking analytics with AdSense, i.e. UA-#######-# ). |
analyticsDomainName |
String | Google Analytics Account Domain (if linking analytics with AdSense, i.e. example.com ). |
test |
Boolean | Force AdSense into test mode (see below). |
pauseAdRequests |
Boolean | Pause ad requests until user consent is received. The default is false . |
requestNonPersonalizedAds |
Boolean | Show only non-personalized ads. The default is false . |
showAdRegion |
Boolean | Generate a unique data-ad-region every time the component is updated. This is required for SPAs but if generating a universal app may cause changes to generated output every time. This will cause tools like gulp-awspublish to upload the page every time. The default is true . |
The AdSense module will automatically switch to test
mode when runniung Nuxt in dev
mode.
But you can keep test mode on in production by setting the configuration option test
to true
.
Test mode uses a test publisher ID, so that you will not be violating AdSense TOS.
Note that test advertiements will typically appear as an empty space, but will have the correct dimensions (i.e. will occupy the correct space needed by the rendered ad).
Insert the <adsbygoogle />
component (or custom component name specified in options)
wherever you would like an advertisment placed.
The ad defaults to auto
size format (configurable by setting the prop ad-format
). This mode
is responsive by nature. You should place the <adsbygoogle />
component inside a container element
that has a specified (min/max) width and (min/max) height (which can be based on media queries),
or use style or classes on the <adsbygoogle />
component to restrict the advertisement to a
specific size (or sizes).
Use the ad-slot
property to specify your google adsense ad slot value (specified as a string)
Component props:
prop | type | description |
---|---|---|
ad-slot |
String | Google Adsense adslot. This prop is required when not in test mode. Refer to your AdSense account for ad-slot values. |
ad-format |
String | Defaults to 'auto' . Refer to the adsense docs for other options |
ad-style |
Object | Styles to apply to the rendered <ins> element. Default: { display: 'block' } . Refer to VueJS style binding docs for the Object format. |
ad-layout |
String | Optional. Refer to the adsense docs |
ad-layout-key |
String | Optional. Refer to the adsense docs |
page-url |
String | Optional. Set a reference page URL (of similar content) if the ad is on a page that requires authentication. When set, this prop must be a fully qualified URL (inclcuding protocol and hostname). |
include-query |
Boolean | Override global option includeQuery on a per ad basis. Ensure all ads on a page have the same setting. |
analytics-uacct |
String | Google Analytics Account ID (if linking analytics with AdSense, i.e. UA-#######-# ). Defaults to the value specified in the plugin option analyticsUacct . |
analytics-domain-name |
String | Google Analytics Account domain (if linking analytics with AdSense, i.e. example.com ). Defaults to the value specified in the plugin option analyticsDomainName . |
pause-ad-requests |
Boolean | Overrides global pauseAdRequests . Defer ad requests until user consent has been obtained. |
request-non-personalized-ads |
Boolean | Overrides global requestNonPersonalizedAds . Show only non-personalized ads. |
ad-region |
Boolean | Overrides global option adRegion . If true data-ad-region will be set to a random value. This is required for SPAs but if generating a universal app may cause changes to generated output every time. This will cause tools like gulp-awspublish to reupload the page every time. |
Whenever your route changes, any disaplayed ads will update, just as they would on normal page loads.
Adsense allows ad requests to be paused until user consent is given: https://support.google.com/adsense/answer/9042142. To use this functionality either set pauseAdRequests
to true
globally or pause-ad-requests
on the component. If pause-ad-requests
is used on the component it can be updated to unpause ad requests. If pauseAdRequests
is set globally it can be cleared using $adsbygoogle.unpauseAdRequests()
. This approach should be used for auto ads.
To comply with the EU consent policy (https://support.google.com/adsense/answer/7670013) adsense allows publishers to request non-personalized ads. This can either be configured at an account level or by setting (adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1
before requesting ads. This module will add the code if requestNonPersonalizedAds
is set globally or request-non-personalized-ads
is set on the component. The value can be updated using $adsbygoogle.requestNonPersonalizedAds(bool)
. This method needs to be called before requesting ads.
- Note: AdSense limits you to a maximum of three (3) ads per page.
- Caution: Reloading of ads arbitrarily (with minimal page content changes) may result in the suspension of your AdSense account. Refer to AdSense for full terms of use.
- Google needs to crawl each page where ads appear. Ensure your site SSR renders any page where ads appear. Ads on un-crawlable pages will not be shown.
- When placing ads on pages that require authentication, set
page-url
on the<adsbygoogle />
component to the URL of a page on your site that is publicly accessible, which would have similar/relevant content.
This module uses a technique developed by the Angular team (with help from Google Adsense) to handle updating ads on progressive web applications:
- https://github.com/leonardteo/google-ads-test-angularjs
- https://groups.google.com/forum/#!topic/angular/eyVo4XU04uk
Each time a new advertisement is requested, the adsense parameter data-ad-region
is
updated to a random value. For this reason, you cannot set the data-ad-region
attribute
on the <adsbygoogle />
component.
For test mode, the following blog was used as a reference:
Copyright (c) 2017 Troy Morehouse - Nuxt Community