bộ code mẫu hoàn chỉnh Telegram Mini App tích hợp quảng cáo Monetag

admin · Sep 27, 2025

Tốt rồi Mình sẽ làm cho bạn một bộ code mẫu hoàn chỉnh Telegram Mini App tích hợp quảng cáo Monetag. Bạn chỉ cần thay link quảng cáo Monetag của riêng bạn + upload lên hosting (Vercel, Netlify, hoặc server riêng) là chạy được ngay

Bộ code mẫu index.html

Code:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Mini App Monetag</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background: #f4f4f9;
      margin: 0;
      padding: 20px;
    }
    h1 {
      color: #333;
    }
    .card {
      background: white;
      border-radius: 15px;
      padding: 20px;
      margin: 15px auto;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      max-width: 400px;
    }
    .btn {
      display: inline-block;
      padding: 12px 20px;
      margin-top: 15px;
      background: #0088cc;
      color: white;
      border-radius: 10px;
      text-decoration: none;
      font-weight: bold;
    }
    .btn:hover {
      background: #0077b5;
    }
    #ad-box {
      margin: 20px auto;
      max-width: 320px;
      min-height: 50px;
    }
  </style>
</head>
<body>
  <h1> Telegram Mini App + Monetag</h1>

  <div class="card">
    <p>Chào mừng bạn đến với Mini App demo!</p>
    <a class="btn" href="#">Bấm thử ngay</a>
  </div>

  <!-- Vùng hiển thị quảng cáo -->
  <div id="ad-box">
    <!-- Chèn script Monetag của bạn vào đây -->
    <script src="https://example.monetag.com/ad-code.js"></script>
  </div>

  <!-- Telegram WebApp API -->
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
  <script>
    let tg = window.Telegram.WebApp;
    tg.expand(); // mở rộng toàn màn hình
  </script>
</body>
</html>

Các bước triển khai

Lấy Ad Script trong Monetag → thay vào chỗ https://example.monetag.com/ad-code.js.
Upload file index.html này lên Vercel / Netlify / GitHub Pages (phải có HTTPS).
Vào @BotFather trên Telegram:
- /setdomain → dán link hosting (VD: https://myapp.vercel.app).
- /setmenubutton → nhập JSON:
  
  {
  "type": "web_app",
  "text": "Mở App ",
  "web_app": { "url": "https://myapp.vercel.app" }
  }
Vào bot của bạn → bấm nút “Mở App ” → Mini App sẽ chạy + hiện quảng cáo Monetag.

Vậy là bạn đã có app hoàn chỉnh để test.

admin · Sep 27, 2025

Tuyệt — mình viết hướng dẫn chi tiết, bước-từng-bước để bạn lấy Ad Script (Ad Tag / SDK) từ Monetag và chèn vào Telegram Mini App (hoặc website) luôn. Mình ghi rõ chỗ bấm trên dashboard, mã mẫu và lưu ý theo từng loại quảng cáo.

1) Yêu cầu trước khi bắt đầu

Có tài khoản Monetag và đã đăng nhập vào Monetag Dashboard.
Đã thêm site/app (đăng ký domain hoặc URL) trong phần Sites/Apps và xác minh (verify) nếu Monetag yêu cầu. (Monetag)

2) Tóm tắt quá trình (ngắn gọn)

Vào Dashboard → chọn Sites (hoặc Apps).
Chọn site bạn muốn (hoặc Add site).
Add zone / Add tag → chọn loại quảng cáo (Onclick / Interstitial / Push / Banner / Vignette / Rewarded …).
Bấm Get tag / Get instructions → copy đoạn JS hiện ra.
Dán đoạn JS vào Mini App (thường là dưới <head> hoặc nơi Monetag hướng dẫn).
Quay dashboard kiểm tra thông báo “Installed correctly”. (Monetag SDK (for TMA))

3) Hướng dẫn chi tiết — từng bước với mô tả chính xác

Bước A — Vào Sites / Add site

Đăng nhập vào Monetag → menu thường có mục Sites hoặc My Sites / Apps → chọn site bạn muốn gắn quảng cáo hoặc thêm site mới (Add site). (Nếu là Telegram Mini App thì dùng URL HTTPS của app đó). (Monetag)

Bước B — Tạo Ad Zone / Tag

Trong trang site, tìm nút Add zone / Add tag / Create tag.
Chọn ad type mà bạn muốn (Onclick = popunder, Interstitial, Push, Banner, Rewarded, Vignette, …). Mỗi loại có thể yêu cầu cấu hình (tên zone, kích thước, target, anti-adblock bật/tắt). (Monetag)

Bước C — Lấy mã: bấm “Get tag” / “Get instructions”

Sau khi tạo zone, sẽ có nút Get tag hoặc Get instructions — bấm vào. Một cửa sổ/popup sẽ hiện đoạn JS/SDK (Ad Tag). Bạn copy toàn bộ đoạn này. Đây là mã chính bạn sẽ dán vào HTML của app/website. (Monetag SDK (for TMA))

