Vue 구글 애드센스 컴포넌트 작업

[shldhee]

Ads 컴포넌트

<template>
  <div ref="ads" align="center"></div>
</template>

<script>
export default {
  props: {
    slotId: {
      type: [String, Number],
      default: '123412341234'
    },
    customStyles: {
      type: String,
      default: 'display: block;'
    },
    responsive: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      timer: null,
      adsSizeType: null
    }
  },

  watch: {
    adsSizeType() {
      this.$refs['ads'].innerHTML = ''
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.injectAds()
      }, 1000)
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.setDeviceType)
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.setDeviceType)
    })
    this.setDeviceType()
  },
  methods: {
    setDeviceType() {
      try {
        if (window.matchMedia('(max-width: 500px)').matches) {
          this.adsSizeType = 'mobile'
        } else if (window.matchMedia('(max-width: 800px)').matches) {
          this.adsSizeType = 'tablet'
        } else {
          this.adsSizeType = 'desktop'
        }
      } catch (error) {
        console.error(error)
      }
    },
    injectAds() {
      try {
        // const isCheckedAdsHolder = document.querySelector('.ads-holder')
        // if(isCheckedAdsHolder) {
        //   this.$refs['ads'].innerHTML = ''
        // }
        const target = this.$refs['ads']
        let pushScript, ins, script
        const div = document.createElement('div')
        const aTag = document.createElement('a')
        const imgTag = document.createElement('img')
        aTag.setAttribute(
          'href',
          'href 값 url'
        )
        aTag.setAttribute('target', '_blank')
        imgTag.setAttribute('src', require('./assets/images/alt-ad-image.png'))
        aTag.appendChild(imgTag)
        div.classList.add('ads-holder')
        script = document.createElement('script')
        script.type = 'text/javascript'
        script.async = true
        script.src =
          'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
        ins = document.createElement('ins')
        // ins.style.display = 'block'
        // ins.style.cssText = 'display: block;'
        ins.style.cssText = this.customStyles
        // ins.style = this.customStyles
        ins.setAttribute('class', 'adsbygoogle')
        ins.setAttribute('data-ad-client', 'ca-pub-1234123412341234')
        ins.setAttribute('data-ad-slot', this.slotId)
        if (this.responsive) {
          ins.setAttribute('data-ad-format', 'auto')
          ins.setAttribute('data-full-width-responsive', true)
        }
        pushScript = document.createElement('script')
        pushScript.textContent =
          '(' +
          function() {
            // eslint-disable-next-line no-undef
            ;(adsbygoogle = window.adsbygoogle || []).push({})
          } +
          ')();'
        // const script = this._addScript();
        // const ins = this._addIns({ slot, format, responsive });
        // const pushScript = this._addAdsPushScript();
        div.appendChild(script)
        div.appendChild(ins)
        div.appendChild(aTag)
        div.appendChild(pushScript)
        target.appendChild(div)
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

<style lang="scss">
ins {
  &.adsbygoogle[data-ad-status='unfilled'] {
    height: 0 !important;
  }
  &.adsbygoogle + a {
    z-index: 31;
    position: relative;
    display: none !important;
  }
  &.adsbygoogle[data-ad-status='unfilled'] {
    display: none !important;
    position: relative;
    width: 100% !important;
    @include respond-to('desktop') {
      padding: 10px !important;
    }
  }
  &.adsbygoogle[data-ad-status='unfilled'] + a {
    display: inline-block !important;
    img {
      width: 100%;
      max-width: 360px;
    }
  }
}
</style>

사용하기

<template>
  <Ads 
    slot-id="123412341234"
    custom-styles="height:150px !important;display:inline-block;width:320px !important;"
    :responsive="false"
 />
</template>

<script>
import Ads from '@/components/Ads'
export default {
  components: {
    Ads
  }
}
</script>

<style lang="scss" scoped></style>