@adlad/adlad v0.12.1

AdLad allows you to easily integrate ads for your games without the need for different implementations from every publisher. Instead, you can configure which plugins you would like to use, and whenever you want to show an ad, AdLad will forward your request to the plugin that is currently active.

List of available plugins

• adlad-plugin-dummy for test ads during development.
• adlad-plugin-crazygames for crazygames.com
• adlad-plugin-poki for poki.com
• adlad-plugin-gamedistribution for gamedistribution.com
• adlad-plugin-gamemonetize for gamemonetize.com
• adlad-plugin-gamepix for gamepix.com
• adlad-plugin-google-ad-placement for the AdSense Ad Placement API
• adlad-plugin-coolmathgames for coolmathgames.com
• adlad-plugin-wgplayer for wgplayground.com

Usage

To quickly get started, you can use jsdelivr.com to import AdLad:

<script type="module">
	import {AdLad} from "https://cdn.jsdelivr.net/npm/@adlad/adlad/mod.min.js";

	// You need at least one plugin in order for AdLad calls to function.
	import {crazyGamesPlugin} from "https://cdn.jsdelivr.net/npm/@adlad/plugin-crazygames/mod.min.js";

	const adLad = new AdLad({
		plugins: [
			crazyGamesPlugin(),
		]
	});
</script>

You can immediately start making calls, but ads won't show until the plugin has initialized.

await adLad.showFullScreenAd();

Both showFullScreenAd() and showRewardedAd() return an object that allows you to determine if an ad was shown.

const result = await adLad.showRewardedAd();
console.log(result); // { didShowAd: true, errorReason: null }

Some portals require you to report loading and gameplay state, which can be done with the methods below. You can call these as often as you like, if you call gameplayStart() twice in a row for example, AdLad will make sure it is passed to the plugin only once.

adLad.gameplayStart();
adLad.gameplayStop();
adLad.loadStart();
adLad.loadStop();

It's important that you mute audio and pause gameplay during ads. This can be done by observing the following values:

adLad.needsPause; // true | false
adLad.needsMute; // true | false

Usually these both become true once you make a call for showing ads, but plugins can manually override this value. That way your game always behaves according to the policies of the platform it's embedded on.

You can also listen for changes to these values:

adLad.onNeedsPauseChange((needsPause) => {
	console.log(needsPause);
});
adLad.onNeedsMuteChange((needsMute) => {
	console.log(needsMute);
});

You can use adLad.removeOnNeedsPauseChange and adLad.removeOnNeedsMuteChange To remove your callbacks.

Once you have experimented enough, you can bundle AdLad using a build tool of choice. AdLad is available as an npm package and on deno.land/x.

For the full API reference, see this page.

Plugins

By default the first available plugin from your plugins option is used. You can get the id of the active plugin using adLad.activePlugin.

To override which plugin is active, you can pass the plugin id via the plugin option like so:

const adLad = new AdLad({
	plugins: [notSoCoolPlugin(), myCoolPlugin()],
	plugin: "my-cool-plugin",
});

Alternatively, you can use the ?adlad=my-cool-plugin query string. This is useful when you want to host your own page, while still allowing gaming portals to use a specific plugin. You can simply provide each gaming portal with a different url.

Tree shaking unused plugins

If you make separate builds for each publisher, you can conditionally include plugins based on build flags. That way, unnecessary code is excluded from your build.

Ultimately, the best way to do this depends on your build pipeline. But let's assume you use something like Rollup and @rollup/plugin-replace.

In your build script you can configure the rollup plugin like so:

replace({
	values: {
		DEBUG_BUILD: String(debug),
		PUBLISHER_BUILD: `'${publisher}'`,
	},
	preventAssignment: true,
});

Where debug and publisher are variables in your script set by a commandline flag for instance.

Then in your client code you can do something like this:

// Use a local import path which points to your node_modules,
// or use an import map if necessary.
import { AdLad } from "https://cdn.jsdelivr.net/npm/@adlad/adlad/mod.min.js";
import { dummyPlugin } from "https://cdn.jsdelivr.net/npm/@adlad/plugin-dummy/mod.js";
import { somePublisherPlugin } from "./path/to/publisher/plugin.js";

// Declare the same global variables.
// This is only required if you want to be able to run this script without a build step.
globalThis.DEBUG_BUILD = true;
globalThis.PUBLISHER_BUILD = "none";

let plugins = [];
let plugin = "none";

if (DEBUG_BUILD) {
	plugins.push(dummyPlugin());
	plugin = "dummy";
}

if (PUBLISHER_BUILD == "somepublisher") {
	plugins.push(somePublisherPlugin());
	plugin = "some-publisher";
}

const adLad = new AdLad({
	plugins,
	plugin,
});

console.log(adLad.activePlugin); // Should print "dummy" or "some-publisher" based on your build flags.

Now if your build pipeline is configured correctly, it will tree shake these plugins depending on the configured DEBUG_BUILD and PUBLISHER_BUILD values.