feat: support new adsense code (#165)

* feat: support new adsense code * docs: small quote * feat: add typing for param Co-authored-by: Irfan Maulana <maulana.irfan@tokopedia.com>
mazipan · Jul 28, 2021 · d558b86 · d558b86
1 parent fee66e6
commit d558b86
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -134,7 +134,7 @@ import Ads from 'vue-google-adsense'
 
 Vue.use(require('vue-script2'))
 
-Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT' })
+Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT', isNewAdsCode: true })
 ```
 
 ## :gift: Available Props
@@ -151,6 +151,7 @@ Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT' })
 | data-ad-format     | String      | `auto` for Adsense Ads<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> Possible values are `auto`, `horizontal`, `vertical`, `rectangle` or `fluid` |
 | data-full-width-responsive | String (`yes` or `no`) | `no`  | Attribute `data-full-width-responsive` from adsense |
 | is-non-personalized-ads | String (`yes` or `no`) | `no`      | Props for request `non-personalized` ads, [read more](https://support.google.com/adsense/answer/9042142?hl=en&ref_topic=7670012) |
+| `is-new-ads-code` | String (`yes` or `no`) | `no`      | Use new Adsense code (per 19 july 2021), [read more](https://support.google.com/adsense/answer/10627874) |
 
 ## :metal: Who is using this library
 

diff --git a/packages/demo/README.md b/packages/demo/README.md
@@ -134,7 +134,7 @@ import Ads from 'vue-google-adsense'
 
 Vue.use(require('vue-script2'))
 
-Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT' })
+Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT', isNewAdsCode: true })
 ```
 
 ## :gift: Available Props
@@ -151,6 +151,7 @@ Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT' })
 | data-ad-format     | String      | `auto` for Adsense Ads<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> Possible values are `auto`, `horizontal`, `vertical`, `rectangle` or `fluid` |
 | data-full-width-responsive | String (`yes` or `no`) | `no`  | Attribute `data-full-width-responsive` from adsense |
 | is-non-personalized-ads | String (`yes` or `no`) | `no`      | Props for request `non-personalized` ads, [read more](https://support.google.com/adsense/answer/9042142?hl=en&ref_topic=7670012) |
+| `is-new-ads-code` | String (`yes` or `no`) | `no`      | Use new Adsense code (per 19 july 2021), [read more](https://support.google.com/adsense/answer/10627874) |
 
 ## :metal: Who is using this library
 

diff --git a/packages/lib/README.md b/packages/lib/README.md
@@ -134,7 +134,7 @@ import Ads from 'vue-google-adsense'
 
 Vue.use(require('vue-script2'))
 
-Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT' })
+Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT', isNewAdsCode: true })
 ```
 
 ## :gift: Available Props
@@ -151,6 +151,7 @@ Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT' })
 | data-ad-format     | String      | `auto` for Adsense Ads<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> Possible values are `auto`, `horizontal`, `vertical`, `rectangle` or `fluid` |
 | data-full-width-responsive | String (`yes` or `no`) | `no`  | Attribute `data-full-width-responsive` from adsense |
 | is-non-personalized-ads | String (`yes` or `no`) | `no`      | Props for request `non-personalized` ads, [read more](https://support.google.com/adsense/answer/9042142?hl=en&ref_topic=7670012) |
+| `is-new-ads-code` | String (`yes` or `no`) | `no`      | Use new Adsense code (per 19 july 2021), [read more](https://support.google.com/adsense/answer/10627874) |
 
 ## :metal: Who is using this library
 

diff --git a/packages/lib/src/ads/AdsenseComponent.vue b/packages/lib/src/ads/AdsenseComponent.vue
@@ -1,6 +1,13 @@
 <template>
   <div :class="rootClass">
-    <script2 type="text/javascript" async="true" :src="ADS_SCRIPT" />
+
+    <template v-if="isNewAdsCode === 'yes'">
+      <script2 type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
+    </template>
+    <template v-if="isNewAdsCode === 'no'">
+      <script2 type="text/javascript" async="true" :src="ADS_SCRIPT" />
+    </template>
+
     <ins
       :class="insClass"
       class="adsbygoogle"

diff --git a/packages/lib/src/ads/AutoAdsense.ts b/packages/lib/src/ads/AutoAdsense.ts
@@ -1,14 +1,25 @@
 import constant from '../utils/constant'
 
+interface AutoAdsenseParam {
+  adClient: string;
+  isNewAdsCode: boolean;
+}
+
 const AutoAdsense = {
-  install: (Vue, { adClient = '' }) => {
+  install: (Vue, { adClient = '', isNewAdsCode = false }: AutoAdsenseParam) => {
     if (!adClient) {
       return Error('AutoAdsense require "adClient" parameter')
     }
     const head = document.head;
     const s = document.createElement('script')
     s.type = 'text/javascript';
-    s.src = constant.ADS_SCRIPT;
+    s.async = true;
+    if (isNewAdsCode) {
+      s.crossOrigin = 'anonymous'
+      s.src = `${constant.ADS_SCRIPT}?client=${adClient}`;
+    } else {
+      s.src = constant.ADS_SCRIPT;
+    }
     s.onload = () => {
       // @ts-ignore
       (adsbygoogle = window.adsbygoogle || []).push({

diff --git a/packages/lib/src/ads/InArticleAdsenseComponent.vue b/packages/lib/src/ads/InArticleAdsenseComponent.vue
@@ -1,6 +1,13 @@
 <template>
   <div :class="rootClass">
-    <script2 type="text/javascript" async="true" :src="ADS_SCRIPT" />
+
+    <template v-if="isNewAdsCode === 'yes'">
+      <script2 type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
+    </template>
+    <template v-if="isNewAdsCode === 'no'">
+      <script2 type="text/javascript" async="true" :src="ADS_SCRIPT" />
+    </template>
+
     <ins
       :class="insClass"
       class="adsbygoogle"

diff --git a/packages/lib/src/ads/InFeedAdsenseComponent.vue b/packages/lib/src/ads/InFeedAdsenseComponent.vue
@@ -1,6 +1,13 @@
 <template>
   <div :class="rootClass">
-    <script2 type="text/javascript" async="true" :src="ADS_SCRIPT" />
+
+    <template v-if="isNewAdsCode === 'yes'">
+      <script2 type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
+    </template>
+    <template v-if="isNewAdsCode === 'no'">
+      <script2 type="text/javascript" async="true" :src="ADS_SCRIPT" />
+    </template>
+
     <ins
       :class="insClass"
       class="adsbygoogle"

diff --git a/packages/lib/src/utils/constant.ts b/packages/lib/src/utils/constant.ts
@@ -1,3 +1,3 @@
 export default {
   ADS_SCRIPT: '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
-}
+}
diff --git a/packages/lib/src/utils/props.ts b/packages/lib/src/utils/props.ts
@@ -43,4 +43,10 @@ export default {
     type: String,
     default: ''
   },
+  // Read: https://support.google.com/adsense/answer/10627874
+  // Issue: https://github.com/mazipan/vue-google-adsense/issues/164
+  isNewAdsCode: {
+    type: String,
+    default: 'no'
+  },
 }