Hallo... salam... selamat bertemu lagi... kali ini kita akan membahas tentang cara memasang iklan admob di construct 2 (tentunya sekarang sudah tidak berlaku lagi, ya😀). Tapi, bagi bro n sis yang punya n masih pakai construct 2 dan ingin mendapatkan penghasilan tambahan dari google admob, tentunya bisa ikuti tutorial ini ya...
AdMob adalah platform periklanan dari Google yang memungkinkan pengembang aplikasi mendapatkan penghasilan dari iklan yang ditampilkan dalam aplikasi mereka. Dalam artikel ini, kita akan membahas bagaimana cara memasang AdMob di Construct 2 dan mengkonversinya ke aplikasi Android menggunakan Cordova.
Rencananya : iklan interstitial dipasang lansung di construct 2 dan klan banner membaca file javascripts.
Persiapan Sebelum Memulai
Sebelum memulai, pastikan Anda sudah menyiapkan beberapa hal berikut:
- Construct 2
- Akun AdMob (sudah mendaftar dan mendapatkan App ID serta Ad Unit ID)
- Node.js (bisa download versi windows di sini)
- Cordova (diinstal menggunakan npm)
- SDK Android (Android Studio atau Command Line Tools)
- Admob Plus Plugin
1. Membuat Proyek di Construct 2
- Buka Construct 2 dan buat proyek baru.
- Tambahkan objek "Browser" ke dalam layout untuk menangani pemanggilan iklan.
- Isika kode admob plus berikut, ganti adunit id sesuai id admob anda
" let interstitial
document.addEventListener('deviceready', async () => {
interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxxx/xxxxx',
})
interstitial.on('load', (evt) => {
// evt.ad
})
await interstitial.load()
await interstitial.show()
}, false)
document.addEventListener('admob.ad.dismiss', async () => {
// Once a interstitial ad is shown, it cannot be shown again.
// Starts loading the next interstitial ad as soon as it is dismissed.
await interstitial.load()
})"Pasang script tersebut sesuai kebutuhan
2. Mengekspor Proyek ke Cordova
Setelah selesai membuat proyek dan mengatur AdMob, langkah berikutnya adalah mengekspor proyek ke Cordova.
- Klik File > Export Project.
- Pilih Cordova sebagai platform ekspor.
- Pilih pengaturan ekspor:
- Minify script: Aktifkan untuk mengoptimalkan ukuran file.
- Include assets: Pastikan semua file yang diperlukan disertakan.
Klik Export, lalu simpan dalam folder baru.
3. Mengubah File config.xml
Setelah berhasil di export, ubahlah file config.xml dengan script berikut
Donuts match 3 harytri
<?xml version="1.0" encoding="UTF-8" ?>
<widget id="id aplikasi (silahkan sesuaikan)" version="1.0.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Nama Aplikasi</name>
<description>Deskrinya</description>
<author href="email teks" email="namaemail@gmail.com">gajah</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<icon src="www/icon-256.png" width="256" height="256" density="xxxhdpi" />
<icon src="www/icon-128.png" width="128" height="128" density="xhdpi" />
<preference name="android-targetSdkVersion" value="34" />
<platform name="android">
<preference name="PLAY_SERVICES_VERSION" default="23.2.0" />
<preference name="AdMobPlusWebViewAd" value="true" />
<preference name="AndroidXEnabled" value="true" />
<preference name="GradlePluginKotlinEnabled" value="true" />
<allow-intent href="market:*" />
</platform>
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="DisallowOverscroll" value="true" />
<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="deployment-target" value="14" />
<preference name="android-minSdkVersion" value="27" />
<access origin="*" />
<plugin name="cordova-custom-config" />
<plugin name="cordova-plugin-file" />
<plugin name="cordova-plugin-inappbrowser" />
<plugin name="cordova-plugin-statusbar" />
<plugin name="cordova-plugin-wkwebview-engine" />
<engine name="ios" />
<engine name="android" />
</widget>4. Menambah File Javascript dan Mengubah file index.html
Tambahkan file javascript (adshary.js - ubah nama file sesuai keinginan)
Isikan file javascipt dengan kode iklan admob banner berikut. Sesuiakan id unit iklannya
let banner
document.addEventListener('deviceready', async () => {
banner = new admob.BannerAd({
adUnitId: 'ca-app-pub-xxxxxxxxxxxx',
position: "top",
})
await banner.show()
}, false)
Tambahkan pada file index.html untuk membaca file javascipt tersebut
<script src="adshary.js"></script>5. Mengonversi ke Aplikasi Android Menggunakan Cordova
- Buka Terminal node js,
- jalankan perintah berikut untuk menginstal Cordova jika belum terpasang:
npm install -g cordova
- Pindah ke direktori hasil ekspor Construct 2:
cd path/to/exported_project
- Tambahkan platform Android:
cordova platform add android
File setelah menambahkan platform android berhasil
- Untuk menampilkan iklan AdMob di aplikasi, instal plugin admob plus berikut:
cordova plugin add admob-plus-cordova --save --variable APP_ID_ANDROID=ca-app-pub-xxxxx~xxxx4. Membangun Aplikasi Android dengan Cordova
Setelah konfigurasi selesai, lakukan build aplikasi:
cordova build android
Jika ingin langsung menginstal ke perangkat yang terhubung:
cordova run android
Setelah proses selesai, file APK akan dihasilkan di folder:
platforms/android/app/build/outputs/apk/debug/app-debug.apk
5. Mengunggah Aplikasi ke Google Play Store
Untuk mengunggah ke playstore, bisa ikuti video berikut
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda telah berhasil:
✅ Membuat proyek di Construct 2 dengan AdMob
✅ Mengekspor proyek ke Cordova
✅ Menambahkan plugin AdMob ke dalam aplikasi
✅ Membangun aplikasi Android siap pakai
Sekarang aplikasi Anda siap untuk diuji dan diunggah ke Play Store untuk mulai menghasilkan uang dari iklan AdMob! 🚀
Semoga bermanfaat!
Mainkan Game Donuts - Match 3 Game Di Playstore
Match 3 Games Construct 2 - Download
https://lynk.id/harytri/page/digitalproduk
http://lynk.id/harytri/7BEmvD0
Video: Cara Memasang Admob di Construct 2 dan Mengkonversi ke Aplikasi Android Menggunakan Cordova
kunjungi website