Skip to content

Commit

Permalink
Internal change
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 346102840
  • Loading branch information
@Kiro705
Interactive Media Ads Developer Relations authored and Kiro705 committed Dec 7, 2020
1 parent ea0a48b commit 22de515
Show file tree
Hide file tree
Showing 13 changed files with 612 additions and 814 deletions.
48 changes: 32 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,44 @@
Google Ads HTML5 IMA SDK
------------------------
## Google Ads HTML5 IMA SDK

This project hosts samples for the [HTML5 IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/).
This project hosts samples for the
[HTML5 IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/).

### Samples Breakdown
* [Simple](https://github.com/googleads/googleads-ima-html5/tree/master/simple) - the bare minimum required for an IMA integration
* [Advanced](https://github.com/googleads/googleads-ima-html5/tree/master/advanced) - IMA integration with more advanced UI including event logging, play/pause, and fullscreen, and companion ads
* [Playlist](https://github.com/googleads/googleads-ima-html5/tree/master/playlist) - expands on the advanced sample to demonstrate an integration with a video playlist
* [VPAID](https://github.com/googleads/googleads-ima-html5/tree/master/vpaid) - Sample VPAID ads that work with the IMA SDK

* [Simple](https://github.com/googleads/googleads-ima-html5/tree/master/simple) -
the bare minimum required for an IMA integration
* [Advanced](https://github.com/googleads/googleads-ima-html5/tree/master/advanced) -
IMA integration with more advanced UI including event logging, play/pause,
and fullscreen, and companion ads
* [Playlist](https://github.com/googleads/googleads-ima-html5/tree/master/playlist) -
expands on the advanced sample to demonstrate an integration with a video
playlist
* [VPAID](https://github.com/googleads/googleads-ima-html5/tree/master/vpaid) -
Sample VPAID ads that work with the IMA SDK

### Requirements
* Your favorite text editor
* An HTML5 compliant browser
* A webserver on which to host the sample

* Your favorite text editor
* An HTML5 compliant browser
* A webserver on which to host the sample

### Downloads
Check out the [releases section](https://github.com/googleads/googleads-ima-html5/releases) for downloadable zips of the source.

Check out the
[releases section](https://github.com/googleads/googleads-ima-html5/releases)
for downloadable zips of the source.

### More Info
For more information, see the documentation at https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/.

For more information, see the documentation at
https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/.

### Announcements and Updates
For API and client library updates and news, please follow our [Google+ Ads Developers page](https://plus.google.com/+GoogleAdsDevelopers/posts) and our [Google Ads Developers blog](http://googleadsdeveloper.blogspot.com/)

Copyright 2013 Google Inc. All Rights Reserved.
You may study, modify, and use this example for any purpose.
Note that this example is provided "as is", WITHOUT WARRANTY of any kind either expressed or implied.
For API and client library updates and news, please follow our
[Google+ Ads Developers page](https://plus.google.com/+GoogleAdsDevelopers/posts)
and our [Google Ads Developers blog](http://googleadsdeveloper.blogspot.com/)

Copyright 2013 Google Inc. All Rights Reserved. You may study, modify, and use
this example for any purpose. Note that this example is provided "as is",
WITHOUT WARRANTY of any kind either expressed or implied.
62 changes: 20 additions & 42 deletions advanced/ads.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
// Note that this example is provided "as is", WITHOUT WARRANTY
// of any kind either expressed or implied.

goog.module('google3.personalization.zipit.frontend.javascript.external-javascript.ads.interactivemedia.sdk.clientside.samples.googleads-ima-html5.advanced.ads');

/**
* Shows how to use the IMA SDK to request and display ads.
*/
Expand All @@ -14,24 +16,17 @@ var Ads = function(application, videoPlayer) {
google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);
// Call setLocale() to localize language text and downloaded swfs
// google.ima.settings.setLocale('fr');
this.adDisplayContainer_ =
new google.ima.AdDisplayContainer(
this.videoPlayer_.adContainer,
this.videoPlayer_.contentPlayer,
this.customClickDiv_);
this.adDisplayContainer_ = new google.ima.AdDisplayContainer(
this.videoPlayer_.adContainer, this.videoPlayer_.contentPlayer,
this.customClickDiv_);
this.adsLoader_ = new google.ima.AdsLoader(this.adDisplayContainer_);
this.adsManager_ = null;

this.adsLoader_.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
this.onAdsManagerLoaded_,
false,
this);
this.onAdsManagerLoaded_, false, this);
this.adsLoader_.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
this.onAdError_,
false,
this);
google.ima.AdErrorEvent.Type.AD_ERROR, this.onAdError_, false, this);
};

// On iOS and Android devices, video playback must begin in a user action.
Expand Down Expand Up @@ -92,35 +87,22 @@ Ads.prototype.startAdsManager_ = function(adsManager) {
// Attach the pause/resume events.
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
this.onContentPauseRequested_,
false,
this);
this.onContentPauseRequested_, false, this);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
this.onContentResumeRequested_,
false,
this);
this.onContentResumeRequested_, false, this);
// Handle errors.
adsManager.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
this.onAdError_,
false,
this);
var events = [google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
google.ima.AdEvent.Type.CLICK,
google.ima.AdEvent.Type.COMPLETE,
google.ima.AdEvent.Type.FIRST_QUARTILE,
google.ima.AdEvent.Type.LOADED,
google.ima.AdEvent.Type.MIDPOINT,
google.ima.AdEvent.Type.PAUSED,
google.ima.AdEvent.Type.STARTED,
google.ima.AdEvent.Type.THIRD_QUARTILE];
google.ima.AdErrorEvent.Type.AD_ERROR, this.onAdError_, false, this);
var events = [
google.ima.AdEvent.Type.ALL_ADS_COMPLETED, google.ima.AdEvent.Type.CLICK,
google.ima.AdEvent.Type.COMPLETE, google.ima.AdEvent.Type.FIRST_QUARTILE,
google.ima.AdEvent.Type.LOADED, google.ima.AdEvent.Type.MIDPOINT,
google.ima.AdEvent.Type.PAUSED, google.ima.AdEvent.Type.STARTED,
google.ima.AdEvent.Type.THIRD_QUARTILE
];
for (var index in events) {
adsManager.addEventListener(
events[index],
this.onAdEvent_,
false,
this);
adsManager.addEventListener(events[index], this.onAdEvent_, false, this);
}

var initWidth, initHeight;
Expand All @@ -131,10 +113,7 @@ Ads.prototype.startAdsManager_ = function(adsManager) {
initWidth = this.videoPlayer_.width;
initHeight = this.videoPlayer_.height;
}
adsManager.init(
initWidth,
initHeight,
google.ima.ViewMode.NORMAL);
adsManager.init(initWidth, initHeight, google.ima.ViewMode.NORMAL);

adsManager.start();
};
Expand All @@ -160,8 +139,7 @@ Ads.prototype.onAdEvent_ = function(adEvent) {
this.application_.adClicked();
} else if (adEvent.type == google.ima.AdEvent.Type.LOADED) {
var ad = adEvent.getAd();
if (!ad.isLinear())
{
if (!ad.isLinear()) {
this.onContentResumeRequested_();
}
}
Expand Down
44 changes: 13 additions & 31 deletions advanced/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,35 @@
// Note that this example is provided "as is", WITHOUT WARRANTY
// of any kind either expressed or implied.

goog.module('google3.personalization.zipit.frontend.javascript.external-javascript.ads.interactivemedia.sdk.clientside.samples.googleads-ima-html5.advanced.application');

/**
* Handles user interaction and creates the player and ads controllers.
*/
var Application = function() {
this.adTagBox_ = document.getElementById('tagText');
this.sampleAdTag_ = document.getElementById('sampleAdTag');
this.sampleAdTag_.addEventListener(
'click',
this.bind_(this, this.onSampleAdTagClick_),
false);
'click', this.bind_(this, this.onSampleAdTagClick_), false);
this.console_ = document.getElementById('console');
this.playButton_ = document.getElementById('playpause');
this.playButton_.addEventListener(
'click',
this.bind_(this, this.onClick_),
false);
'click', this.bind_(this, this.onClick_), false);
this.fullscreenButton_ = document.getElementById('fullscreen');
this.fullscreenButton_.addEventListener(
'click',
this.bind_(this, this.onFullscreenClick_),
false);
'click', this.bind_(this, this.onFullscreenClick_), false);

this.fullscreenWidth = null;
this.fullscreenHeight = null;

var fullScreenEvents = [
'fullscreenchange',
'mozfullscreenchange',
'webkitfullscreenchange'];
var fullScreenEvents =
['fullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange'];
for (key in fullScreenEvents) {
document.addEventListener(
fullScreenEvents[key],
this.bind_(this, this.onFullscreenChange_),
fullScreenEvents[key], this.bind_(this, this.onFullscreenChange_),
false);
}


this.playing_ = false;
this.adsActive_ = false;
this.adsDone_ = false;
Expand Down Expand Up @@ -142,10 +134,8 @@ Application.prototype.onClick_ = function() {
Application.prototype.onFullscreenClick_ = function() {
if (this.fullscreen) {
// The video is currently in fullscreen mode
var cancelFullscreen = document.exitFullscreen ||
document.exitFullScreen ||
document.webkitCancelFullScreen ||
document.mozCancelFullScreen;
var cancelFullscreen = document.exitFullscreen || document.exitFullScreen ||
document.webkitCancelFullScreen || document.mozCancelFullScreen;
if (cancelFullscreen) {
cancelFullscreen.call(document);
} else {
Expand Down Expand Up @@ -190,16 +180,10 @@ Application.prototype.onFullscreenChange_ = function() {
if (this.fullscreen) {
// The user just exited fullscreen
// Resize the ad container
this.ads_.resize(
this.videoPlayer_.width,
this.videoPlayer_.height);
this.ads_.resize(this.videoPlayer_.width, this.videoPlayer_.height);
// Return the video to its original size and position
this.videoPlayer_.resize(
'relative',
'',
'',
this.videoPlayer_.width,
this.videoPlayer_.height);
'relative', '', '', this.videoPlayer_.width, this.videoPlayer_.height);
this.fullscreen = false;
} else {
// The fullscreen button was just clicked
Expand All @@ -214,9 +198,7 @@ Application.prototype.onFullscreenChange_ = function() {
};

Application.prototype.makeAdsFullscreen_ = function() {
this.ads_.resize(
this.fullscreenWidth,
this.fullscreenHeight);
this.ads_.resize(this.fullscreenWidth, this.fullscreenHeight);
};

Application.prototype.onContentEnded_ = function() {
Expand Down
13 changes: 5 additions & 8 deletions advanced/video_player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
// Note that this example is provided "as is", WITHOUT WARRANTY
// of any kind either expressed or implied.

goog.module('google3.personalization.zipit.frontend.javascript.external-javascript.ads.interactivemedia.sdk.clientside.samples.googleads-ima-html5.advanced.video_player');

/**
* Handles video player functionality.
*/
Expand All @@ -22,9 +24,7 @@ VideoPlayer.prototype.preloadContent = function(contentLoadedAction) {
if (this.isMobilePlatform()) {
this.preloadListener_ = contentLoadedAction;
this.contentPlayer.addEventListener(
'loadedmetadata',
contentLoadedAction,
false);
'loadedmetadata', contentLoadedAction, false);
this.contentPlayer.load();
} else {
contentLoadedAction();
Expand All @@ -34,9 +34,7 @@ VideoPlayer.prototype.preloadContent = function(contentLoadedAction) {
VideoPlayer.prototype.removePreloadListener = function() {
if (this.preloadListener_) {
this.contentPlayer.removeEventListener(
'loadedmetadata',
this.preloadListener_,
false);
'loadedmetadata', this.preloadListener_, false);
this.preloadListener_ = null;
}
};
Expand All @@ -55,8 +53,7 @@ VideoPlayer.prototype.isMobilePlatform = function() {
navigator.userAgent.toLowerCase().indexOf('android') > -1);
};

VideoPlayer.prototype.resize = function(
position, top, left, width, height) {
VideoPlayer.prototype.resize = function(position, top, left, width, height) {
this.videoPlayerContainer_.style.position = position;
this.videoPlayerContainer_.style.top = top + 'px';
this.videoPlayerContainer_.style.left = left + 'px';
Expand Down
36 changes: 12 additions & 24 deletions attempt_to_autoplay/ads.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.

goog.module('google3.personalization.zipit.frontend.javascript.external-javascript.ads.interactivemedia.sdk.clientside.samples.googleads-ima-html5.attempt_to_autoplay.ads');

var adsManager;
var adsLoader;
var adDisplayContainer;
Expand Down Expand Up @@ -92,12 +94,9 @@ function setUpIMA() {
// Listen and respond to ads loaded and error events.
adsLoader.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
onAdsManagerLoaded,
false);
onAdsManagerLoaded, false);
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError,
false);
google.ima.AdErrorEvent.Type.AD_ERROR, onAdError, false);

// An event listener to tell the SDK that our content video
// is completed so the SDK can play any post-roll ads.
Expand Down Expand Up @@ -161,37 +160,26 @@ function onAdsManagerLoaded(adsManagerLoadedEvent) {
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
// videoContent should be set to the content video element.
adsManager = adsManagerLoadedEvent.getAdsManager(
videoContent, adsRenderingSettings);
adsManager =
adsManagerLoadedEvent.getAdsManager(videoContent, adsRenderingSettings);
// Mute the ad if doing muted autoplay.
const adVolume = (autoplayAllowed && autoplayRequiresMuted) ? 0 : 1;
adsManager.setVolume(adVolume);

// Add listeners to the required events.
adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
adsManager.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
onContentPauseRequested);
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);
google.ima.AdEvent.Type.ALL_ADS_COMPLETED, 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.LOADED, onAdEvent);
adsManager.addEventListener(google.ima.AdEvent.Type.STARTED, onAdEvent);
adsManager.addEventListener(google.ima.AdEvent.Type.COMPLETE, onAdEvent);

if (autoplayAllowed) {
playAds();
Expand Down
Loading

0 comments on commit 22de515

Please sign in to comment.