Videogular 2 Ima implementation in Ionic


#1

Hi, I use Videogular 2 on Ionic 3.
I follow this tutorial (https://videogular.github.io/videogular2/modules/ima-ads/) for the implementation. But when Videogular tries to load ads on VgImaAds.loadAds method, it gives this error ‘googletag is not defined’. I have imported every module needed in App.module.ts.Here is the imports in App.module.ts.

imports: [
    IonicModule.forRoot(MyApp,{
      backButtonText:'',
      backButtonIcon:'arrow-back',
      iconMode:'md',
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
    }),
    IonicStorageModule.forRoot(),
    BrowserModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
    VgImaAdsModule]

Here is my page’s component html.

<ion-content>
    <vg-player id="demo-player">
        <vg-ima-ads
            [vgCompanion]="'companion-ad'"
            [vgCompanionSize]="[728, 90]"
            [vgNetwork]="'6062'"
            [vgUnitPath]="'iab_vast_samples'"
            [vgAdTagUrl]="'http://pubads.g.doubleclick.net/gampad/ads?sz=640x360&iu=/20277799247/Tv8-App-Preroll&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&url=[referrer_url]&description_url=[description_url]&correlator='"
            [vgSkipButton]="'.skip-button'">
        </vg-ima-ads>

        <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
            <source [src]="liveStreamLink" type="application/x-mpegURL">
        </video>
    </vg-player>
    <div class='skip-button'>custom skip ad button</div>
    <div id="companion-ad"></div>
</ion-content>

Also, i have added the <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script> tag in the head section of index.html. But apparently, it can’t find the googletag property of this script on VgImaAds.loadAds . What should i do?


#2

If that is your exact <script> tag, it appears to be missing an https: in the front of its src attribute.