Designing & Publishing a WebGL game is only the first steps in creating a successful + Profitable Game. To reach that goal, among other things, you need a mix of monetization tools in place. Obviously, you can make it “pay to play” and require users to purchase the game outright before they play. You can use the freemium model or base your success on in-app purchases. However, today’s most successful game developers understand that their monetization strategy should include the use of reward video ads.

What Are Reward Video Ads?

Reward video ads are video ads that your players choose to watch on their own. They’re empowered to view the content, and because they’re incentivized to watch in order to get the reward. Reward video ads should be relevant to the player and the game, and be short (generally no more than 30 seconds at the very most), and should deliver a reward that your players actually value.

Why Use Reward Video Ads?

There are plenty of reasons why you should include Reward Video Ads in your mix of monetization tools. A great Reward Video Ad Platform will be able to monetize 85%+ of your user base. Besides there are research results that suggest reward video ads bolsters in-app purchases and user satisfaction. Of course, the primary reason to use reward video ads as a central component of your monetization strategy is to give your players something of value in exchange for their time. As you can see, there are plenty of reasons that you should integrate reward video ads into your WebGL game monetization strategy. Reward ads can deliver value to you and your players, bolstering not only profitability, but also player retention and new player acquisition.

How to use Reward Video Ads in WebGl games

Most monetization platforms do provide plugins or SDK for Reward Video Ads integration. Here in AppLixir, we have implemented an approach where you can integrate Reward Video Ad in 2 small steps. Here are the details. The section below contains an overview of how to integrate a Unity/WebGL game with the Applixir video advertising platform.

Step 1: .jslib file setup
In Unity, create a .jslib file that will be merged into the WebGL project.
For example: Applixir.jslib

-------- start of cut -----------

var ApplixirPlugin = {
$impl: {},
adStatusCallbackX: function (status) {
//console.log('Ad Status:', status);
var iresult = 0;
switch (status)
{
case "ad-watched":
iresult = 1;
break;
case "network-error":
iresult = 2;
break;
case "ad-blocker":
iresult = 3;
break;
case "ad-interrupted":
iresult = 4;
break;
case "ads-unavailable":
iresult = 5;
break;
case "ad-fallback":
iresult = 6;
break;
default:
iresult = 0;
break;
}
Runtime.dynCall('vi', window.applixirCallback,
[iresult]);
//console.log('Ad Status done:', status);
},
ShowVideo__deps: [
'$impl',
'adStatusCallbackX'
],
ShowVideo: function (devId, gameId, zoneId, fallback,
callback) {
var local_options = {
zoneId: zoneId, // the zone ID from the "Games" page
devId: devId, // your developer ID from the
"Account" page
gameId: gameId, // the ID for this game from the
"Games" page
adStatusCb: _adStatusCallbackX, // optional
fallback: fallback, // 0|1
verbosity: 0 // 0..5
};
//console.log(local_options);
window.applixirCallback = callback;
invokeApplixirVideoUnit(local_options);
}
};
autoAddDeps(ApplixirPlugin, '$impl');
mergeInto(LibraryManager.library, ApplixirPlugin);

-------- end of cut -----------

Step 2: Setup C# wrapper
Our C# code will call through to the ShowVideo() JS function, the ShowVideo() function will
set the required options, save a reference to the callback method (back into unity) and then
invoke Applixir to show a video unit.
Our C# code will define an export to enable access from C#. Using a wrapper like so:

-------- start of cut -----------

using System;
using System.Runtime.InteropServices;
using UnityEngine;
public class ApplixirWebGL
{
public delegate void SimpleCallback(int val);
[DllImport("__Internal")]
public static extern void ShowVideo(int devId, int gameId, int
zoneId, int fallback, SimpleCallback onCompleted);
[MonoPInvokeCallback(typeof(SimpleCallback))]
private static void ApplixirCompletedHandler(int result)
{
Debug.Log("GOT VIDEO RESULT CALLBACK: " + result);
PlayVideoResult pvr = PlayVideoResult.ADS_UNAVAILABLE;
switch (result)
{
case 1:
pvr = PlayVideoResult.AD_WATCHED;
break;
case 2:
pvr = PlayVideoResult.NETWORK_ERROR;
break;
case 3:
pvr = PlayVideoResult.AD_BLOCKER;
break;
case 4:
pvr = PlayVideoResult.AD_INTERRUPTED;
break;
case 5:
pvr = PlayVideoResult.ADS_UNAVAILABLE;
break;
case 6:
pvr = PlayVideoResult.AD_FALLBACK;
break;
default:
pvr = PlayVideoResult.ADS_UNAVAILABLE;
break;
}
if (callback != null)
{
callback(pvr);
callback = null;
}
}
public enum PlayVideoResult
{
AD_WATCHED, // an ad was presented and ran for more than 5
seconds
AD_BLOCKER, // an ad blocker was detected
AD_INTERRUPTED, // ad was ended prior to 5 seconds
(abnormal end)
AD_FALLBACK, // fallback mode displayed a banner in
response to ads-unavailable. Will only occur if "fallback:1" is
set in the options.
NETWORK_ERROR, // no connectivity available
ADS_UNAVAILABLE // no ads were returned to the player
}
private static Action callback = null;
///

/// Calls out to the applixir service to show a video ad.
///
/// Result is returned via the resultListerens event.
///
///

///
public static void PlayVideo(Action callback)
{
ApplixirWebGL.callback = callback;
ShowVideo(devId, gameId, zoneId, (fallback ? 1 : 0),
ApplixirCompletedHandler);
}
private static int devId;
private static int gameId;
private static int zoneId;
private static bool fallback;
public static void init(int devId, int gameId, int zoneId,
bool fallback)
{
ApplixirWebGL.devId = devId;
ApplixirWebGL.gameId = gameId;
ApplixirWebGL.zoneId = zoneId;
ApplixirWebGL.fallback = fallback;
}
public static void onPlayVideoResultString(string result)
{
Debug.Log("GOT VIDEO RESULT CALLBACK: " + result);
PlayVideoResult pvr = PlayVideoResult.ADS_UNAVAILABLE;
if (!string.IsNullOrEmpty(result))
{
result = result.ToLower().Trim();
switch (result)
{
case "ad-watched":
pvr = PlayVideoResult.AD_WATCHED;
break;
case "network-error":
pvr = PlayVideoResult.NETWORK_ERROR;
break;
case "ad-blocker":
pvr = PlayVideoResult.AD_BLOCKER;
break;
case "ad-interrupted":
pvr = PlayVideoResult.AD_INTERRUPTED;
break;
case "ads-unavailable":
pvr = PlayVideoResult.ADS_UNAVAILABLE;
break;
case "ad-fallback":
pvr = PlayVideoResult.AD_FALLBACK;
break;
default:
pvr = PlayVideoResult.ADS_UNAVAILABLE;
break;
}
}
if (callback != null)
{
callback(pvr);
callback = null;
}
}
}

-------- end of cut -----------

Step 3: Setup HTML template
Your HTML setup will largely depend on whatever HTML you may already be using but the following is a simple html template for a basic Applixir Unity-WebGL integration:

-------- start of cut ----------


 
 

-------- end of cut -----------