In-app advertising how to use Inneractive API in QML application
This code example shows how you can use the standard QWidget-based In-app advertising API widget from within a QML app. The approach given can also be used for displaying other QWidget based controls from within QML.
The Inneractive In-application Advertizing API is the part of Nokia's Monetization Suite. It allows developers to easily display advertising banners within an application, handling everything from user interaction with the banner through to developer payment.
The API exists provides a click-able ad-banner control box that is derived from QWidget. This class can be used within Qt C++ applications directly, but is not immediately compatible with QML applications. This article shows how you can re-use this API within your QML application with minimal implementation efforts.
The design approach is to create a view container box derived from QDeclarativeItem that is available from within QML. The container provides an area where the InnerActiveAdWidget can draw itself and also handles re-sizing events from QML document.
The implementation in three steps
- Create view box container class that will act in QML document as Rectangle element. Please see in AdBannerWidget class declaration below what is important to make it interact with QML side. Implementation details can be seen in the project source code
class AdBannerWidget : public QDeclarativeItem
//these methods below are to handle events from QML side about the box geometry and painting
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
void geometryChanged(const QRectF & newGeometry, const QRectF & oldGeometry);
InnerActiveAdModule* ipAdModule; // reference to ad engine
InnerActiveAdWidget* ipAdWidget; // reference to ad widget
- Register AdBannerWidget type for QML before document loading --- the most convenient place i think is in Qt application setup -- function main()
qmlRegisterType<AdBannerWidget>("com.izinin.inneractive.ad", 1, 0, "AdBanner");
- Use the view box in QML document is shown below
width: Math.min(screen.width, screen.height)
name: "landscape"; when: screen.width > screen.height
y:optionbar.y + optionbar.height + screen.margin