ablypl / vue-dfp

Vue DoubleClick for Publishers

Installation

npm install vue-doubleclick

Then require the plugin in you js file:

import DoubleClick from 'vue-doubleclick';

Vue.use(DoubleClick, {
    id: '{your-dfp-id}'
});

Afterwards you can you BannerAd component:

<google-ad unit="{Ad Unit Name}"></google-ad>

Component generates random container id, however you can pass your own value

<google-ad unit="{Ad Unit Name}" id="my-container-id"></google-ad>

Mappings

Plugin allows you to define custom mappings (forcing ad size on different screens):

let mappings = {
    rectangle: [
        { window: [0, 0], sizes: [[300, 250], [300, 300],[300, 100],[250, 250]] },
        { window: [1050, 350], sizes: [[250, 250], [300, 250], [300, 100], [300, 600], [240, 400], [160, 600], [120,600]] },
    ],
    banner: [
        { window: [0, 0], sizes: [[300, 250], [300, 300],[300, 100],[250, 250]] },
        { window: [750, 200], sizes: [[750, 300], [750, 200], [300, 300], [300,250], [750, 100], [728, 90], [600,200]] },
        { window: [1050, 350], sizes: [[1200, 400], [970, 90], [750, 300], [750, 200], [750, 100], [728, 90], [600,200], [900,300], [970, 250], [970, 415]] },
        { window: [1200, 350], sizes: [[1200, 600], [1200, 400]] },
    ]
};

and then pass it as another option at install:

Vue.use(DoubleClick, {
    id: '{your-dfp-id}',
    mappings
});

Ad Unit Sizes

You should define your own Ad Unit Sizes, however this plugin is delivered with 2 base sizes:

let sizes = {
    banner: [[1200, 600], [1200, 400], [300, 250], [300, 300]],
    rectangle: [ [300, 250], [300, 300], [300, 600]]
};

If you define your own sizes, pass them just like mappings

Vue.use(DoubleClick, {
    id: '{your-dfp-id}',
    sizes
});

Contributing

Any and all contributions will be greatly appreciated.

vue-dfp's Issues

Error: Vue not defined

Hello! I enjoy the simplicity of your plugin and want to use it in a project. However, I can't seem to get started. I get the following errors when using this plugin with a new application built with the Vue webpack template.

I used the following snippet from the README in my main.js file, before instantiating Vue:

import DoubleClick from 'vue-doubleclick'

Vue.use(DoubleClick, {
  id: '28844187'
})

I get the following error in the console:

pubads_impl_263.js:1 Exception in queued GPT command TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.prepareMappings (index.js?00c8:71)
    at Object.extractOptions (index.js?00c8:56)
    at Arguments.googletag.cmd.push (index.js?00c8:36)
    at On._.h.push (pubads_impl_263.js:1)
    at On.push (pubads_impl_263.js:1)
    at Pn (pubads_impl_263.js:1)
    at pubads_impl_263.js:1
    at Dp (pubads_impl_263.js:1)
    at pubads_impl_263.js:1

I interpreted this as the secondary mappings or sizes option to be required, so I referenced the mappings options in the README verbatim, and now get the following error in the console:

Exception in queued GPT command ReferenceError: Vue is not defined
    at Object.extractOptions (index.js?00c8:62)
    at Arguments.googletag.cmd.push (index.js?00c8:36)
    at On._.h.push (pubads_impl_263.js:1)
    at On.push (pubads_impl_263.js:1)
    at Pn (pubads_impl_263.js:1)
    at pubads_impl_263.js:1
    at Dp (pubads_impl_263.js:1)
    at pubads_impl_263.js:1
    at pubads_impl_263.js:1

Is there something I'm missing? Appreciate your help in advance.

collapseEmptyDivs does not appear to be working?

does it need to also be enabled when creating the tags inside google ad manager?

I noticed it's on by default in your install script, yet divs still take up space even when ads are not served

Plugins not working in nuxt: template or render function not defined

Hi, Thank you for your contributing this awesome plugins! I'm really enjoy from the extensions you created. I was trying to use it in Nuxt.js, by install the nuxt.config.js:

  plugins: [
    {
      src: '~plugins/vue-doubleclick.js',
      ssr: false
    }
  ],

and in folder plugins:

// vue-doubleclick.js
import Vue from "vue";
import DoubleClick from "vue-doubleclick";
let mappings = {
  rectangle: [
    { window: [0, 0], sizes: [[970, 90], [1200, 110], [728, 90], [970, 250]] }
  ]
};

Vue.use(DoubleClick, {
  id: "824093244.1534743783",
  mappings
});

but still get a error:

-- [Vue warn]: Failed to mount component: template or render function not defined.

Could you please help me to determine which error is? I repeat my error on codesandbox:

https://codesandbox.io/s/676py75yk

Thank you again for this plugins! 😄