Adding ads

Screen showing the digital good that lets the user remove ads from the Freemium sample app.When we were exploring the UI and creating the store custom component, we introduced the monetization technique of displaying ads at the top of the UI where they don't affect the usability of the game. If users want to remove ads from the game, you can offer an option to remove the ads by purchasing a digital good in the store.

The ads in our sample app are added to the UI using the FreemiumBanner component, which is defined in the FreemiumBanner.qml file. This custom component can be reused for any ads in any app.

Each ad is created in a Container that uses the attachedObjects property and a ComponentDefinition, which defines a Banner ad dynamically. To learn more about this technique, see Dynamic QML components.

The hideAd property is defined for each ad and set to false when the app starts for the first time. If the user purchases the "Remove Ads" digital good, the hideAdChanged() signal is emitted and the onHideAdChanged() signal handler sets the maxHeight and maxWidth of the Container to 0 to remove it from the UI. Each time an ad is added to a page in the UI using the FreemiumBanner component, the hideAd property is set to the Boolean value, removeAdsPurchased, that we define in the main.qml file to represent the purchase state of this digital good.

import bb.cascades 1.0
import bb.cascades.advertisement 1.0

Container {
    property bool hideAd: false
    id: bannerContainer
    
    // If the user pays to remove ads we need 
    // to make sure the ads get deleted from
    // screen immediately.
    onHideAdChanged: {
        if (hideAd) {
            bannerContainer.maxHeight = 0;
            bannerContainer.maxWidth = 0;
        }
    }
    onCreationCompleted: {
        // Only create the ad if the user 
        // has not paid to have them removed
        if (! bannerContainer.hideAd) {
            var bannerControl = adBanner.createObject();
            bannerContainer.insert(-1,bannerControl);
        }
    }
    attachedObjects: [
        ComponentDefinition {
            id: adBanner
            Banner {
                // This is a Test Zone ID 
                // You must replace with your own before 
                // publishing or you won't get paid
                zoneId: 117145 
                refreshRate: 60
                preferredWidth: 320
                preferredHeight: 50
            }
        }
    ]
}

Learning more

In this sample walkthrough, you explored the Freemium sample app and learned how to create a store and offer digital goods in your app. We also introduced several other concepts, such as custom components, monetization, BBM, and ads. Here are some additional resources that you might find useful as you develop your apps:

Last modified: 2014-09-30



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus