BlackBerry Ad Services for Cascades
One of the new features added to Cascades in Beta 3 (R9) is the addition of BlackBerry Ad Service. The fine people at RIM have a write up in their official documentation (https://developer.blackberry.com/cascades/documentation/device_platform/advertising/integrating_ads_into_your_app.html) on how to implement this feature. However, there are some missing pieces in their write up. I have let them know and they plan on updating their official docs soon, but until then I figured I’d share the missing pieces here. You could think of this as an “exclusive” write-up… Or the more important take-a-way is that I contacted the Dev Relations team at RIM and they gave me some one-on-one attention on how to solve my issue. So be aware that is an option!
Well, enough of me rambling… see past the break for the FULL write up on how to use BlackBerry Ad Services in Cascades.
This tutorial will read much like the official RIM docs on this subject but I will bold the portions that have been changed. (Step 4 and 6)
Step 1:
Create a new project called “CascadesAdSDKTest”
Step 2:
Add the following line to the .pro file (add somewhere under the “TARGET =” line, which is usually line 2)
LIBS += -lbbcascadesadvertisement
Step 3:
Open the bar-descriptor.xml file and on the “Application” tab check the “Device Identifying Information” permission and if you want location specific ads the “GPS Location” permission.
Step 4:
Here we are going to make the similar UI (3 tabs, showing the 3 different ad sizes) as the RIM provided example however they have quite a few syntax errors and the tabs aren’t shown in the action bar, so the code below is what they probably meant to have on their site:
import bb.cascades 1.0
import bb.cascades.advertisement 1.0
TabbedPane {
showTabsOnActionBar: true
Tab {
title: qsTr("320x50")
Page {
id: tab1
Container {
Label {
text: qsTr("320x50 banner")
horizontalAlignment: HorizontalAlignment.Center
textStyle {
base: SystemDefaults.TextStyles.TitleText
}
}
Banner {
zoneId: 117145
refreshRate: 60
preferredWidth: 320
preferredHeight: 50
transitionsEnabled: true
placeHolderURL: "asset:///placeholder_728x90.png"
backgroundColor: Color.Green
borderColor: Color.Gray
borderWidth: 2
horizontalAlignment: HorizontalAlignment.Center
}
}
}
}
Tab {
title: qsTr("300x50")
Page {
id: tab2
Container {
Label {
text: qsTr("300x50 banner")
horizontalAlignment: HorizontalAlignment.Center
textStyle {
base: SystemDefaults.TextStyles.TitleText
}
}
Banner {
zoneId: 117145
refreshRate: 60
preferredWidth: 300
preferredHeight: 50
transitionsEnabled: true
placeHolderURL: "asset:///placeholder_728x90.png"
backgroundColor: Color.Green
borderColor: Color.Blue
borderWidth: 2
horizontalAlignment: HorizontalAlignment.Center
}
}
}
}
Tab {
title: qsTr("320x48")
Page {
id: tab3
Container {
Label {
text: qsTr("320x48 banner")
horizontalAlignment: HorizontalAlignment.Center
textStyle {
base: SystemDefaults.TextStyles.TitleText
}
}
Container {
layout: DockLayout {
}
layoutProperties: StackLayoutProperties {
spaceQuota: 1.0
}
Container {
layout: DockLayout {
}
layoutProperties: StackLayoutProperties {
spaceQuota: 1.0
}
verticalAlignment: VerticalAlignment.Fill
horizontalAlignment: HorizontalAlignment.Fill
Banner {
zoneId: 117145
refreshRate: 60
preferredWidth: 320
preferredHeight: 48
transitionsEnabled: true
placeHolderURL: "asset:///placeholder_728x90.png"
backgroundColor: Color.Green
borderColor: Color.Gray
borderWidth: 2
horizontalAlignment: HorizontalAlignment.Center
}
}
}
}
}
}
}
One thing to note, is make sure you include “import bb.cascades.advertisement 1.0” in your import items at the top of the code. Refer back to RIM’s docs to see what each parameter means in the Banner class.
Step 5:
In the main.cpp file add the following line to the top of the file:
#include <bb/cascades/advertisement/Banner>
Step 6:
Also one more thing needs to be added to the main.cpp file before the Banner object can be used in QML, which is register the Banner object. To do this you will need to add the following line to the main.cpp file’s constructor:
qmlRegisterType<bb::cascades::advertisement::Banner>("bb.cascades.advertisement", 1, 0, "Banner");
Now when you run the app it should work as RIM intended their example to work. Also, as stated in RIM’s example, realize you are using RIM’s zoneID as a test. So if you haven’t already (and you intend to have ads in your app) create an Ad Services account at https://adservices.blackberry.com/ and from there you can setup your apps to have their own zoneID’s.
And because sometimes it is just easier to see the final working product (rather than reading what I have above), this example app has been added to my github: https://github.com/bcs925/BrianScheirerOpenSource/tree/master/CascadesAdSDKTest
-Brian
