Ads sometimes doesn't show

[Fikrifrds]

I place many ads in nuxt application. In some places it doesn't show. Sometime it shows on desktop view but not on mobile view.

[atinux]

Please provide a reproduction / screenshots about it please.

[jb-thery]

@Atinux I have the same issue on my game www.shirime.one, on google adsense my ads is set to responsive size.

my nuxt config:

export default {
  target: 'static',

  head: {
    titleTemplate: '%s - ' + 'Shirime Challenge',

    script: [
      {
        src: 'https://www.googletagmanager.com/gtag/js?id',
        async: true,
      },
      {
        src: 'https://apps.elfsight.com/p/platform.js',
      },
    ],
  },

  loading: {
    color: '#FF0000',
  },

  css: ['@/assets/css/global.css'],

  plugins: [
    { src: '~/plugins/gtag.js', mode: 'client' },
    { src: '~/plugins/gameMode.js', mode: 'client' },
    { src: '~/plugins/welcome.js', mode: 'client' },
  ],

  components: false,

  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/stylelint-module',
    '@nuxtjs/tailwindcss',
  ],

  modules: [
    '@nuxtjs/pwa',
    'vue-social-sharing/nuxt',
    'nuxt-i18n',
    '@nuxtjs/sitemap',
    'nuxt-lazy-load',
    'cookie-universal-nuxt',
    [
      '@nuxtjs/google-adsense',
      {
        id: 'ca-pub-',
      },
    ],
  ],

  pwa: {
    icon: {
      fileName: 'app-icon.png',
    },

    meta: {
      name: 'Shirime Challenge',
      mobileApp: true,
      mobileAppIOS: true,
      description: false,
      lang: false,
      theme_color: '#000000',
      ogHost: 'https://shirime.one',
      twitterCard: 'summary',
      twitterSite: '@jbty_dev',
      twitterCreator: '@jbty_dev',
    },
  },

  i18n: {
    baseUrl: 'https://shirime.one',
    detectBrowserLanguage: {
      fallbackLocale: 'en',
      useCookie: true,
      onlyOnRoot: true,
      alwaysRedirect: true,
    },
    locales: [
      {
        code: 'en',
        iso: 'en',
        file: 'en-US.js',
      },
      {
        code: 'es',
        iso: 'es',
        file: 'es-ES.js',
      },
      {
        code: 'fr',
        iso: 'fr',
        file: 'fr-FR.js',
      },
    ],
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en',
    seo: true,
    vueI18n: {
      fallbackLocale: 'en',
    },
  },

  sitemap: {
    hostname: 'https://shirime.one',
    gzip: true,
    i18n: true,
  },

  build: {
    optimizeJS: process.env.NODE_ENV === 'production',
    extractCSS: process.env.NODE_ENV === 'production',
    optimizeCSS: process.env.NODE_ENV === 'production',
  },
}

Implementation of nuxt adsense :

<template>
  <transition name="fade" mode="in-out">
    <UiModal no-quit>
      <div class="absolute z-50 ml-5 mt-2 top-0 left-0">
        <UiTitle :text="String(count)" level="3" />
      </div>

      <aside class="absolute inset-0 z-40 flex justify-center items-center">
        <div style="width: 310px; height: 558px">
          <adsbygoogle ad-slot="9023478" />
        </div>
      </aside>
    </UiModal>
  </transition>
</template>

<script>
export default {
  name: 'CounterModal',

  components: {
    UiModal: require('@/components/ui/UiModal.vue').default,
    UiTitle: require('@/components/ui/UiTitle.vue').default,
  },

  data: () => ({
    count: 10,
  }),

  mounted() {
    setInterval(() => {
      this.count--
    }, 1000)
  },
}
</script>

package.json

{
  "name": "shirime",
  "author": {
    "name": "Thery Jean-Baptiste",
    "email": "jb.thery@flameapp.fr",
    "url": "https://flameapp.fr"
  },
  "description": "Shirime Challenge - www.shirime.one digital ouija, make your friends believe that you speak with an all-knowing mind! Progressive Web App available for installation on Ios, Android, Windows, Mac Os and Linux.",
  "version": "1.1.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt generate",
    "start": "nuxt start",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxtjs/amp": "^0.5.4",
    "@nuxtjs/google-adsense": "^1.3.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sitemap": "^2.4.0",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "nuxt-i18n": "^6.21.1",
    "nuxt-lazy-load": "^1.2.5",
    "vue-social-sharing": "^3.0.5"
  },
  "devDependencies": {
    "@commitlint/cli": "^12.0.1",
    "@commitlint/config-conventional": "^12.0.1",
    "@nuxt/types": "~2.15.3",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "autoprefixer": "^10.2.5",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "fibers": "^5.0.0",
    "husky": "4.3.8",
    "lint-staged": "^10.5.4",
    "postcss": "^7.0.35",
    "prettier": "^2.2.1",
    "stylelint": "^13.12.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^21.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
  }
}

[manniL]

Stale.