kc-vue-dfp

A package for google dfp in framwork vue.

lib/index.js

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 kc-vue-dfp@latest --save

Then, just import it like:

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

And with a few steps like:

1、 have VueDfpProvider be a component:
``javascript

`

2、 have to compose an object, its structure looks like:
`javascript
adunits: {
'section-id': {
'POSITION1': {
'aduid': 'ADUNIT-ID-1'
, 'dimensions': '970x250'
, 'cont-class': [ 'class-1', 'center' ]
},
'POSITION2': {
'aduid': 'ADUNIT-ID-2'
, 'dimensions':'300x250,320x250'
, 'cont-class': [ 'class-1' ]
}
}
}
`
Put object adunits to data:
`javascript
export default {
...
data() {
return {
dfpid: '40170002',
dfpUnits: adunits,
sectionId: 'section-id'
}
},
...
}
`

3、 do some markups in template:
`javascript

`

Then, the template will be rendered to:
`javascript



``

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

More

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