Posts tagged with vue.js

THE SITUATION:

I am trying to display preroll ads videos on my app.

I have two different adTagUrl.
One works fine and the preroll ad is displayed.
The other doesn't, and I get an empty VAST response instead.

I thought there may be something wrong in the code, so I recreate a basic small app taking the code from the google IMA repo example.

The results is the same. One work and the other doesn't.

THE ERROR:

errorCode: 1009 errorMessage: "The VAST response document is empty." type: "adLoadError" 

VAST INSPECTOR:

If I check the VAST ad response using the Google Video Suite Inspector, both the adTagUrl work.

THE CODE:

The code is very straightforward, taken from the google IMA example repo:

var adsRequest = new google.ima.AdsRequest(); adsRequest.adTagUrl = 'MY_TAG_URL'; adsRequest.linearAdSlotWidth = 640; adsRequest.linearAdSlotHeight = 400; adsRequest.nonLinearAdSlotWidth = 640; adsRequest.nonLinearAdSlotHeight = 150; adsLoader.requestAds(adsRequest); 

THE QUESTION:

Why am I getting that error?

How it's possible that the adTagUrl works fine in the Vast Inspector, but it doesn't work when I request it from the code?

I have a nuxt App which makes use of the nuxt community module gtm-module: https://github.com/nuxt-community/gtm-module/ which takes care of google tag manager stuff.

I now have the case that I need to add Adwords into the mix. According to this source (https://support.google.com/google-ads/answer/7548399?hl=en#adapt_gtag) it should be easy to just add another config id – the AW-CONVERSION_ID – to my global site tag.

Unfortunately the gtm-module does neither describe how to handle Adwords nor how to add custom stuff to the site tag.

<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID">   </script> <script>window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());   gtag('config', 'GA_TRACKING_ID');   gtag('config','AW-CONVERSION_ID'); // THIS IS WHAT I NEED ADDITIONALLY</script> 

Does anyone know how I could accomplish the described solution here (https://support.google.com/google-ads/answer/7548399?hl=en#adapt_gtag) but with the nuxt gtm community module?

Help is very much appreciated.

Cheers

THE SITUATION:

In my Vue app I need to show ads using the Google IMA sdk.
However it seems that the AdDisplayContainer it's stuck in an endless update loop.

JSFIDDLE:

I have recreated the issue on JsFiddle with a bare minimum example. You can check the error in the console.

https://jsfiddle.net/fraMussi/53f6vbjh/7/

As you can see there isn't much going on:

  • I import the google IMA sdk
  • I have basic markup for the video and ad container
  • I setup the adDisplayContainer
  • I have added a watcher to detect the issue

THE CODE:

this.adDisplayContainer = new google.ima.AdDisplayContainer(         this.$refs.adContainer, this.videoContent); 

THE ERROR:

It seems that it adDisplayContainer gets updated in a loop:

Error in nextTick: "RangeError: Maximum call stack size exceeded" <br> RangeError: Maximum call stack size exceeded 

In a production-like environment I get a similar error message:

InternalError: too much recursion 

THE QUESTION:

Do you know why is this happening and how to fix it?