UNPKG

5.83 kBMarkdownView Raw
1# Google AdSense
2> Google AdSense integration for Nuxt.js. Advertisements will update whenever the page route changes
3
4## Setup
5- Add `@nuxtjs/google-adsense` dependency using yarn or npm to your project
6- Add `@nuxtjs/google-adsense` to `modules` section of `nuxt.config.js`
7
8```js
9{
10 modules: [
11 // Simple usage
12 ['@nuxtjs/google-adsense', {
13 id: 'ca-pub-###########'
14 }]
15 ]
16}
17```
18
19Using top level options:
20
21```js
22{
23 modules: [
24 ['@nuxtjs/google-adsense']
25 ],
26
27 'google-adsense': {
28 id: 'ca-pub-#########'
29 }
30}
31```
32
33The asynchronous ad code (`//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js`) is automatically
34added to the `<head>` section of your pages.
35
36
37## Configuration options
38
39| Option | type | description
40| -------- | ---- | -----------
41| `id` | String | Your Google Adsense Publisher client ID (i.e. `ca-pub-#########`). **Required** when not in test mode.
42| `pageLevelAds` | Boolean | Enable Adsense Page Level Ads. Default is `false`. Refer to the AdSense docs for details.
43| `tag` | String | AdSense component tag name. Defaults to `adsbygoogle`.
44| `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`.
45| `analyticsUacct` | String | Google Analytics Account ID (if linking analytics with AdSense, i.e. `UA-#######-#`).
46| `analyticsDomainName` | String | Google Analytics Account Domain (if linking analytics with AdSense, i.e. `example.com`).
47| `overlayBottom` | Boolean | Enable Adsense Anchor Ads to show at bottom. Default is `false`. Refer to the AdSense docs for details.
48| `onPageLoad` | Boolean | Loads Adsense script after page loade. Default is `false`.
49| `test` | Boolean | Force AdSense into _test_ mode (see below).
50
51### Test mode
52
53The AdSense module will automatically switch to `test` mode when runniung Nuxt in `dev` mode.
54But you can keep test mode on in production by setting the configuration option `test` to `true`.
55
56Test mode uses a test publisher ID, so that you will not be violating AdSense TOS.
57
58Note that test advertisements will typically appear as an empty space, but will have the
59correct dimensions (i.e. will occupy the correct space needed by the rendered ad).
60
61## Usage
62
63Insert the `<adsbygoogle />` component (or custom component name specified in options)
64wherever you would like an advertisment placed.
65
66The ad defaults to `auto` size format (configurable by setting the prop `ad-format`). This mode
67is responsive by nature. You should place the `<adsbygoogle />` component inside a container element
68that has a specified (min/max) width and (min/max) height (which can be based on media queries),
69or use style or classes on the `<adsbygoogle />` component to restrict the advertisement to a
70specific size (or sizes).
71
72Use the `ad-slot` property to specify your google adsense ad slot value (specified as a string)
73
74**Component props:**
75
76| prop | type | description
77| ---- | ---- | -----------
78| `ad-slot` | String | Google Adsense adslot. **This prop is required when not in test mode**. Refer to your AdSense account for ad-slot values.
79| `ad-format` | String | Defaults to `'auto'`. Refer to the adsense docs for other options
80| `ad-style` | Object | Styles to apply to the rendered `<ins>` element. Default: `{ display: 'block' }`. Refer to VueJS [style binding docs](https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1) for the Object format.
81| `ad-layout` | String | Optional. Refer to the adsense docs
82| `ad-layout-key` | String | Optional. Refer to the adsense docs
83| `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).
84| `include-query` | Boolean | Override global option `includeQuery` on a per ad basis. Ensure all ads on a page have the same setting.
85| `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`.
86| `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`.
87
88
89## Automatic updating of Ads
90Whenever your route changes, any disaplayed ads will update, just as they would on normal
91page loads.
92
93
94## Caveats:
95- **Note:** AdSense limits you to a maximum of three (3) ads per page.
96- **Caution:** Reloading of ads arbitrarily (with minimal page content changes) may result in
97the suspension of your AdSense account. _Refer to AdSense for full terms of use._
98- Google needs to crawl each page where ads appear. Ensure your site SSR renders any page where
99ads apepar. Ads on un-crawlable pages will not be shown.
100- 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.
101
102
103## Background
104This module uses a technique developed by the Angular team (with help from Google Adsense)
105to handle updating ads on progressive web applications:
106- https://github.com/leonardteo/google-ads-test-angularjs
107- https://groups.google.com/forum/#!topic/angular/eyVo4XU04uk
108
109Each time a new advertisement is requested, the adsense parameter `data-ad-region` is
110updated to a random value. For this reason, you cannot set the `data-ad-region` attribute
111on the `<adsbygoogle />` component.
112
113For test mode, the following blog was used as a reference:
114- https://www.thedev.blog/3087/test-adsense-ads-safely-without-violating-adsense-tos/
115
116
117## License
118
119[MIT License](./LICENSE)
120
121Copyright (c) 2017 Troy Morehouse - Nuxt Community