Bước D — Chèn mã vào Mini App / Website

Telegram Mini App: Monetag docs khuyên chèn script dưới thẻ <head> của Mini App (hoặc theo hướng dẫn cụ thể của dòng tag). Sau khi chèn, file HTML của Mini App sẽ gọi SDK và bạn có thể trigger ad từ JS. (Monetag SDK (for TMA))
Website / WordPress: tuỳ loại ad, Monetag thường yêu cầu dán vào <head> hoặc ngay trước </body>; plugin WordPress hoặc hướng dẫn riêng cho từng nền tảng cũng có. Với một số loại (ví dụ Vignette, Interstitial) họ yêu cầu chèn vào header. (Monetag)

Bước E — Xác minh (Installed correctly)

Sau khi bạn publish thay đổi, Monetag dashboard sẽ kiểm tra và hiển thị trạng thái — nếu cài đúng sẽ có thông báo “Installed correctly” màu xanh. Thời gian để đạt hiệu quả tối ưu có thể cần vài ngày (3–7 ngày) để hệ thống tối ưu quảng cáo. (Monetag)

4) Mã mẫu & ví dụ (thực tế)

A — Nếu Monetag cung cấp SDK dạng script tag (Method 1):


<script src="https://sdk.monetag.com/sdk.js" data-zone="XXX" data-sdk="show_XXX"></script>

Sau khi script load, Monetag có thể cung cấp hàm toàn cục show_XXX() để gọi hiển thị ads từ JS của bạn. (Monetag SDK (for TMA))

B — Nếu Monetag hiện popup “Copy JS code” (Get instructions)

Copy toàn bộ nội dung popup và dán vào <head> hoặc nơi Monetag chỉ dẫn. (Ví dụ reward/interstitial thường yêu cầu chèn code và gọi hàm từ JS). (Monetag SDK (for TMA))

5) Lưu ý theo loại quảng cáo (các điểm quan trọng)

Onclick (popunder): Monetag đôi khi cung cấp file PHP hoặc mã đặc biệt với Anti-Adblock support — bạn có thể cần upload file do Monetag cung cấp lên server nếu muốn bypass adblock. (Monetag)
Push / Vignette / Interstitial / Banner: có hướng dẫn cài đặt riêng (ví dụ chèn vào header hoặc dùng plugin WordPress). Kiểm tra tài liệu tương ứng khi tạo zone. (Monetag)

6) Troubleshooting (vấn đề hay gặp)

Không thấy quảng cáo / lỗi JS: nếu dùng framework như Next.js/React, đừng chèn script trên server-side; chèn hoặc load script ở client-side sau khi component mount (hoặc dùng next/script). Có thread thảo luận lỗi khi thêm Monetag vào Next.js — cần load động hoặc inject script theo cách phù hợp. (Stack Overflow)
Sau khi cài không hiện “Installed correctly” ngay: chờ vài phút → vài giờ; Monetag thường cũng cho biết mất vài ngày để tối ưu thu nhập. (Monetag)

7) Tóm tắt checklist bạn làm theo (một bản kiểm tra nhanh)

Đăng nhập Monetag → Sites → chọn site. (Monetag)
Add zone → chọn loại quảng cáo → Save. (Monetag SDK (for TMA))
Bấm Get tag / Get instructions → copy JS. (Monetag SDK (for TMA))
Dán vào Mini App (dưới <head>) hoặc website theo hướng dẫn. (Monetag)
Publish → kiểm tra Monetag dashboard (Installed correctly). (Monetag)

Nếu bạn muốn, mình có thể làm 2 việc tiếp theo ngay (mấy việc này mình làm luôn trong tin nhắn này):

A — Dán ví dụ chính xác (mã sample) vào file index.html của bạn dựa trên loại quảng cáo bạn muốn (ví dụ: Onclick/Interstitial/Banner).
B — Kiểm tra nhanh file HTML mà bạn đang dùng (copy/paste nội dung vào đây) và mình sửa giúp chèn đúng vị trí (dưới <head> hoặc trước </body>), kèm chú thích.

Bạn muốn mình làm A hay B luôn — hoặc gửi cho mình loại quảng cáo (Onclick / Interstitial / Push / Banner) + domain URL/đoạn index.html để mình chèn mẫu giúp?

bộ code mẫu hoàn chỉnh Telegram Mini App tích hợp quảng cáo Monetag

admin

Administrator

admin

Administrator

Bạn cần chúng tôi hỗ trợ gì bạn không ?

1. allNET Global Solution

Năm :

Sáu :

Final

Final

bộ code mẫu hoàn chỉnh Telegram Mini App tích hợp quảng cáo Monetag

admin

Administrator

admin

Administrator

Bạn cần chúng tôi hỗ trợ gì bạn không ?

1. allNET Global Solution

Năm :

Sáu :

Final

Final

Bạn cần hỗ trợ Liên hệ : Hotline/Zalo (+84).08-.62-.39-.64-.78, Email : trankhanhchi0805@gmail.com