Implementasi Baidu DU Ads pada Aplikasi Mobile Berbasis Cocos2d-x

Mobile Application adalah salahsatu model bisnis digital yang tengah berkembang saat ini. Banyak diantara startup yang memulai bisnisnya dari membuat aplikasi mobile. Banyak proses bisnis yang dapat diimplementasikan pada aplikasi mobile, seperti Payment Apps, In App Purchase, Try and Buy, dan ads (iklan).

DU Ad Platform adalah salah satu ads platform iklan terbaru dari Baidu yang dapat membantu rekan developer di Indonesia untuk memonetize aplikasi yang telah dibuat berbasis Ads atau iklan. Bagi Kamu developer yang sudah memiliki aplikasi Android ataupun game berbasis Unity, Cocos2D-x, atau framework native lainnya, Baidu Indonesia menantang rekan developer untuk memonetize aplikasi yang telah dibuat pada challenge 500K Download Club DU Ad Platform Challenge dan 1M Download Club DU Ad Platform Challenge.

Pada tutorial ini dijelaskan tentang bagaimana mengimplementasikan SDK DU Ad pada aplikasi Android berbasis Cocos2d-x, mulai dari registrasi akun dan daftar aplikasi ke platform DU Ad, import project Cocos2d-x ke Android Studio hingga load modul SDK DU Ad pada project.

Registrasi di DU Ad Platform

Pertama-tama yang harus kita lakukan adalah registrasi dan login di platform DU Ad. Lakukan registrasi di halaman berikut http://developers.duapps.com/register?from=offical.

[caption id="attachment_10413" align="alignnone" width="398"] Registrasi di platform Baidu Du Ad[/caption]

Setelah registrasi berhasil, login ke platform DU Ad melalui halaman berikut http://developers.duapps.com/login.

[caption id="attachment_10414" align="alignnone" width="396"] Login ke dashboard DU Ad[/caption]

Kamu akan diarahkan ke halaman dasbor DU Ad.

[caption id="attachment_10415" align="alignnone" width="700"] Halaman dasbor developer DU Ad[/caption]

Daftarkan Aplikasi ke DU Ad

Untuk dapat menggunakan layanan iklan dari DU Ad, kita harus mendaftarkan aplikasi kita ke platform DU Ad. Untuk itu klik menu APPs di header halaman, maka akan muncul halaman daftar aplikasi. Klik tombol Add APP.

[caption id="attachment_10416" align="alignnone" width="700"] Klik tombol Add APP pada halaman APP untuk menambah aplikasi[/caption]

Maka akan muncul form untuk memasukkan data aplikasi. Perhatikan bahwa data yang disubmit harus data dari aplikasi yang sudah dipublish di Google Play. Data yang duimasukkan harus sama dengan dengan data pada aplikasi. Apabila data yang disubmit berbeda dengan data pada aplikasi, maka iklan tidak akan dapat muncul di dalam aplikasi. Apabila aplikasi Kamu sudah menggunakan layanan iklan dari platform yang lain semisal Facebook Ad, maka klik centang pada bagian Third-party platform ID Configuration. Setelah itu klik tombol Next.

[caption id="attachment_10417" align="alignnone" width="700"] Masukkan data yang sama dengan aplikasi yang sudah dipublish[/caption]

Buat Opsi Penempatan Iklan

Langkah kedua adalah mendaftarkan opsi penempatan iklan pada aplikasi. Klik tombol Create Placement untuk menambah lokasi penempatan. Ada beberapa opsi tampilan iklan yang tersedia di platform DU Ad, seperti Native, Interstitial dan Offerwall. Kamu dapat membuat lebih dari satu opsi penempatan saat ini atau nanti setelah dipublis.

[caption id="attachment_10418" align="alignnone" width="700"] Buat opsi penempatan iklan beserta jenis penampilannya[/caption]

Halaman pada langkah ketiga menampilkan konfirmasi bahwa aplikasi kita sudah dibuat dan kita mendapatkan App ID dan Placement ID untuk nanti kita gunakan pada saat pemasangan pada aplikasi.

Submit URL Aplikasi

[caption id="attachment_10420" align="alignnone" width="700"] Halaman langkah ketiga submit aplikasi menampilkan tautan unduh SDK dan informasi App ID dan Placement ID[/caption]

Masih di halaman yang sama, di bagian paling bawah adalah langkah terakhir, yakni memasukkan URL aplikasi yang telah dipublish di Google Play Store, kemudian klik tombol Submit for review.

