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 |
|
19 | Using 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 |
|
33 | The asynchronous ad code (`//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js`) is automatically
|
34 | added 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 |
|
53 | The AdSense module will automatically switch to `test` mode when runniung Nuxt in `dev` mode.
|
54 | But you can keep test mode on in production by setting the configuration option `test` to `true`.
|
55 |
|
56 | Test mode uses a test publisher ID, so that you will not be violating AdSense TOS.
|
57 |
|
58 | Note that test advertisements will typically appear as an empty space, but will have the
|
59 | correct dimensions (i.e. will occupy the correct space needed by the rendered ad).
|
60 |
|
61 | ## Usage
|
62 |
|
63 | Insert the `<adsbygoogle />` component (or custom component name specified in options)
|
64 | wherever you would like an advertisment placed.
|
65 |
|
66 | The ad defaults to `auto` size format (configurable by setting the prop `ad-format`). This mode
|
67 | is responsive by nature. You should place the `<adsbygoogle />` component inside a container element
|
68 | that has a specified (min/max) width and (min/max) height (which can be based on media queries),
|
69 | or use style or classes on the `<adsbygoogle />` component to restrict the advertisement to a
|
70 | specific size (or sizes).
|
71 |
|
72 | Use 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
|
90 | Whenever your route changes, any disaplayed ads will update, just as they would on normal
|
91 | page 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
|
97 | the 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
|
99 | ads 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
|
104 | This module uses a technique developed by the Angular team (with help from Google Adsense)
|
105 | to 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 |
|
109 | Each time a new advertisement is requested, the adsense parameter `data-ad-region` is
|
110 | updated to a random value. For this reason, you cannot set the `data-ad-region` attribute
|
111 | on the `<adsbygoogle />` component.
|
112 |
|
113 | For 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 |
|
121 | Copyright (c) 2017 Troy Morehouse - Nuxt Community
|