Add google adsense

Author: surmon-china

components/mammon/adsense-responsive-1.vue

@@ -2,9 +2,9 @@
   <client-only>
     <Adsense
       :root-class="`mammon g-a ${rootClass}`"
-      data-ad-client="ca-pub-4710915636313788"
-      data-ad-slot="8733527061"
+      :data-ad-client="GOOGLE_ADSENSE_CLIENT"
       :data-full-width-responsive="true"
+      data-ad-slot="8733527061"
     >
     </Adsense>
   </client-only>
@@ -13,10 +13,16 @@
 <script lang="ts">
   import Vue from 'vue'
   import { createComponent } from '@vue/composition-api'
+  import { GOOGLE_ADSENSE_CLIENT } from '@/config'
   export default createComponent({
     name: 'AdsenseResponsiveAd1',
     props: {
       rootClass: String
+    },
+    setup() {
+      return {
+        GOOGLE_ADSENSE_CLIENT
+      }
     }
   })
 </script>

components/mammon/adsense-responsive-2.vue

@@ -2,9 +2,9 @@
   <client-only>
     <Adsense
       :root-class="`mammon g-a ${rootClass}`"
-      data-ad-client="ca-pub-4710915636313788"
-      data-ad-slot="7455679385"
+      :data-ad-client="GOOGLE_ADSENSE_CLIENT"
       :data-full-width-responsive="true"
+      data-ad-slot="7455679385"
     >
     </Adsense>
   </client-only>
@@ -13,10 +13,16 @@
 <script lang="ts">
   import Vue from 'vue'
   import { createComponent } from '@vue/composition-api'
+  import { GOOGLE_ADSENSE_CLIENT } from '@/config'
   export default createComponent({
     name: 'AdsenseResponsiveAd2',
     props: {
       rootClass: String
+    },
+    setup() {
+      return {
+        GOOGLE_ADSENSE_CLIENT
+      }
     }
   })
 </script>

components/mammon/adsense-responsive-3.vue

@@ -0,0 +1,28 @@
+<template>
+  <client-only>
+    <Adsense
+      :root-class="`mammon g-a ${rootClass}`"
+      :data-ad-client="GOOGLE_ADSENSE_CLIENT"
+      :data-full-width-responsive="true"
+      data-ad-slot="4010319351"
+    >
+    </Adsense>
+  </client-only>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { createComponent } from '@vue/composition-api'
+  import { GOOGLE_ADSENSE_CLIENT } from '@/config'
+  export default createComponent({
+    name: 'AdsenseResponsiveAd3',
+    props: {
+      rootClass: String
+    },
+    setup() {
+      return {
+        GOOGLE_ADSENSE_CLIENT
+      }
+    }
+  })
+</script>

components/mammon/index.vue

@@ -1,7 +1,8 @@
 <template>
-  <aliyun-swiper-ad key="aliyun" v-if="isEnabledAliyun" />
-  <adsense-responsive-ad-1 key="gad1" v-else-if="isEnabledGA1" />
-  <adsense-responsive-ad-2 key="gad2" v-else-if="isEnabledGA2" />
+  <aliyun-swiper-ad key="aliyun" v-if="isEnabledAd(MammonProvider.Aliyun)" />
+  <adsense-responsive-ad-1 key="gad1" v-else-if="isEnabledAd(MammonProvider.GoogleAdSense1)" />
+  <adsense-responsive-ad-2 key="gad2" v-else-if="isEnabledAd(MammonProvider.GoogleAdSense2)" />
+  <adsense-responsive-ad-3 key="gad2" v-else-if="isEnabledAd(MammonProvider.GoogleAdSense3)" />
 </template>
 
 <script lang="ts">
@@ -12,15 +13,17 @@
   export enum MammonProvider {
     Aliyun = 'Aliyun',
     GoogleAdSense1 = 'GoogleAdSense1',
-    GoogleAdSense2 = 'GoogleAdSense2'
+    GoogleAdSense2 = 'GoogleAdSense2',
+    GoogleAdSense3 = 'GoogleAdSense3'
   }
 
   export const cnMammonProviders = [
     MammonProvider.Aliyun
   ]
   export const gaMammonProviders = [
     MammonProvider.GoogleAdSense1,
-    MammonProvider.GoogleAdSense2
+    MammonProvider.GoogleAdSense2,
+    MammonProvider.GoogleAdSense3
   ]
 
   export default createComponent({
@@ -36,9 +39,10 @@
     },
     setup(props) {
       return {
-        isEnabledAliyun: computed(() => props.provider === MammonProvider.Aliyun),
-        isEnabledGA1: computed(() => props.provider === MammonProvider.GoogleAdSense1),
-        isEnabledGA2: computed(() => props.provider === MammonProvider.GoogleAdSense2),
+        MammonProvider,
+        isEnabledAd(provider: MammonProvider) {
+          return props.provider === provider
+        }
       }
     }
   })

config.ts

@@ -28,6 +28,7 @@ export enum GitHubRepositorieIDs {
 const ALIYUN_PARTER_URL_fixed = 'https://www.aliyun.com/minisite/goods?userCode=pu7fghvl'
 const ALIYUN_PARTER_URL_HOTSALE = 'https://www.aliyun.com/acts/hotsale?userCode=pu7fghvl'
 
+export const GOOGLE_ADSENSE_CLIENT = 'ca-pub-4710915636313788'
 export const ALIYUN_ADS = [
   {
     image: '/images/mammon/aliyun-banner-4.jpg',
@@ -47,5 +48,7 @@ export default Object.freeze({
   GITHUB_USER_URL,
   GITHUB_FOLLOWERS_URL,
   GITHUB_SPONSORS_URL,
+
+  GOOGLE_ADSENSE_CLIENT,
   ALIYUN_ADS
 })

plugins/vue-google-adsense.ts

@@ -6,15 +6,18 @@
 
 import Vue from 'vue'
 import Ads from 'vue-google-adsense'
+import { GOOGLE_ADSENSE_CLIENT } from '@/config'
 
 import Adsense1 from '@/components/mammon/adsense-responsive-1.vue'
 import Adsense2 from '@/components/mammon/adsense-responsive-2.vue'
+import Adsense3 from '@/components/mammon/adsense-responsive-3.vue'
+
+[Adsense1, Adsense2, Adsense3].forEach(ga => {
+  Vue.component(ga.name, ga)
+})
 
 Vue.use(require('vue-script2'))
 Vue.use(Ads.Adsense)
 Vue.use(Ads.InArticleAdsense)
 Vue.use(Ads.InFeedAdsense)
-Vue.use(Ads.AutoAdsense, { adClient: 'ca-pub-4710915636313788' })
-
-Vue.component(Adsense1.name, Adsense1)
-Vue.component(Adsense2.name, Adsense2)
+Vue.use(Ads.AutoAdsense, { adClient: GOOGLE_ADSENSE_CLIENT })