[caption id="attachment_10423" align="alignnone" width="700"] Masukkan URL publikasi aplikasi kemudian klik tombol Submit for review[/caption]

Sampai sini kita harus menunggu sampai aplikasi yang kita submit selesai direview hingga statusnya nanti berubah menjadi Publishing, baru kita dapat menggunakannya pada aplikasi.

[caption id="attachment_10421" align="alignnone" width="700"] Aplikasi dengan status Publishing siap digunakan[/caption]

Buka Project Cocos2d-x di Android Studio

Buka source code aplikasi Cocos2d-x Kamu pada Eclipse atau Android Studio. Pada tutorial ini saya menggunakan Cocos2d-JS dan mengedit aplikasi dari Android Studio. Karena saya menggunakan Android Studio, maka folder yang saya buka adalah folder frameworks/runtime-src/proj.android-studio/ dari folder aplikasi Cocos2d-JS.

[caption id="attachment_10425" align="alignnone" width="700"] Pilih opsi open existing project[/caption]

[caption id="attachment_10426" align="alignnone" width="426"] Pilih folder proj.android-studio[/caption]

Setelah aplikasimu dibuka, Kamu dapat mencoba menjalankan aplikasimu via emulator atau perangkat Android.

[caption id="attachment_10428" align="alignnone" width="700"] Buka project di Android Studio. Pastikan aplikasi berjalan dengan mencoba run di emulator atau device[/caption]

Unduh dan Tambahkan SDK DU Ad pada Project

Unduh DU Ad SDK dari halaman SDK Download, menunya dapat diakses melalui header dasbor DU Ad. Pada tutorial ini saya akan jelaskan contoh kasus penerapan sederhananya.

Sekarang masukkan SDK DU Ad ke dalam project. Pilih menu File > Project Structure. Akan muncul jendela Project Structure. Klik tombol ikon plus yang ada di kiri atas untuk menambah module baru.

[caption id="attachment_10429" align="alignnone" width="700"] Klik tombol plus di kiri atas jendela Project Structure[/caption]

Kemudian pada jendela Create New Module pilih opsi Import .JAR/.AAR Package. Kemudian pilih file SDK DU Ad. Pada tutorial ini saya menggunakan SDK yang DuappsAd_CW_Online_v1.0.5.aar. Klik tombol Finish.

Setelah itu tambahkan Dependencies pada Module aplikasi Kamu. Klik modulnya, kemudian pilih tab Dependencies. Klik tombol plus di kanan atas, lalu pilih Module Dependency. Setelah muncul jendela Choose Modules, pilih modul SDK DU Ad yang sudah kita load tadi.

[caption id="attachment_10432" align="alignnone" width="700"] Klik tombol plus di kanan atas tab dependencies, lalu pilih Module Dependency[/caption]

[caption id="attachment_10433" align="alignnone" width="478"] Pilih modul DuappsAd, lalu klik OK[/caption]

Tambahkan Library Universal Image Loader

Setelah menambahkan modul SDK DU Ad, kita akan menambahkan library universal-image-loader-1.9.3.jar untuk menampilkan gambar iklan. Unduh library tersebut pada tautan berikut http://www.goo.gl/f6mMkt. Kemudian simpan di dalam folder libs. Kemudian pada tab Dependencies, klik tombol plus di kanan atas, lalu pilih File Dependency. Pilih file universal-image-loader-1.9.3.jar yang ada di dalam folder libs.

[caption id="attachment_10434" align="alignnone" width="370"] Pilih file jar yang ada di dalam folder libs[/caption]

Setelah itu sync dan build untuk sinkronisasi library, sehingga pada file build.gradle bagian dependencies akan tertulis seperti ini:

dependencies {
    compile project(':libcocos2dx')
    compile project(':DuappsAd_CW_Online_v1.0.5')
    compile files('libs/universal-image-loader-1.9.3.jar')
}

Lebih Lanjut

Setelah modul SDK dan library image loader terintegrasi dengan aplikasimu, Kamu dapat menampilkan iklan pada bagian-bagian tertentu dan event tertentu sesuai dengan kebutuhan. Berikut adalah beberapa pembahasan lebih lanjut tentang implementasi iklan pada aplikasi:

• Baidu DU App Ad Guide
• DU Ad SDK dan Sample Demo
• Sample code dan tutorial implementasi di Unity
• Sample codedan tutorial implementasi di Android