Please type minimum 3 characters
Please type minimum 3 characters

Video: How to integrate the code?

Your account manager will provide your SPOT-ID.  
Use it to replace the SPOT-ID parameter in the scripts below:

VanillaJS

VanillaJS. Head

<head>
	<script src="https://js.onclckvd.com/in-stream-ad-admanager/tma.js"></script>
</head>

for /head

VanillaJS. Body

<body>
    <script>
		// Initialize the ad engine and get the SHOW method to display ads
		window.initCdTma?.({ id: Spot ID }).then(show => window.show = show).catch(e => console.log(e))
	</script>
	// When the button is pressed, we activate the obtained SHOW method, which will return a Promise with the result of the ad display success.
	<button onclick="window.show?.().then(() => console.log('tma ad played')).catch(e => console.log(e))">
		Play Ad
	</button>
</body>

for /body

React

React. Head

<head>
	<script src="https://js.onclckvd.com/in-stream-ad-admanager/tma.js"></script>
</head>

for /head

React. Body

// adComponent.tsx

import { useEffect, useRef, useState } from 'react'

export default function Component() {
	const [id] = useState(Spot ID)
	const showAd = useRef()
	useEffect(() => {
		// Initialize the ad engine and get the SHOW method to display ads
		// @ts-expect-error admanager
		window.initCdTma?.({ id }).then(show => showAd.current = show).catch(e => console.log(e))
	}, [id])
	return (
		<>
// When the button is pressed, we activate the obtained SHOW method, which will return a Promise with the result of the ad display success.
			<button onClick={() => {
					showAd.current?.().then(() => onReward?.())
									  .catch((err: any) => onError?.(err))
				}}
			>
				Call Ad
			</button>
		</>
	)
}

for /body

FAQ

How to confirm ad views?

The mechanism for confirming ad views works through a get request. The request format is as follows:

URL+?USERID=&&&&&& 
(where &&&&&& is a number_id)

For convenience, we pass the Telegram user_id instead of a unique identifier.

How does it work?

Step 1. You’re creating a handler that checks the view before giving a reward and sharing its URL with us.
Step 2. On the front end, we’re pulling and passing the user_id from the URL.
Step 3. The back end is getting your handler’s URL with the user_id when the show event is successfully recorded.

How to track user actions?

To track user actions, the show method returns promise indicating whether the advertisement was viewed. At the beginning of the article, you’ll find Vanilla and React script examples that handle this using .then() and .catch() blocks.

How to debug Telegram Mini Apps when ads don’t show?

If you don't see any ads, a detailed error message may appear in the console. Here are some options to help you debug:

1) Refer to Telegram's instructions on Debug Mode:
Debug Mode for Mini Apps ↗

2) If your app is only accessible on mobile, try using a lightweight console like Eruda:
Eruda ↗

What stops users from getting rewards indefinitely?

Our side
We can set a limit on the number of ad views per user. Once a user reaches this limit and attempts to view more ads, they will receive a notification. 

Your side
You also have the option to set viewing limits on your application side.

Tip
We recommend setting a limit of 25 ads per day to maintain the number of unique views.

Other TMA formats for publishers

Technical writer
James Sullivan
Technical writer
Was this article helpful?