search

mirror-media / plate-vue-dfp

A package for google dfp in framwork vue.
5 stars 3 forks source link

multiple components on the same page, getting error #3

Closed vesper8 closed 7 years ago

vesper8 commented 7 years ago

Hi there!

I'm trying out your package in a Laravel project and I managed to get it to load ads for the first component.

The problem is, unlike in your plate-vue hackernews demo where you load multiple ads in a single request. I am inserting multiple ad components in various parts of my code since my app is mostly using Laravel Blade templates and it isn't a fully vue application at all

On subsequent calls I am getting this error:

[Vue warn]: Error in mounted hook: 
(found in <VueDfpProvider> at /node_modules/kc-vue-dfp/DfpProvider.vue)
warn @ app.f300f44….js:1364
handleError @ app.f300f44….js:2245
callHook @ app.f300f44….js:3024
insert @ app.f300f44….js:3831
invokeInsertHook @ app.f300f44….js:5631
patch @ app.f300f44….js:5795
Vue._update @ app.f300f44….js:2789
updateComponent @ app.f300f44….js:2899
get @ app.f300f44….js:3214
Watcher @ app.f300f44….js:3197
mountComponent @ app.f300f44….js:2909
Vue$3.$mount @ app.f300f44….js:7956
Vue$3.$mount @ app.f300f44….js:9957
Vue._init @ app.f300f44….js:4455
Vue$3 @ app.f300f44….js:4536
(anonymous) @ app.f300f44….js:24073
__webpack_require__ @ app.f300f44….js:20
(anonymous) @ app.f300f44….js:52134
__webpack_require__ @ app.f300f44….js:20
(anonymous) @ app.f300f44….js:66
(anonymous) @ app.f300f44….js:69
app.f300f44….js:2249 TypeError: Cannot read property 'addService' of null
    at app.f300f44….js:25419
    at VueComponent.defineDfp (app.f300f44….js:25411)
    at VueComponent.boundFn [as defineDfp] (app.f300f44….js:926)
    at VueComponent.mounted (app.f300f44….js:25587)
    at callHook (app.f300f44….js:3022)
    at Object.insert (app.f300f44….js:3831)
    at invokeInsertHook (app.f300f44….js:5631)
    at Vue$3.patch [as __patch__] (app.f300f44….js:5795)
    at Vue$3.Vue._update (app.f300f44….js:2789)
    at Vue$3.updateComponent (app.f300f44….js:2899)

I imagine this might be because you have the enableSingleRequest set to true?

I notice that in your vue-plate demo that you have a DFP_OPTIONS set in the constants file but that this constant is never referenced.

It doesn't look like there's a way to override options such as the enableSingleRequest without altering the core package

I would really appreciate if you could help me out here. And it would be very handy to be able to override the default options as well if you could tell me how I can do that.

Many thanks!

vesper8 commented 7 years ago

oops my bad.. the problem was that I was trying to load an ad that didn't exist and this caused an error for all the ads that did exist

however i would still like to know how you can override the default options?

chiangkeith commented 7 years ago

@vesper8 thanks for your feedback. We understand it's necessary to have a way to override the default option and will implement it in days.

chiangkeith commented 7 years ago

@vesper8 just gave a way for overriding.

Put the props 'options' into <vue-dfp-provider>...</vue-dfp-provider> like:

<vue-dfp-provider :dfpUnits="dfpUnits" :dfpid="dfpid" section="home" :options="dfpOptions">
    ...
</vue-dfp-provider>

And the options would be an object like:

{
      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.

p.s. remember to do npm install plate-vue-dfp@latest