Swift

Tích hợp AdMob trong ứng dụng cho iOS

AdMob

AdMob, như chúng ta đều biết, là hệ thống hiện quảng cáo của Google, tích hợp trong các ứng dụng cho các thiết bị di động, bao gồm điện thoại và máy tính bảng (Android, iPhone và iPad). Bài viết này sẽ hướng dẫn sơ lược cách tích hợp AdMob vào project ứng dụng cho iOS. Đối với project ứng dụng Android, hãy tham khảo bài viết ở đây.

1. Các loại quảng cáo AdMob

Quảng cáo AdMob được hiển thị dưới hai dạng: Dạng thứ nhất là banner. Đây là dạng mỗi quảng cáo chỉ trong một khung vuông chỉ chiếm một phần nhỏ trên màn hình của thiết bị. Thông thường, các banner chỉ được đặt ở một trong hai, hoặc cả hai vị trí cạnh trên hoặc cạnh dưới của màn hình. Ví dụ:

iPhone AdMob

Dạng thứ hai, interestitial là dạng quảng cáo được hiển thị chiếm trọn màn hình. Ví dụ:

admob_9

2. Chuẩn bị

2a. Tạo AdMob project

Bạn tạo một AdMob project tại https://apps.admob.com. Nếu chưa có tài khoản, hãy tạo một cái với các thông tin cần thiết. Khi tài khoản đã khả dụng, tại trang chính AdMob, hãy nhấn nút “Kiếm tiền từ ứng dụng mới” hoặc “Monetize new app“.

Trong trang mới, hãy chọn “Thêm ứng dụng của bạn theo cách thủ công” hoặc “Add your app manually“. Hãy nhập tên ứng dụng mà bạn muốn với nền tảng là iOS. Cuối cùng, hãy nhấn “Thêm ứng dụng” hoặc “Add app“.

Tiếp theo, nếu AdMob không tự động chuyển sang trang Thêm quảng cáo mới, bạn cần nhất nút “Đơn vị quảng cáo mới” hoặc “New ad unit“. Trong trang này, chọn loại quảng cáo là Biểu ngữ hoặc Banner, và nhập các thông tin cần thiết khác. Đương nhiên, bạn sẽ nhấn Lưu hoặc Save để lưu lại đơn vị quảng cáo vừa tạo. Bạn cũng có thể tạo ngay một Quảng cáo trung gian hoặc Interstitial Ad để sử dụng sau. Bạn hãy sao chép lại các ad ids để dùng cho bên dưới. Các ids có dạng ca-app-pub-number-range. Trong đó number-range là dãy các con số duy nhất cho các units của bạn.

2b. Tạo Xcode project

Trước hết, hãy đảm bảo bạn đã có CocoaPods trên máy tính Mac của bạn. Nếu chưa có, cài đặt Pods qua Ruby (gem) qua Terminal:

Vui lòng tham khảo thêm về CocoaPods ở đây.

Bạn nên tạo một project mới cho mục đích thử nghiệm. Trong thư mục của project, bạn cần import các dependencies thông qua Pods. Bạn tạo Podfile, có thể thông qua vim hoặc Text Editor:

Bạn cho update pod qua Terminal. Kể từ lúc này, bạn sẽ thao tác với project qua tập tin .xcworkspace thay cho .xcodeproj.

3. Tạo AdBanner

Trong phần Main.storyboard, bạn hãy tiến hành drag UIElement là một GADBannerView qua màn hình thiết bị. Bạn nên đặt banner này tại vị trí giữa cạnh dưới của màn hình với kích thước là 320 dài * 50 rộng. Bạn có thể add các constraints để cố định view này.

Kéo thả view quảng cáo vào trong phần code editor, và import thư viện GoogleMobileAds vào code. Dưới đây là hướng dẫn đối với Swift, bạn có thể làm tương tự cho Objective-C. Ta sẽ khai báo một field member của GADBannerView.

Trong AppDelegate.swift, hãy thêm dòng code dưới đây trong application:didFinishLaunchingWithOptions. Trong đó, your-banner-id là id của ad banner mà tôi đã yêu cầu các bạn lưu lại ở bên trên.

Quay lại ViewController.swift, chúng ta sẽ gán các thông số cho GADBannerView vừa thêm bên trên trong hàm viewDidLoad():

Việc tiếp theo là yêu cầu một GADRequest. Hãy nhớ rằng luôn báo cho Google severs rằng bạn đang thử nghiệm bằng cách gán testDevices vào request.

Về sau, khi bạn run project trên thiết bị ảo (iOS Simulator), ID của thiết bị sẽ được in trong phần console. Bạn sẽ thay đổi phần testDevices với nội dung sau, với phần IOS_SIMULATOR_ID là ID của máy ảo:

Và cuối cùng, gán request vào bannerView:

Bây giờ, bạn có thể chạy thử. Hãy nhớ sửa lại phần testDevices trong request sau khi bạn tìm thấy ID của máy ảo trong console.

4. Tạo InterstitialAd

Để đơn giản hóa, chúng ta hãy cho hiển thị Interestitial Ad thông qua một Button. Khi Button được click thì IAd sẽ được hiển thị. Do đó, bạn sẽ tạo một Button, ánh xạ từ màn hình thiết kế giao diện sang phần code. Phần code cho hiện IAd sẽ được viết trong buttonDidReceiveTap. Nhưng trước hết, ta khai báo một field member của GADIntrestitial và định nghĩa nó trong viewDidLoad, đồng thời yêu cầu một GADRequest tương tự như banner.

Trong buttonDidReceiveTap, ta chỉ cần vài dòng code đơn giản để IAd hiện ra như sau:

Và phần cuối cùng không kém quan trọng: Run app và thử nghiệm.

Không quá khó phải không?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.