Display Banner Advertisement Example

Files:

• bannerads/assets/BanneradsScrollView.qml
• bannerads/assets/LabeledLabel.qml
• bannerads/assets/Weather.qml
• bannerads/assets/WeatherIcon.qml
• bannerads/assets/main.qml
• bannerads/assets/720x720/BanneradsScrollView.qml
• bannerads/assets/720x720/WeatherIcon.qml
• bannerads/src/main.cpp
• bannerads/bannerads.pro
• bannerads/translations/bannerads.pro

Description

The Banner Ad's example allows the developer to connect to the Adevertisement services and display in application banner advertisement. These banners reflect the specific settings you have chosen in the Advertisement Service portal, and allow you to track ad performance metrics.

Overview

In this example we will learn how to set up a banner ad which communicates with your specific ad network for this application.

The UI

The UI of this sample application consists of a TabbedPane with 3 Tabs. Each tab represents a banner add with a specific size, but with the same zoneId.

    // this component is used for displaying banner Ad's
    Banner {
        // zone id is used to identify your application and to track Ad performance
        // metrics by the Advertising Service
        zoneId: 117145
        refreshRate: 60
        preferredWidth: 320
        preferredHeight: 50
        transitionsEnabled: true
        // Place holder used when there is no connection to the Advertising Service
        placeHolderURL: "asset:///images/placeholder_728x90.png"
        backgroundColor: Color.Green
        borderColor: Color.Gray
        borderWidth: 2
        horizontalAlignment: HorizontalAlignment.Center
    }

Accompanying the banner ads is a mockup weather application to demonstrate how the banner would look like integrated into an application, and one of the screen positions you could choose to display your advertisments.

    Tab {
        id: tab2

        // describes the size of banner used
        title: qsTr("300x50")
        imageSource: "asset:///images/ratio.png"

        attachedObjects: [
            ComponentDefinition {
                id: page2
                Page {
                    BanneradsScrollView {
                        Container {
                            layout: DockLayout {
                            }

                            ImageView {
                                horizontalAlignment: HorizontalAlignment.Fill
                                verticalAlignment: VerticalAlignment.Fill

                                imageSource: "asset:///images/background.png"
                            }

                            Container {
                                horizontalAlignment: HorizontalAlignment.Fill
                                verticalAlignment: VerticalAlignment.Fill

                                // define tab content here
                                Label {
                                    text: qsTr("300x50 banner")
                                    horizontalAlignment: HorizontalAlignment.Center
                                    textStyle {
                                        base: SystemDefaults.TextStyles.TitleText
                                    }
                                }
                                // this component is used for displaying banner Ad's
                                Banner {
                                    // zone id is used to identify your application and to track Ad performance
                                    // metrics by the Advertising Service
                                    zoneId: 117145
                                    refreshRate: 60
                                    preferredWidth: 300
                                    preferredHeight: 50
                                    transitionsEnabled: true
                                    // Place holder used when there is no connection to the Advertising Service
                                    placeHolderURL: "asset:///images/placeholder_728x90.png"
                                    backgroundColor: Color.Green
                                    borderColor: Color.Blue
                                    borderWidth: 2
                                    horizontalAlignment: HorizontalAlignment.Center
                                }
                                Weather {
                                }
                            }
                        }
                    }
                }
            }
        ]
    }
    // This container lays out visual components of a mock weather application

    Container {
        horizontalAlignment: HorizontalAlignment.Fill
        leftPadding: 30
        rightPadding: 30

        Container {
            horizontalAlignment: HorizontalAlignment.Fill
            topPadding: 50
            Label {
                horizontalAlignment: HorizontalAlignment.Left
                text: qsTr("Current Weather")
                textStyle {
                    base: SystemDefaults.TextStyles.BigText
                    fontWeight: FontWeight.Bold
                }
            }
            Label {
                horizontalAlignment: HorizontalAlignment.Right
                text: qsTr("Friday, October 5, 2012, 16:19 EDT")
                textStyle {
                    base: SystemDefaults.TextStyles.SmallText
                }
            }
        }

        Container {
            leftPadding: 100

            WeatherIcon {
                id: imgTab1
                imageSource: "asset:///images/sun.png"
                verticalAlignment: VerticalAlignment.Bottom
                horizontalAlignment: HorizontalAlignment.Left
                scalingMethod: ScalingMethod.AspectFit
            }

            LabeledLabel {
                tag: qsTr("Feels Like: ")
                text: qsTr("20")
            }
            LabeledLabel {
                tag: qsTr("Wind: ")
                text: qsTr("W 31 km/h")
            }
            LabeledLabel {
                tag: qsTr("Wind Gusts: ")
                text: qsTr("52 km/h")
            }
            LabeledLabel {
                tag: qsTr("Sunrise: ")
                text: qsTr("7:36")
            }
            LabeledLabel {
                tag: qsTr("Sunset: ")
                text: qsTr("18:36")
            }
        }
    }

Banner Implementation

You can use the Advertising Service SDK to integrate ads into your application without having to write a lot of code. To display an ad, you create a QML or C++ file that defines the ad banner, including the size, position, and refresh rate of the banner. When your application displays the banner, the remote ad server sends ad content to your application automatically. Remember to properly set your zone ID which the Advertising Service assigns to you upon sign up, and uses it to identify your application, and to track ad performance metrics.

    zoneId: 117145
    refreshRate: 60
    preferredWidth: 320
    preferredHeight: 48
    transitionsEnabled: true
    // Place holder used when there is no connection to the Advertising Service
    placeHolderURL: "asset:///images/placeholder_728x90.png"