Publishers in the Apps Network system earn points by offering tasks and challenges in their games or web apps.
Creating Offer Wall
To start displaying tasks and challenges and earn points, create an offer wall:
Log into your Apps Network account.
Click on "Offerwall" in the top navigation menu.
On the Offer Wall page, view your current offer wall.
Click the "Create Offerwall" button to add a new one.
Specify the following details:
Type: Offerwall (by default)
Description: Brief inventory description
Reward Title: Reward title will be shown the action button next to each tasks item of the Offerwall, e.g.Play for +10 score. It’s a statement to your users for completing tasks and challenges in Apps Network.
Implementing Offer Wall Code
After creating your offer wall:
Click "Snippets" in the main menu and check out the frontend framework your app uses.
Publishers must reward users for completing the tasks from the offer wall. Check completed tasks and challenges or the offer wall clicks and reward your users:
Use the Apps Network public API endpoint:
GET https://click.apps-network.net/banners/events?wa=YOUR_WALLET_ADDRESS&tui=TELEGRAM_USER_ID
Parse the response to identify completed challenges and clicks made by the user Telegram ID tui. The response will look like this:
Distribute in-game rewards based on the events in the response:
For publishers: Reward users based on the number of events (e.g., 100 points per event).
For advertisers: Verify clicks and award initial points (e.g., 100 points for a verified click).
Consider your Apps Network user role (publisher or advertiser) when implementing the reward logic in your game.
Sample code snippet
The following code snippet demonstrates how to implement a reward system in a Telegram Mini App (TMA) that interacts with the Apps Network API to fetch user events and distribute rewards based on those events.
// Assuming this function is part of your game's logic
async function checkAndRewardUser(walletAddress) {
const telegramUserId = getTelegramUserId(); // Implement this function to get the user's Telegram ID
const apiUrl = `https://click.bec.apps-network.net/banners/events?wa=${encodeURIComponent(walletAddress)}&tui=${telegramUserId}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error('Failed to fetch events');
}
const data = await response.json();
console.log('Events data:', data);
if (data.items && data.items.length > 0) {
// Calculate reward based on the number of events
const rewardPoints = data.items.length * 100;
// Check if there's at least one click event
const hasClickEvent = data.items.some(item => item.action === "CLICK");
if (hasClickEvent) {
console.log(`Rewarding user with ${rewardPoints} points for ${data.items.length} events`);
await updateUserScore(rewardPoints); // Implement this function to update the user's score in your game
showRewardNotification(rewardPoints); // Implement this function to show a reward notification to the user
} else {
console.log('No click events found, no reward given');
}
} else {
console.log('No events found, no reward given');
}
} catch (error) {
console.error('Error checking and rewarding user:', error);
}
}
// Example usage
document.getElementById('checkRewardButton').addEventListener('click', checkAndRewardUser);
// Helper functions (implement these according to your game's logic)
function getTelegramUserId() {
// In a real TMA, you would get this from the Telegram WebApp
return window.Telegram.WebApp.initDataUnsafe.user.id;
}
async function updateUserScore(points) {
// Implement your logic to update the user's score in your game
console.log(`Updating user score by ${points} points`);
// Example: currentScore += points;
}
function showRewardNotification(points) {
// Implement your logic to show a reward notification to the user
console.log(`Showing reward notification: You earned ${points} points!`);
// Example: alert(`Congratulations! You earned ${points} points!`);
}
Implementing custom offer wall
Publishers that implement custom offer wall may need access to functions for accessing thr SDK API directly including the initialization time. For the custom offer wall rendering the TE.offerWall() should not be called but instead loadTasks() and get the JSON to render the items in your own way. The fetchTasks() is called if the offer wall is scrolled and needs more items to display.
if (TE && typeof TE.loadTasks === 'function') {
let result = await TE.loadTasks();
let taskList = document.getElementById('taskList');
taskList.innerHTML = JSON.stringify(result);
}
Earning Apps Network Points
Earn points to spend in Apps Network when visitors click tasks or complete challenges. Track your earnings as a publisher in the Profile page.
Use earned points to promote your own project across the App Network.
