Thêm tính năng hỗ trợ quảng cáo đồng hành

Chọn nền tảng: HTML5 Android iOS

Hướng dẫn này dành cho những nhà xuất bản muốn thêm quảng cáo đi kèm vào chế độ triển khai IMA trên Android.

Điều kiện tiên quyết

• Ứng dụng Android có tích hợp SDK IMA. Hãy xem BasicExample nếu bạn chưa có ứng dụng nào tích hợp SDK. Nếu bạn cần trợ giúp triển khai IMA SDK trong ứng dụng của mình, hãy xem phần Thiết lập IMA SDK.
• Một thẻ quảng cáo được định cấu hình để trả về quảng cáo đồng hành. Nếu bạn cần mẫu, hãy xem phần Câu hỏi thường gặp của chúng tôi.

Thêm quảng cáo đi kèm vào ứng dụng

Làm theo hướng dẫn để thêm một vị trí quảng cáo đồng hành và hiển thị quảng cáo đồng hành trong ứng dụng của bạn.

Tạo một ViewGroup để hiển thị thành phần đi kèm

Trước khi yêu cầu một quảng cáo đồng hành, bạn cần tạo một không gian cho quảng cáo đó trong bố cục của mình. Trong XML bố cục, hãy thêm một phần tử ViewGroup; ví dụ này sử dụng LinearLayout. Trong bước sau, bạn sẽ truyền một giá trị tham chiếu đến phần tử này vào AdDisplayContainer.

Nếu bạn đang tích hợp vào ứng dụng BasicExample, hãy thêm nội dung này vào tệp activity_my.xml, bên dưới videoPlayerContainer.

activity_my.xml

<LinearLayout
  android:id="@+id/companionAdSlot"
  android:layout_width="match_parent"
  android:layout_height="250dp"
  android:layout_gravity="center_horizontal"
  android:gravity="center"
  android:orientation="vertical"
  android:textAlignment="center" />

Tạo một CompanionAdSlot

Bước tiếp theo là tạo một đối tượng CompanionAdSlot, sau đó đối tượng này sẽ được thêm vào một thực thể ArrayList<CompanionAdSlot>. Giao diện AdDisplayContainer lấy danh sách các vị trí quảng cáo đi kèm để bạn có thể hiển thị nhiều quảng cáo đi kèm cùng một lúc. Bạn cần tạo một thực thể của lớp ImaSdkFactory để tạo đối tượng CompanionAdSlot.

ImaSdkFactory sdkFactory = ImaSdkFactory.getInstance();
ViewGroup companionViewGroup = (ViewGroup) findViewById(R.id.companionAdSlot);

CompanionAdSlot companionAdSlot = sdkFactory.createCompanionAdSlot();
companionAdSlot.setContainer(companionViewGroup);
companionAdSlot.setSize(300, 250);
ArrayList<CompanionAdSlot> companionAdSlots = new ArrayList<CompanionAdSlot>();
companionAdSlots.add(companionAdSlot);

Tạo một vùng quảng cáo đồng hành cho mỗi kích thước quảng cáo đồng hành mà bạn dự định hiển thị trong ứng dụng của mình. IMA SDK sẽ điền vùng quảng cáo đồng hành bằng mọi quảng cáo đồng hành trong phản hồi VAST có kích thước phù hợp với chiều cao và chiều rộng của khung hiển thị. IMA SDK cũng hỗ trợ việc sử dụng quảng cáo đồng hành có kích thước linh hoạt. Sau khi tạo companionAdSlots, hãy thêm chúng vào AdsLoader. Các ví dụ sau đây minh hoạ cách thực hiện việc này tuỳ thuộc vào việc bạn đang sử dụng tiện ích Exoplayer-IMA hay các hoạt động triển khai IMA khác không sử dụng tiện ích này.

Tiện ích Exoplayer-IMA

adsLoader = new ImaAdsLoader.Builder(this).setCompanionAdSlots(companionAdSlots).build();

Các cách triển khai khác

adsLoader.getAdDisplayContainer().setCompanionSlots(companionAdSlots);

Chỉ vậy thôi! Ứng dụng của bạn hiện đang hiển thị quảng cáo đi kèm.

Hiển thị quảng cáo đi kèm linh hoạt

IMA hỗ trợ quảng cáo đồng hành linh hoạt. Các quảng cáo đi kèm này có thể đổi kích thước để phù hợp với kích thước của vị trí quảng cáo. Các vùng này sẽ lấp đầy 100% chiều rộng của khung hiển thị gốc, sau đó thay đổi kích thước chiều cao để phù hợp với nội dung của quảng cáo đi kèm. Bạn có thể đặt các kích thước này bằng cách sử dụng kích thước Fluid quảng cáo đồng hành trong Ad Manager. Hãy xem hình ảnh sau đây để biết vị trí đặt giá trị này.

Cập nhật ứng dụng Android để có các thiết bị đồng hành mượt mà

Bạn có thể khai báo một vị trí đồng hành linh hoạt bằng cách cập nhật phương thức CompanionAdSlot.setSize() để lấy CompanionAdSlot.FLUID_SIZE làm cả hai tham số.

ImaSdkFactory sdkFactory = ImaSdkFactory.getInstance();
ViewGroup companionViewGroup = (ViewGroup) findViewById(R.id.companionAdSlot);

CompanionAdSlot companionAdSlot = sdkFactory.createCompanionAdSlot();
companionAdSlot.setContainer(companionViewGroup);
companionAdSlot.setSize(CompanionAdSlot.FLUID_SIZE, CompanionAdSlot.FLUID_SIZE);
ArrayList<CompanionAdSlot> companionAdSlots = new ArrayList<CompanionAdSlot>();
companionAdSlots.add(companionAdSlot);

Câu hỏi thường gặp

Tôi đã làm theo hướng dẫn nhưng không thấy quảng cáo đồng hành. Tôi nên làm gì?

Trước tiên, hãy kiểm tra để đảm bảo rằng thẻ của bạn thực sự đang trả về quảng cáo đi kèm. Để thực hiện việc này, hãy mở thẻ trong trình duyệt web và tìm thẻ <CompanionAds>. Nếu bạn thấy điều đó, hãy kiểm tra để đảm bảo kích thước của quảng cáo đi kèm được trả về có cùng kích thước với các phương diện mà bạn đang truyền vào đối tượng CompanionAdSlot.

Vị trí quảng cáo đi kèm của tôi sẽ trông như thế nào khi làm theo hướng dẫn này?

Hình ảnh sau đây được tạo từ BasicExample và có video nội dung phát ở trên cùng với quảng cáo đi kèm ở bên dưới.