Initialize the SDK
Import the SDK Script
#index.html
[...]
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
// Get the SDK Script in the PremiumAds Publishers Dashboard
// Example
<script src="https://cdn.premiumtag.net/h5/c8b9fda6-ae9a-41f0-9934-20abb9b1dab8.js"></script>
</head>
[...]
Init the SDK
[...]
<script>
PremiumAdsSDK.init().then(() => {
console.log("PremiumAds SDK successfully initialized");
}).catch(() => {
console.log("Initialized, something went wrong, load you game anyway");
// fire your function to continue to game
});
</script>
[...]
Implement interstitial ads
Interstitial ads are used to display fullscreen ads and should be triggered on natural breaks in your game, i.e. whenever the user has shown an intent to continue playing.
[...]
// pause your game here if it isn't already
PremiumAdsSDK.interstitialAds(() => {
// you can pause any background music or other audio here
}).then((success) => {
if (success) {
console.log("PremiumAds: interstitial was displayed");
} else {
console.log("PremiumAds: ad no fill");
}
});
[...]
Implement rewarded ads
Rewarded ads allow for a user to choose to watch a rewarded video ad in exchange for a certain benefit in the game (e.g. more coins, etc.). When using 🎬 rewardedAds() , please make it clear to the player beforehand that they’re about to watch an ad.
[...]
// pause your game here if it isn't already
PremiumAdsSDK.rewardAds(() => {
// you can pause any background music or other audio here
}).then((success) => {
if (success == PremiumAdsSDK.statusRewarded.GRANTED) {
console.log("PremiumAds: rewardAds was displayed");
// video was displayed, give reward
} else {
console.log("PremiumAds: ad no fill");
// video not displayed, should not give reward
}
// if the audio was paused you can resume it here (keep in mind that the function above to pause it might not always get called)
// continue your game here
});
[...]
Full example
- index.html
- game.js
<html lang="en">
<head>
<title>PremiumAds H5 Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.premiumtag.net/h5/c8b9fda6-ae9a-41f0-9934-20abb9b1dab8.js?v=1a"></script>
</head>
<body>
<script>
PremiumAdsSDK.init().then(() => {
console.log("PremiumAds SDK successfully initialized");
}).catch(() => {
console.log("Initialized, something went wrong, load you game anyway");
// fire your function to continue to game
});
</script>
<canvas id="gameContainer" height="300px" width="300px"></canvas>
<button id="playButton">Play</button>
<button style="display:none" id="headsButton">Heads</button>
<button style="display:none" id="tailsButton">Tails</button>
<button id="rewardedButton">Rewarded Ads</button>
<script src="game.js"></script>
</body>
</html>
// Create a coin flip game
class Game {
constructor() {
// Define variables
this.score = 0;
this.choice = '';
this.canvas = document.getElementById('gameContainer').getContext('2d');
this.canvas.font = '24px Arial';
this.playButton = document.getElementById('playButton');
this.rewardedButton = document.getElementById('rewardedButton');
this.headsButton = document.getElementById('headsButton');
this.tailsButton = document.getElementById('tailsButton');
// On click listeners for the game's buttons.
this.playButton.addEventListener('click', () => {
this.erase();
this.play();
});
this.headsButton.addEventListener('click', () => {
this.choice = 'Heads';
this.flipCoin();
});
this.tailsButton.addEventListener('click', () => {
this.choice = 'Tails';
this.flipCoin();
});
this.rewardedButton.addEventListener('click', () => {
PremiumAdsSDK.rewardAds(() => {
// you can pause any background music or other audio here
alert("PremiumAds: before rewarded!")
}).then((success) => {
if (success == PremiumAdsSDK.statusRewarded.GRANTED) {
alert("PremiumAds: rewardAds was displayed!")
console.log("PremiumAds: rewardAds was displayed");
// video was displayed, give reward
} else {
alert("PremiumAds: rewardAds no fill!")
console.log("PremiumAds: ad no fill");
// video not displayed, should not give reward
}
// if the audio was paused you can resume it here (keep in mind that the function above to pause it might not always get called)
// continue your game here
});
});
this.erase();
}
// Start the game
play() {
PremiumAdsSDK.interstitialAds(() => {
// you can pause any background music or other audio here
}).then((success) => {
if (success) {
console.log("PremiumAds: interstitial was displayed");
} else {
console.log("PremiumAds: ad no fill");
}
this.score = 0;
this.canvas.fillText('Score: ' + this.score, 8, 26);
this.canvas.fillText('Heads or Tails?', 66, 150);
this.playButton.style.display = 'none';
this.headsButton.style.display = 'inline-block';
this.tailsButton.style.display = 'inline-block';
});
}
// Flip the coin
flipCoin() {
this.headsButton.disabled = true;
this.tailsButton.disabled = true;
this.erase();
this.canvas.fillText('Score: ' + this.score, 8, 26);
this.canvas.fillText('Flipping coin . . .', 60, 150);
setTimeout(() => {
this.coinLanded()
}, 2000);
}
// Logic for when the coin lands
coinLanded() {
this.headsButton.disabled = false;
this.tailsButton.disabled = false;
let sideUp;
if (Math.random() < 0.5) {
sideUp = 'Heads';
} else {
sideUp = 'Tails';
}
if (sideUp === this.choice) {
this.win(sideUp);
} else {
this.lose(sideUp);
}
}
// Guess the flip correctly
win(sideUp) {
this.erase();
this.score += 1;
this.canvas.fillText('Score: ' + this.score, 8, 26);
this.canvas.fillText('It was ' + sideUp + '!', 66, 150);
this.canvas.fillText('Guess again', 70, 200);
}
// Guess the flip incorrectly
lose(sideUp) {
this.erase();
this.canvas.fillText('Sorry, it was ' + sideUp, 50, 100);
this.canvas.fillText('Your score was ' + this.score, 50, 150);
this.canvas.fillText('Want to play again?', 45, 200);
this.playButton.style.display = 'inline-block';
this.headsButton.style.display = 'none';
this.tailsButton.style.display = 'none';
}
// Erase the canvas
erase() {
this.canvas.fillStyle = '#ADD8E6';
this.canvas.fillRect(0, 0, 300, 300);
this.canvas.fillStyle = '#000000';
}
}
const game = new Game();