[TUTO] Integrate interstital / rewarded ads in your app

vnihoul77 · 2020-09-29T14:26:52.749Z

TRY BY YOURSELF AND EDITOR LINK

Preview: wannateam.link (Stay until the end )

INTRODUCTION

Rewarded ads can be a great solution to make a profit from your app, today we’ll see how to integrate this into your app, from scratch.
This solution also works for other ads types such as Display ads or Video ads

Here’s what it looks like:

DIFFICULTY

VERY EASY - START FROM SCRATCH

DURATION

FAST INTEGRATION (BUT YOU NEED TO WAIT FOR APIs)

Prerequisite

We will work with Adinplay (https://adinplay.com/) for three reasons: their integration process is very easy, they are approved by Google Ads, they answer super fast.

→ Go to their website and fill the sign up form, don’t worry you’ll have a response within few hours
Install the plugin “Toolbox” (Toolbox Plugin | Bubble)

image1277×287 34.8 KB

1 - UNDERSTAND HOW IT WORK

2 - GET YOUR API KEY

The Adinplay support will contact you after you submitted the form, they should send you your API key that looks like “XXX/xxxxxxx.xxx”

image1093×493 36.7 KB

3 - LOAD THE INTERSTITIAL ON YOUR PAGE

If you want to show the interstitial at a moment, you need to load the script into your page before.
For that, we use the following code in the “Page HTML Header” section of your page properties
(REPLACE THE XXXXXX VALUE AT THE END OF THE CODE WITH YOUR API KEY)

image827×981 48.7 KB

	<script>
window.aiptag = window.aiptag || {cmd: []};
aiptag.cmd.player = aiptag.cmd.player || [];

//CMP tool settings
aiptag.cmp = {
	show: true,
	position: "centered",  //centered, bottom
	button: true,
	buttonText: "Privacy settings",
	buttonPosition: "bottom-left" //bottom-left, bottom-right, top-left, top-right
}

aiptag.cmd.player.push(function() {
	adplayer = new aipPlayer({
		AIP_REWARDEDCOMPLETE: function (evt)  {
			bubble_fn_adcomplete(evt);
		},
	});
});

function show_rewarded() {
	//check if the adslib is loaded correctly or blocked by adblockers etc.
	if (typeof adplayer !== 'undefined') {
		aiptag.cmd.player.push(function() { adplayer.startRewardedAd(); });
	} else {
		//Adlib didnt load this could be due to an adblocker, timeout etc.
		//Please add your script here that starts the content, this usually is the same script as added in AIP_REWARDEDCOMPLETE.
		bubble_fn_adcomplete("error");
	}
}
</script>
<script async src="//api.adinplay.com/libs/aiptag/pub/XXXXXX/tag.min.js"></script>

image1688×809 78.7 KB

Now if we open the page and check what happens with Chrome, we can see that the script is loaded.
We can now execute our interstitial ad at any moment!

NOTES
You can only load your ads on the domains you give to Adinplay
If you have an error: check your Adblock :))
I really suggest you to read the code you copy paste

4 - RUN THE INTERSTITIAL

This part is very easy, you just have to add the “Run javascript” element to your workflow with this line:

show_rewarded();

(If you’re curious, it’s a javascript call, it will call the function “show rewarded” that we put in our HTML header, you can check it’s there.)

image1371×602 43.5 KB

5 - HANDLE THE RESPONSE

Now when we click our button, the interstitial shows up But we need to catch the response from the ad, to know if the user watches the app fully and deserve a reward, if he aborted or if something went wrong (such as an adblocker)

Remember the code we copy-paste? (I told you to read it …)
It says in English “when the reward is completed, then call the function bubble_fn_adcomplete with the parameter evt where evt is the message we want to get”.
Another function call! Same as the one we used to show the ad, but this time it’s our ad that is called.

image794×203 16 KB

So we need to add a “JavascripttoBubble” element to our page with the following parameters.
This is the previously called function bubble_fn_suffix

And we want to trigger something (such as a reward) from this function call.
So we also create a workflow event trigger

image1702×733 55.5 KB

image814×344 19.9 KB

6 - UNDERSTAND THE RESPONSE

So now the interstitial call us, and we pick up the phone. But we have to listen to the message it’ll say. This is the different messages you can get from the interstitial:

“canceled” the user stop the interstitial before the end
“granted” everything went well
“error” something went wrong

You’re now able to set yourself your events based on conditions:

image1493×876 69.7 KB

GO FURTHER & CUSTOMIZE THE GDPR POPUP

Documentation: AdinPlay - Adding AdinPlay Ads to Your Site

If you need help, feel free to comment.
As well as if you have ideas to add or if you see English mistakes

AN IN-THE-THEME WAY TO THANKS ME

You can see a rewarded (or two) ad here wannateam.link

Foxit · 2020-09-29T20:01:34.352Z

Hey @vnihoul77
First of all, thank you for your tutorial, it gaves me some ideas for my app! And it was pretty clear

I got my API key and I have setup everything, but when I try on my app I have a pop-up when the app load and I can see that your exemple don’t have one…
How did you do that?

Cheers!

vnihoul77 · 2020-09-29T20:05:39.642Z

Hey @Foxit

Check out your HTML Header code, especially this part. It’s the configuration of the GRPD pop-up and button. If you don’t want any button or pop-up just replace every true by false.

//CMP tool settings
aiptag.cmp = {
	show: true, // Show the GRPD popup
	position: "centered",  //centered, bottom
	button: true, //Show the GRPD button
	buttonText: "Text on the button",
	buttonPosition: "bottom-left" //bottom-left, bottom-right, top-left, top-right
}

[/quote]

antoine83680 · 2020-10-02T12:36:54.001Z

Thanks a lot, i was looking for that thing

vnihoul77 · 2020-10-02T13:18:53.719Z

You’re welcome, cheers