Nuxt.js Manual Adsense Component (Auto Ads not loading)

Auto Ads not loading

I try enabling auto ads with Nuxt.js static generation. After a few weeks of observation, I notice individual ads are not loaded/shown. Anchor ads are shown occasionally in mobile/small screen, but I didn't enable Vignette ads.

I use the Ad Settings Preview and ads seemed to load fine.

I have 2 theories

  • Perhaps Nuxt.js components overwrite/replace Ads loaded by Adsense JS?
  • I am running A/B testing (only 1% of my pages are loaded using Nuxt.js), maybe Adsense crawler doesn't like it or haven't pick up the pattern?

So I decide to load ads manually instead on depending on Auto Ads.

NOTE: Auto Ads have a feature Optimize your existing ad units?: Turn this option on if you're interested in letting Google optimize your existing ad units and your Auto ads together and place ads in the best performing ad placements.

Setup Manual Ads

Create components/Ad.vue.

  • You need to create a Display ads ad unit in Adsense, so you could get the ad slots.
  • You can load the same ad unit multiple times (I load 3 ads per page), or you can create multiple ad units.
<template>  <div>    <template v-if="isDev">      [ADSENSE PLACEHOLDER]    </template>    <template v-else>      <ins class="adsbygoogle"           style="display:block"           data-ad-client="ca-pub-81227161XXXXXXXX"           data-ad-slot="5449XXXXXX"           data-ad-format="auto"           data-full-width-responsive="true"></ins>    </template>  </div></template><script>export default {  head() {    let productionScripts = []    if (!this.isDev) {      return {        scripts: [          { hid: 'adsense', src: '', defer: true, 'data-ad-client': 'ca-pub-81227161XXXXXXXX' },        ]      }    }    return { }  },    data() {    return {       isDev: process.env.NODE_ENV !== 'production'    }  },  mounted() {    if (!this.isDev) {      this.$nextTick(() => {        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)        }      })    }  },  components: {  }}</script>

Show Ad Component at random position

Assuming I have a page with list of items. I want to random insert 3 ads among the list of items.

  • I load data/items via asyncData
<template>  <div>    <ad v-if="showAd(1)" />    <h1>Title</h1>    <template v-for="(_item, index) in items" >      <ad v-if="showAd(index + 1 + 1)" :key="'ad-' + _item._id" />      <div>[ITEM]</div>    </template>  </div></template><script>import Ad from '@/components/Ad.vue'export default {  async asyncData ({ $helper, params, store, error }) {    // get items     const data = await $helper.getData({'test', store, error}) = {      lastPosition: -2,      selected: []    }    // pre randomized selected ad indexes to provide consistency between server/client    let index = 1    while ( < 3) { // max 3 ads      if ($helper.getRandomInt(1, 2) == 1) {        // make sure not next to each other, at least skip one        if (index - < 2) {          index += 1         } = index      }      index += 1    }      },  methods: {    showAd(index) {      return    }  },  components: { Ad }}</script>

NOTE: Refer Nuxt asyncData for $helper.

NOTE: Refer getRandomInt

❤️ 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.