This manual describes how to add a Telegram Mini App to the Monetag platform for monetization. The flexible interfaces of Mini Apps launched inside Telegram can completely replace any website. Inside the Telegram Mini App it looks like this:
Following this guide step by step, you can set a Rewarded Interstitial Tag to make the ads display inside your Telegram Mini App.
If you haven't got a Monetag account, feel free to create it according to this manual.
Step 2: Add your App to the Self-Service Platform
2.1. Go to the «Telegram Mini Apps» Tab in your Monetag account and press the "ADD APP" button.
2.2. Fill in general information about your Telegram App: set up its name and provide the link to your application. After filling in the info, click the "Add and Continue" Button.
Alternatively, you can click "+Create new" in the upper right corner of your Monetag dashboard.
Then select "Telegram Mini App" and click "Add new app" button.
Please be sure that the content of your Telegram Mini App does not violate Monetag Terms.
Important Note:
Please ensure you have preliminarily created a Telegram bot (via @BotFather) and the Mini App itself. Also, to work with Monetag, you should have some experience using JavaScript to manage your Telegram Mini App.
Step 3: Create an Ad Tag in the Monetag dashboard
The first tag will be created automatically once you add the App to the Monetag dashboard.
You can add many placements for the Rewarded Interstitial Tags inside one Telegram Mini App. To add the new ones, please click on "+Create new" button.
Step 4: Add an Ad Tag to your app
4.1. Copy the JS code of your ad tag from the Monetag Dashboard.
4.2. To connect your Mini App to the Monetag, place the copied script below the <head> tag of your Mini App's source code.
Step 5: Make a Rewarded Interstitial Tag work inside the Telegram Mini App
5.1. Choose the place in your app to show the ad to the user (the ad can be shown in several places several times - the frequency can be set only by the Telegram Mini App's owner).
5.2. The Rewarded Interstitial tag looks like this:
<script src="//sampledomain.com/vignette.min.js" data-zone="XXXXXXX" data-sdk="show_XXXXXXX"></script>
You will need to call the show_XXXXXXX() function to display the ad in the chosen place. The show_XXXXXXX() function returns Promise that resolves after displaying the ad. Here, you can add a flow to accrue a reward.
Instructions for React:
The script of the Rewarded Interstitial Tag that you have copied from the Monetag Dashboard should be placed in index.html from which your React project is loaded:
<script src="//sampledomain.com/vignette.min.js" data-zone="XXXXXX" data-sdk="show_XXXXXXX"></script>
Then, you can use the global function show_XXXXXXX in any place of your app.
Example:
const ShowAdButton = () => { const showAd = () => { show_XXXXXXX().then(() => { alert('You have seen an ad!') }) } return <button onClick={showAd}>Show ad</button> }
Also, you can make an effect that adds a Rewarded Interstitial Tag to the page, and in this case, you don't have to edit index.html:
const ShowAdButton = () => { React.useEffect(() => { if (window.show_8139969) { return } const tag = document.createElement('script') tag.src = '//doodiwom.com/vignette.min.js' tag.dataset.zone = '8139969' tag.dataset.sdk = 'show_8139969' document.body.appendChild(tag) }, []) const showAd = () => { show_8139969().then(() => { alert('You have seen an ad!') }) } return <button onClick={showAd}>Show ad</button> }
That's it! If you have done everything correctly, your Telegram Mini App users will see the Rewarded Interstitial in the place where you have seen it.
If you have any questions, don't hesitate to contact our Support team via email: support@monetag.com or contact.us@monetag.com.