Nuxt Lazy Load Google Adsense When Component/Element Is Visible

Modify from Nuxt Load Google Adsense Auto Ads.

Install

npm install --save vue-observe-visibility

Edit components/GoogleAd.vue

<template>  <component v-if="isShow" :class="_class" :is="tag" v-observe-visibility="{ callback: visibilityChanged, intersection: { rootMargin: '50px' }, once: true, }">    <ins v-if="type == 'link'"      class="adsbygoogle"      style="display:block"      :data-ad-channel="channel"      data-ad-format="fluid"      data-ad-layout-key="-gb+7+v-no+1a7"      data-ad-client="ca-pub-8122******"      data-ad-slot="2872******"></ins>    <ins v-else       class="adsbygoogle"      style="display:block"      :data-ad-channel="channel"      data-ad-client="ca-pub-8122******"      data-ad-slot="7368*****"      data-ad-format="auto"      data-full-width-responsive="true"></ins>  </component></template><script>import Vue from 'vue'import VueObserveVisibility from 'vue-observe-visibility'Vue.use(VueObserveVisibility)export default {  props: {    '_class': Array,     'tag': {      type: String,      default: 'div'    },    'type': {      type: String,      default: 'display'    },    'channel': {      type: String,      default: 'nochannel'    }  },  head() {    if (this.isShow) {      return {        script: [          { hid: 'adsense', src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8122******', async: true, crossorigin: 'anonymous' }        ]      }    }    return { }  },    data() {    return {       isShow: this.$config.ENABLE_ADSENSE,       isLoaded: false    }  },  methods: {    visibilityChanged(isVisible, entry) {      // load when component is shown      if (isVisible && this.isShow && !this.isLoaded) {        this.isLoaded = true        try {          // this is required for each ad slot (calling this once will only load 1 ad)          (window.adsbygoogle = window.adsbygoogle || []).push({})        } catch (error) {          console.error(error)        }      }    }  },  mounted() {    if (this.isShow) {      // load after 8s      setTimeout(() => {        if (!this.isLoaded) {          this.isLoaded = true          try {            // this is required for each ad slot (calling this once will only load 1 ad)            (window.adsbygoogle = window.adsbygoogle || []).push({})          } catch (error) {            console.error(error)          }        }      }, 8000);    }  },}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.