https://github.com/ablypl/vue-dfp

https://github.com/ablypl/vue-dfp

doubleclick-for-publishers google npm vuejs

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ablypl/vue-dfp
• Owner: ablypl
• Created: 2017-05-16T14:01:17.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-18T16:34:30.000Z (over 5 years ago)
• Last Synced: 2024-08-09T08:58:11.375Z (5 months ago)
• Topics: doubleclick-for-publishers, google, npm, vuejs
• Language: JavaScript
• Size: 13.7 KB
• Stars: 14
• Watchers: 2
• Forks: 8
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Vue DoubleClick for Publishers

## Installation

```

npm install vue-doubleclick

```

Then require the plugin in you js file:

```javascript

import DoubleClick from 'vue-doubleclick';

Vue.use(DoubleClick, {

    id: '{your-dfp-id}'

});

```

Afterwards you can you BannerAd component:

```html

```

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

```html

```

## Mappings

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

```javascript

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:

```javascript

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: 

```javascript

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

```javascript

Vue.use(DoubleClick, {

    id: '{your-dfp-id}',

    sizes

});

```

Contributing

------------

Any and all contributions will be greatly appreciated.