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 adsad unit in Adsense, so you could get thead 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