Setup

Foobar is a Python library for dealing with word pluralization.

Installation

• Install the module with your favorite package manager.

yarn @r4you/nuxt-ads-module

• Add @r4you/nuxt-ads-module to modules section of nuxt.config.js and the script url.

// nuxt.config.js

{
  modules: [
    '@r4you/nuxt-ads-module',
 ],
}
// The script url will be sent by r4you

• Configure the module as needed by adding a r4GptAds key to nuxt.config.js.

// nuxt.config.js

{
 r4GptAds: {
    scriptUrl: '##SCRIPT URL##',
  },
}
// The script url will be sent by r4you

Usage

When the module is enabled, it registers a global Vue component that you can use to display ads in your app. By default, the component's name is R4GptAd

Props

Id

• Type: <string>

Unique DOMElementId.

r4ad

• Type: <string> : required

Adunit code.

sizes

• Type: <string> : required

Default size for this ad '[<width>,<height>]'.

mobile

• Type: <boolean>
• Default: false

Parameter to identify if is a mobile ads.

plc

• Type: <integer>: required Default header bidding placement for banners

plcv

• Type: <Integer || Number> Default header bidding placement for outstream videos

formats

• Type: <string>
• Default: ["display"]

Formats enabled

adtarget

• Type: <Object>

Custom Target option for this ad :adtarget="[{ key: '##KEY##', value: '##VALUE##' },{ key: '##KEY##', value: '##VALUE##' }]"

Examples

<template>
    <R4GptAd
      :id="'##ID##'"
      :r4ad="'##ADUNITCODE##'"
      :sizes="'[##WIDTH##, ##HEIGHT##]'"
      :mobile="false"
      :plc="##PLACEMENT##"
      :plcv="##PLACEMENT VIDEO##"
      :adtarget="[
        { key: 'category', value: 'categoria teste' },
        { key: 'publisher', value: 'portalpopline' },
      ]"
      :formats="'display,outstream'"
    />
</template>

<script lang="ts">
import Vue from 'vue'

declare global {
  interface Window {
    _r4Ads: any
  }
}

export default Vue.extend({
  beforeMount() {
    window._r4Ads = window._r4Ads || { cmd: [] }
    window._r4Ads.cmd.push(function () {
      window._r4Ads.reset()
    })
  },
})
</script>

IMPORTANT: Don't forget to run the ads reset method inside de beforeMount hook.

License

MIT