Wroking with Vue.js - Google not found

[IhToN]

I'm using the library 'vue-video-player' to use videojs within Vue, which by default works pretty neat.

The problem is that I'm trying to implement Google ADS using videojs-ima but I'm not getting any results but some errors.

The current initialization code is

  import {videoPlayer} from "vue-video-player";

  require('videojs-contrib-ads');
  require('videojs-youtube');
  require('videojs-contrib-hls');
  require('videojs-ima');

To implement the Ad, I'm using the player readied event in which I include the ima3.js library and initialize the ima options:

        let ima_script = document.createElement('script');
        ima_script.type = "text/javascript";
        ima_script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
        document.getElementsByTagName('head')[0].appendChild(ima_script);

        player.ima({
          id: 'videojs-player',
          adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=',
          disableFlashAds: true
        });

After trying to load it I get the next error: Safari - ReferenceError: Can't find variable: google Firefox - ReferenceError: Can't find variable: google

The video itself can be played but the ads doesn't appear at all.

Thanks in advance.

[shawnbuso]

Hmm it definitely looks like the ima3.js script is either not being loaded or not being loaded properly. If you open the console on the page are you able to create an AdsRequest with var adsRequest = new google.ima.AdsRequest();?

[shawnbuso]

Hey there - it's been a while since we've heard from you, so I'm going to close this out. If you're still seeing this issue, feel free to comment here and we can take re-open it. Thanks!

[dilburt]

Hi Shawn,

I'm running into a similar problem here where the symptom is a log entry of "[Error] ReferenceError: Can't find variable: google" from the line "const adsRequest = new google.ima.AdsRequest();" However, it appears that the root problem is that ima3.js isn't loading due to a CORS error that only occurs in Safari (Mac or iPhone). [Error] Blocked a frame with origin "https://" from accessing a frame with origin "https://**". Protocols, domains, and ports must match.\ This is followed by logging from ima3.js which is pretty cryptic: Nh (ima3.js:91)\ Oh (ima3.js:92)\ start (ima3.js:356:165)\ This is followed by logging from show_ads_impl.js (there is much, much more I didn't copy): Ft (show_ads_impl.js:1:162176)\ yt (show_ads_impl.js:1:171721)\ At (show_ads_impl.js:1:161025)\ uu (show_ads_impl.js:1:181688)\ (anonymous function) (show_ads_impl.js:1:48771)\ si (show_ads_impl.js:1:48481)\

Our systems are on AWS and the files being accessed are in an S3 bucket with standard AWS CORS headers that work for all other desktop and mobile browsers and have worked for Safari in the past so I'm not sure what changed. All ads for this are coming from Google (Doubleclick) servers. You can test this using Safari at: https://apps.facebook.com/applixirtest

Let me know if you have any idea why Safari is having a problem with this and why this is stopping ima3.js from loading.

Thanks,

Dean

[ponnamkarthik]

hello

Uncaught ReferenceError: google is not defined
    at SdkImpl.initAdObjects (videojs.ima.js?6665:1284)
    at SdkImpl.onPlayerReady (videojs.ima.js?6665:1623)
    at Controller.onPlayerReady (videojs.ima.js?6665:2276)
    at PlayerWrapper.onPlayerReady (videojs.ima.js?6665:282)
    at bound (video.cjs.js?3d33:2344)
    at eval (video.cjs.js?3d33:4563)

when tried this var adsRequest = new google.ima.AdsRequest(); in console same error google is not defined

I am able to fix this issue by following as below

// inside main.js
import LoadScript from "vue-plugin-load-script";

Vue.use(LoadScript);

Vue.loadScript("https://imasdk.googleapis.com/js/sdkloader/ima3.js")
  .then(() => {
    // Script is loaded, do something
    console.log("ima3 loaded");
  })
  .catch(() => {
    // Failed to fetch script
    console.log("ima3 load failed");
  });

[fredski02]

hello

Uncaught ReferenceError: google is not defined
    at SdkImpl.initAdObjects (videojs.ima.js?6665:1284)
    at SdkImpl.onPlayerReady (videojs.ima.js?6665:1623)
    at Controller.onPlayerReady (videojs.ima.js?6665:2276)
    at PlayerWrapper.onPlayerReady (videojs.ima.js?6665:282)
    at bound (video.cjs.js?3d33:2344)
    at eval (video.cjs.js?3d33:4563)

when tried this var adsRequest = new google.ima.AdsRequest(); in console same error google is not defined

I am able to fix this issue by following as below

// inside main.js
import LoadScript from "vue-plugin-load-script";

Vue.use(LoadScript);

Vue.loadScript("https://imasdk.googleapis.com/js/sdkloader/ima3.js")
  .then(() => {
    // Script is loaded, do something
    console.log("ima3 loaded");
  })
  .catch(() => {
    // Failed to fetch script
    console.log("ima3 load failed");
  });

What is your vue.config? I get CORS errors using this