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

October 19, 2020

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: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', 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})

    data.ad = {
      lastPosition: -2,
      selected: []
    }

    // pre randomized selected ad indexes to provide consistency between server/client
    let index = 1
    while (data.ad.selected.length < 3) { // max 3 ads
      if ($helper.getRandomInt(1, 2) == 1) {
        // make sure not next to each other, at least skip one
        if (index - data.ad.lastPosition < 2) {
          index += 1 
        }

        data.ad.lastPosition = index
        data.ad.selected.push(index)
      }
      index += 1
    }    
  },
  methods: {
    showAd(index) {
      return this.ad.selected.includes(index)
    }
  },
  components: { Ad }
}
</script>

NOTE: Refer Nuxt asyncData for $helper.

NOTE: Refer getRandomInt

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.