Last active
November 14, 2024 05:56
-
-
Save astein/32f776278856e36474a1 to your computer and use it in GitHub Desktop.
Example of using Google IMA SDK for HTML5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // video DOM inside creative | |
| //<div id="videoContainer"> | |
| // <video id="videoContainer"></video> | |
| //</div> | |
| // load IMA SDK at init load time | |
| $.getScript('//imasdk.googleapis.com/js/sdkloader/ima3.js'); | |
| // usage: startVideo( /* vast tag url */ ); | |
| // set width and height according to video size in creative | |
| var VIDEO_WIDTH = 600; | |
| var VIDEO_HEIGHT = 380; | |
| var adsManager; | |
| var adsLoader; | |
| var adDisplayContainer; | |
| var intervalTimer; | |
| var videoContent = document.getElementById('videoContainer'); | |
| function startVideo(vast_tag) { | |
| requestAds(vast_tag); | |
| } | |
| function createAdDisplayContainer() { | |
| // We assume the adContainer is the DOM id of the element that will house | |
| // the ads. | |
| adDisplayContainer = | |
| new google.ima.AdDisplayContainer( | |
| document.getElementById('adContainer'), videoContent); | |
| } | |
| function requestAds(vast_tag) { | |
| // Create the ad display container. | |
| createAdDisplayContainer(); | |
| // Initialize the container. Must be done via a user action on mobile devices. | |
| adDisplayContainer.initialize(); | |
| videoContent.load(); | |
| // Create ads loader. | |
| adsLoader = new google.ima.AdsLoader(adDisplayContainer); | |
| // Set VPAID Mode to Enabled | |
| adsLoader.getSettings().setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED); | |
| adsLoader.getSettings().setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.INSECURE); | |
| // Listen and respond to ads loaded and error events. | |
| adsLoader.addEventListener( | |
| google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, | |
| onAdsManagerLoaded, | |
| false); | |
| adsLoader.addEventListener( | |
| google.ima.AdErrorEvent.Type.AD_ERROR, | |
| onAdError, | |
| false); | |
| // Request video ads. | |
| var adsRequest = new google.ima.AdsRequest(); | |
| // autoplay ad | |
| adsRequest.setAdWillAutoPlay(true); | |
| adsRequest.adTagUrl = vast_tag; | |
| // Specify the linear and nonlinear slot sizes. This helps the SDK to | |
| // select the correct creative if multiple are returned. | |
| adsRequest.linearAdSlotWidth = VIDEO_WIDTH; | |
| adsRequest.linearAdSlotHeight = VIDEO_HEIGHT; | |
| adsRequest.nonLinearAdSlotWidth = VIDEO_WIDTH; | |
| adsRequest.nonLinearAdSlotHeight = VIDEO_HEIGHT; | |
| adsLoader.requestAds(adsRequest); | |
| } | |
| function onAdsManagerLoaded(adsManagerLoadedEvent) { | |
| // Get the ads manager. | |
| var adsRenderingSettings = new google.ima.AdsRenderingSettings(); | |
| adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; | |
| adsRenderingSettings.bitrate = 1000; | |
| // videoContent should be set to the content video element. | |
| adsManager = adsManagerLoadedEvent.getAdsManager( | |
| videoContent, adsRenderingSettings); | |
| // Add listeners to the required events. | |
| adsManager.addEventListener( | |
| google.ima.AdErrorEvent.Type.AD_ERROR, | |
| onAdError); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, | |
| onContentPauseRequested); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, | |
| onContentResumeRequested); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.ALL_ADS_COMPLETED, | |
| onAdEvent); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.CLICK, | |
| onAdEvent); | |
| // Listen to any additional events, if necessary. | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.LOADED, | |
| onAdEvent); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.STARTED, | |
| onAdEvent); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.COMPLETE, | |
| onAdEvent); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.FIRST_QUARTILE, | |
| onAdEvent); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.MIDPOINT, | |
| onAdEvent); | |
| adsManager.addEventListener( | |
| google.ima.AdEvent.Type.THIRD_QUARTILE, | |
| onAdEvent); | |
| try { | |
| // Initialize the ads manager. Ad rules playlist will start at this time. | |
| adsManager.init(VIDEO_WIDTH, VIDEO_HEIGHT, google.ima.ViewMode.NORMAL); | |
| // Call play to start showing the ad. Single video and overlay ads will | |
| // start at this time; the call will be ignored for ad rules. | |
| adsManager.start(); | |
| } catch (adError) { | |
| // An error may be thrown if there was a problem with the VAST response. | |
| videoContent.play(); | |
| } | |
| } | |
| function onAdEvent(adEvent) { | |
| // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED) | |
| // don't have ad object associated. | |
| var ad = adEvent.getAd(); | |
| switch (adEvent.type) { | |
| case google.ima.AdEvent.Type.LOADED: | |
| // console.log('loaded'); | |
| // This is the first event sent for an ad - it is possible to | |
| // determine whether the ad is a video ad or an overlay. | |
| if (!ad.isLinear()) { | |
| // Position AdDisplayContainer correctly for overlay. | |
| // Use ad.width and ad.height. | |
| videoContent.play(); | |
| } | |
| break; | |
| case google.ima.AdEvent.Type.STARTED: | |
| // only hide the content element (video overlay) when ad starts. | |
| $('#contentElement').hide(); | |
| TXM.api.track('multimedia', 'video_started', 'vast_video'); | |
| // This event indicates the ad has started - the video player | |
| // can adjust the UI, for example display a pause button and | |
| // remaining time. | |
| if (ad.isLinear()) { | |
| // For a linear ad, a timer can be started to poll for | |
| // the remaining time. | |
| intervalTimer = setInterval( | |
| function() { | |
| var remainingTime = adsManager.getRemainingTime(); | |
| }, | |
| 300); // every 300ms | |
| } | |
| break; | |
| case google.ima.AdEvent.Type.COMPLETE: | |
| TXM.api.track('multimedia', 'video_completed', 'vast_video'); | |
| if (ad.isLinear()) { | |
| clearInterval(intervalTimer); | |
| } | |
| break; | |
| case google.ima.AdEvent.Type.ALL_ADS_COMPLETED: | |
| break; | |
| case google.ima.AdEvent.Type.CLICK: | |
| (function() { | |
| var prop; | |
| var currentAd = adEvent.getAd(); | |
| var clickThroughUrl; | |
| // Clickthrough parameter is obfuscated in IMA3. We loopthrough the properties of the | |
| // ad and search for a "clickThroughUrl" attribute. We track it if we find one. | |
| for(prop in ad) { | |
| clickThroughUrl = ad[prop].clickThroughUrl; | |
| if (clickThroughUrl !== undefined && clickThroughUrl !== null) { | |
| break; | |
| } | |
| } | |
| if (clickThroughUrl) { | |
| TXM.api.track('navigation', 'external_page', 'vast_clickthrough'); | |
| } | |
| }()); | |
| break; | |
| // video quartile tracking | |
| case google.ima.AdEvent.Type.FIRST_QUARTILE: | |
| TXM.api.track('multimedia', 'video_first_quartile', 'vast_video'); | |
| break; | |
| case google.ima.AdEvent.Type.MIDPOINT: | |
| TXM.api.track('multimedia', 'video_second_quartile', 'vast_video'); | |
| break; | |
| case google.ima.AdEvent.Type.THIRD_QUARTILE: | |
| TXM.api.track('multimedia', 'video_third_quartile', 'vast_video'); | |
| break; | |
| } | |
| } | |
| function onAdError(adErrorEvent) { | |
| adsManager.destroy(); | |
| } | |
| function onContentPauseRequested() { | |
| videoContent.pause(); | |
| } |
I would like a help because I still can not put the IMA SDK and do not do tests for not knowing much of JavaScript, is this my code that I generated ad manage:
https://pubads.g.doubleclick.net/gampad/live/ads?iu=/20842751/PescWeb&description_url=http%3A%2F%2Fpescweb.com%2Fgoogleads%2Fsimple%2F&env=vp&impl=s&correlator=&tfcd=0&npa=0&gdfp_req=1&output=vast&sz=1x1|640x480&ciu_szs=320x50&min_ad_duration=30000&max_ad_duration=60000&unviewed_position_start=1
Can someone help me?
Hi! I am trying to get a VAST tag to autoplay on page load.
I have this for my video content:
<video id="content" class=${styles.content} playsInLine autoPlay >
and I have set:
adsRequest.setAdWillAutoPlay(true);
but the ad is not autoplaying... I have tried removing and keeping playsinline, I have tried camel case and all lowercase for both playsinline and autoplay, I have tried to add muted, but nothing seems to work.
Any ideas on what it could be?
(this is a react app by the way, if that makes a difference)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi, in "Google IMA SDK for HTML5" examples
I found title 'Request video ads' with below code
I want to ask what is adTagUrl , and where it come from? and I found your example is not use it？