plate-vue-dfp

A package for google dfp in framework vue.

This package is inspired by dfp-vue as well as 埋設 DFP - DoubleClick for Publishers 廣告, and takes both of them as reference.

Usage

Installing this package from npm like:

$ npm install plate-vue-dfp@latest --save

Then, just import it like:

import VueDfpProvider from 'plate-vue-dfp/DfpProvider.vue';

Do with following steps in any vue file where you want to put dfp ad:

$3

``javascript

`

$3

`javascript
adunits: {
'section-id': {
'POSITION1': {
'aduid': 'ADUNIT-ID-1'
, 'dimensions': '970x250'
, 'cont-class': [ 'ad-container', 'class-1', 'center' ]
// notice: class 'ad-container' is required.
, 'cont-style': [ '' ]
},
'POSITION2': {
'aduid': 'ADUNIT-ID-2'
, 'dimensions':'300x250,320x250'
, 'cont-class': [ 'ad-container', 'class-1' ]
, 'cont-style': [ '' ]
}
},
'section-id2': {
...
}
}
`

then, put object adunits to data:

`javascript
export default {
...
data() {
return {
dfpid: '40170002',
dfpUnits: adunits,
sectionId: 'section-id'
}
},
...
}
`

$3


`html

`

Then, the template above will be rendered to:
`html



`

As soon as the DFP code is loaded, the DFP ad will be show correctly.

How to override the DFP options

Put the props 'options' into ... like:

`html

...

`

And the options would be an object like:

`javascript
{
setTargeting: {},
setCategoryExclusion: '',
setLocation: {},
enableSingleRequest: true,
collapseEmptyDivs: 'original',
companionAds: true,
refreshExisting: true,
disablePublisherConsole: false,
disableInitialLoad: true,
setCentering: false,
noFetch: false,
afterEachAdLoaded: (event) => {},
}
``

What a pity is this tool doesn't implement all options of DFP_OPTIONS yet at this moment. If any, we could implement them for you.

More

See how to use it in mirror-media/plate-vue.