AdSense for Games > In-Game Video Ads > Game Launcher > Interactive Media Ads SDKs > IMA SDK for HTML5
233 views
Skip to first unread message
Sameera Rathnayaka
Jun 1, 2023, 12:02:41 PM6/1/23
to Interactive Media Ads SDK
Hello Google HTML5 Games team,
This is Sameera.
My game website has been approved for;
> Google AdSense for Display Ads
> Google AdSense for HTML5 Games
So, my game website developer is trying to integrate the "Interactive Media Ads SDKs > IMA SDK for HTML5".
I want to show IN-GAME VIDEO ADS in my HTML5 game on my game website.
My game website developer implemented the codes into a game and there is a video too. But, we don't need any videos in the HTML5 games. Therefore, how can we remove the video from the game when implementing the codes into the game?
Furthermore, we don't need any additional PLAY button as there is a PLAY button in the game to start the game.
I have attached my game website developer's code integration files with this email. So, can you tell me how to remove the video from the game when implementing the codes. Further, can you tell me how to remove the additional PLAY button connected with the video when implementing the codes into the game.
I have attached an image too. This image shows a video above the game when opening the game.
I have shared two files on Google Drive. One file is the Pool 8 Ball HTML5 game file and the other file is the ads.js file.
Moreover, can you tell me how to integrate the game launcher into the html file or other game file instead of adding the video content.
========================================
The AdSense for video and AdSense for games products use a very different tagging structure from AdSense for content. They require an Interactive Media Ads (IMA) tag, and only return ads when called with a video player or game launcher capable of Google IMA SDK integration and/or VAST and VPAID compliance.
===========================================
I want to show IN-GAME VIDEO ADS in my HTML5 game on my game website.
It is better if you can send me these three files with correct coding for my game. That means can you correct the wrong coding in the files and send me the three files with correct coding. Then, I will be able to integrate those codes into the other games too.
This will be really helpful
I look forward to hearing from you
Thank you
Sameera
Sameera Rathnayaka
Jun 1, 2023, 4:22:46 PM6/1/23
to Interactive Media Ads SDK
Hello Google Support Team,
I have pasted the HTML file, Style.CSS file and ads.js file which we integrated to our game.
HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pool 8 Ball</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<script async
data-ad-client="ca-pub-1741583920592616"
data-ad-frequency-hint="30s"
</script>
<script>
window.adsbygoogle = window.adsbygoogle || [];
var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
</script>
<meta name="generator" content="Scirra Construct">
<meta name="author" content="Muscle-SS">
<meta name="description" content="game">
<link rel="manifest" href="appmanifest.json">
<link rel="apple-touch-icon" sizes="128x128" href="icons/icon-128.png">
<link rel="apple-touch-icon" sizes="256x256" href="icons/icon-256.png">
<link rel="icon" type="image/png" href="icons/icon-256.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page-content">
<div id="video-container">
<video id="video-element">
</video>
<div id="ad-container"></div>
</div>
<button id="play-button">Play</button>
</div>
<script src="ads.js"></script>
<script>
if (location.protocol.substr(0, 4) === "file")
{
alert("Web exports won't work until you upload them. (When running on the file: protocol, browsers block many features from working for security reasons.)");
}
</script>
<script src="box2d.wasm.js"></script>
<noscript>
<div id="notSupportedWrap">
<h2 id="notSupportedTitle">This content requires JavaScript</h2>
<p class="notSupportedMessage">JavaScript appears to be disabled. Please enable it to view this content.</p>
</div>
</noscript>
<script src="scripts/supportcheck.js"></script>
<script src="scripts/offlineclient.js" type="module"></script>
<script src="scripts/main.js" type="module"></script>
<script src="scripts/register-sw.js" type="module"></script>
</body>
</html>
Style.CSS file
html, body {
padding: 0;
margin: 0;
overflow: hidden;
background: #000000;
color: white;
}
html, body, canvas {
touch-action: none;
touch-action-delay: none;
}
#page-content {
position: relative;
/* this element's width controls the effective height */
/* of the video container's padding-bottom */
max-width: 640px;
margin: 10px auto;
}
#video-container {
position: relative;
/* forces the container to match a 16x9 aspect ratio */
/* replace with 75% for a 4:3 aspect ratio, if needed */
padding-bottom: 56.25%;
}
#video-element {
/* forces the contents to fill the container */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#ad-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#notSupportedWrap {
margin: 2em auto 1em auto;
width: 75%;
max-width: 45em;
border: 2px solid #aaa;
border-radius: 1em;
padding: 2em;
background-color: #f0f0f0;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
color: black;
}
#notSupportedTitle {
font-size: 1.8em;
}
.notSupportedMessage {
font-size: 1.2em;
}
.notSupportedMessage em {
color: #888;
}
/* bbcode styles */
.bbCodeH1 {
font-size: 2em;
font-weight: bold;
}
.bbCodeH2 {
font-size: 1.5em;
font-weight: bold;
}
.bbCodeH3 {
font-size: 1.25em;
font-weight: bold;
}
.bbCodeH4 {
font-size: 1.1em;
font-weight: bold;
}
.bbCodeItem::before {
content: " • ";
}
/* screen reader text */
.c3-screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
ads.js file
var videoElement;
// Define a variable to track whether there are ads loaded and initially set it to false
var adsLoaded = false;
var adContainer;
var adDisplayContainer;
var adsLoader;
var adsManager;
window.addEventListener('load', function(event) {
videoElement = document.getElementById('video-element');
initializeIMA();
videoElement.addEventListener('play', function(event) {
loadAds(event);
});
var playButton = document.getElementById('play-button');
playButton.addEventListener('click', function(event) {
videoElement.play();
});
});
window.addEventListener('resize', function(event) {
console.log("window resized");
if(adsManager) {
var width = videoElement.clientWidth;
var height = videoElement.clientHeight;
adsManager.resize(width, height, google.ima.ViewMode.NORMAL);
}
});
function initializeIMA() {
console.log("initializing IMA");
adContainer = document.getElementById('ad-container');
adContainer.addEventListener('click', adContainerClick);
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
adsLoader = new google.ima.AdsLoader(adDisplayContainer);
adsLoader.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
onAdsManagerLoaded,
false);
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError,
false);
// Let the AdsLoader know when the video has ended
videoElement.addEventListener('ended', function() {
adsLoader.contentComplete();
});
function adContainerClick(event) {
console.log("ad container clicked");
if(videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
}
function onAdsManagerLoaded(adsManagerLoadedEvent) {
// Instantiate the AdsManager from the adsLoader response and pass it the video element
adsManager = adsManagerLoadedEvent.getAdsManager(
videoElement);
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.LOADED,
onAdLoaded);
}
function onAdLoaded(adEvent) {
var ad = adEvent.getAd();
if (!ad.isLinear()) {
videoElement.play();
}
}
function onAdError(adErrorEvent) {
// Handle the error logging.
console.log(adErrorEvent.getError());
if(adsManager) {
adsManager.destroy();
}
}
function onContentPauseRequested() {
videoElement.pause();
}
function onContentResumeRequested() {
videoElement.play();
}
var adsRequest = new google.ima.AdsRequest();
'iu=/21775744923/external/single_ad_samples&sz=640x480&' +
'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&' +
'gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=';
// Specify the linear and nonlinear slot sizes. This helps the SDK to
// select the correct creative if multiple are returned.
adsRequest.linearAdSlotWidth = videoElement.clientWidth;
adsRequest.linearAdSlotHeight = videoElement.clientHeight;
adsRequest.nonLinearAdSlotWidth = videoElement.clientWidth;
adsRequest.nonLinearAdSlotHeight = videoElement.clientHeight / 3;
// Pass the request to the adsLoader to request ads
adsLoader.requestAds(adsRequest);
}
function loadAds(event) {
// Prevent this function from running on if there are already ads loaded
if(adsLoaded) {
return;
}
adsLoaded = true;
// Prevent triggering immediate playback when ads are loading
event.preventDefault();
console.log("loading ads");
// Initialize the container. Must be done via a user action on mobile devices.
videoElement.load();
adDisplayContainer.initialize();
var width = videoElement.clientWidth;
var height = videoElement.clientHeight;
try {
adsManager.init(width, height, google.ima.ViewMode.NORMAL);
adsManager.start();
} catch (adError) {
// Play the video without ads, if an error occurs
console.log("AdsManager could not be started");
videoElement.play();
}
}
Then, a video was also shown above the game when opening the HTML5 game.
So, now we want to know how to remove the video from the HTML5 game.
I want to show IN-GAME VIDEO ADS in my HTML5 game on my game website.
It is better if you can send me these three files (HTML file, Style.CSS file & ads.js file) with correct coding for my game. That means can you correct the wrong coding in the files and send me the three files with correct coding. Then, I will be able to integrate those codes into the other games too.
This will be really helpful
I look forward to hearing from you
Thank you
Sameera
Sameera Rathnayaka
Jun 1, 2023, 5:00:06 PM6/1/23
to Interactive Media Ads SDK
Hello Google Support Team,
I want to tell you that all of my HTML5 games are played on my Game Website and there is NO any App for my HTML5 games.
So, I would like to know the implementation for the web based Game Website.
Thank you
Sameera
Sameera Rathnayaka
Jun 2, 2023, 4:57:26 AM6/2/23
to Interactive Media Ads SDK
Hello Google Support Team,
The "Pool 8 Ball" HTML5 game is made by using "Construct 3" Game Engine.
I look forward to hearing from you
Thank you
Sameera
Sameera Rathnayaka
Jun 2, 2023, 6:03:15 AM6/2/23
to Interactive Media Ads SDK
Hello Google Support Team,
In the Interactive "Google Media Ads SDKs > Google IMA SDK for HTML5" link below, you be able to see topic below.
"6. Initialize the AdsLoader and make an ads request"
In this "6. Initialize the AdsLoader and make an ads request" topic, you will see the Sample VIDEO AD TAG (I have put the Sample Video Ad Tag below) . So, I want to tell you that I also want the "In-Game Video Ads" using these types of Video Ad Tags. I have got an Approved Google Ad Manger Account. Then, I can get the Video Ad Tags from my Google Ad Manager Account.
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
'iu=/21775744923/external/single_ad_samples&sz=640x480&' +
'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&' +
'gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=';
adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
'iu=/21775744923/external/single_ad_samples&sz=640x480&' +
'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&' +
'gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=';
So, at first I want to know how I can get the TEST IN-GAME VIDEO ADS for my HTML5 game.
All the Video Games on my Game Website are HTML5 Games.
I look forward to hearing from you
Thank you
Sameera
IMA SDK
Jun 5, 2023, 5:24:12 PM6/5/23
to sameerarat...@gmail.com, ima...@googlegroups.com
Hello Sameera,
Welcome to IMA SDK Support team. Thank you for reaching out to us.
I have checked your sample website but could not replicate the reported behaviors as the ads seem to be playing in a separate player from your game, is that an intended behavior? For better illustration of issues, would you be able to share to us the screen recording of the behavior highlighting what you are reporting?
Moreover, as there appears to be multiple scenarios you want to do in your sample site, kindly note that the SDK only request ads to your ad server through the use of VAST Ad Tag url (in client side), then the ad server selects the best ad and sends a VAST response to the IMA SDK. Then the IMA SDK parses the VAST response, determines the correct media type based on environment, and delivers the in-line video creative (and companion ads if needed) to the web page or app. For more information of what the IMA SDK can do, you may refer to the SDK Architecture (https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/architecture) documentation.
Additionally, you may also use our sample apps (https://github.com/googleads/googleads-ima-html5/releases) for reference for your own integration, modify it to fit your use case and see if it will return the same issue. This will help avoid most of the implementations issues.
If the file(s) you are looking to share are less than 25mb in total you can attach them to this case on your next reply. If you are having trouble attaching your file to this case or if your file(s) are larger than 25mb, you can share your files with me by performing the following steps.
1. Navigate to
https://docs.google.com/forms/d/e/1FAIpQLSfkAiXMeYP-fw1W3Z-tT9uwmATEKO5X6S-th0gR2ezdKaaqfg/viewform?usp=pp_url&entry.400550049=IMA+SDK&entry.460850823=5004Q00002lvjOSQAY&entry.80707362=00181958
2. Fill out all fields, and attach your file(s).
3. Please reply back on this thread when you have uploaded your file(s). Please do not share this link.
This message is in relation to case "ref:_00D1U1174p._5004Q2lvjOS:ref"
Thanks,
Thanks,
 |
IMA SDK Team |
Reply all
Reply to author
Forward
0 new messages