AdCtl: We glue AdMob, Analytics and StartAD with QML
Hey.
In short. Not so long ago on Habré was an article about the crossover of AdMob and Qt through the implementation of cross-platform library. But there was no opportunity there to integrate the library with the QML application. Recently, having decided to embed AdMob in my small new Qt Quick application, I ran into this problem and implemented a small wrapper. But, since I decided to embed advertising, I also needed an analyst.
Rummaged, found the appropriate library for embedding GAnalytics, connected, everything is OK. Published application - began to look for ways to advance. I realized that this is a long-time podmâty business and an indie developer will be quite difficult to advance without a good investment.
')
But suddenly I came across an interesting cross-promoution service - StartAd.mobi. Its essence is that in the first month the network gives you free traffic at times more than you bring. It became interesting, implemented this service in the project in order to check the statistics and try their luck.
As you understand, the integration of each of these solutions turned into a small hell, because the project had three external dependencies that are not clear how to manage.
In the end, I looked at the project code and realized that Frankenstein was starting to turn out, which I urgently need to refactor. And if we refactor, we will select the entire code responsible for interacting with advertising and analytics providers into the subproject, make it an open source, write a software interface and try to maximally facilitate its implementation in any new Qt project.
The main thing that I wanted to achieve is to do as little gestures as possible to integrate such functionality into future projects.
This is how AdCtl was born.
Under the cut, I will talk about the details of the implementation of the library and give examples of its implementation in my own project.
So you are interested in my little description? Fine! Let's see what we have.
The library is a wrapper that currently integrates three external services into one:
Everything except StartAD is started up under Android and it seems that it should start under iOS. For not having the appropriate devices. I can not do and check the normal port.
The meaning of the library is to combine the functions of these services into a single software interface. The logic of working with the library looks like this:
For these purposes we do the following:
In general, everything is as simple and logical as possible.
To achieve this goal is quite simple. Here is what we need to do. For example, we assume that in our Qt project, the android directory is located at PROJECT_ROOT / mobile / android.
1. Add a new Git submodule to our project.
This command will download the source code of the library along with the dependencies.
2. Connect the .pri library file to your project.
Here we set the source directory of the android part of the application and include our .pri file, which already contains all the necessary commands for integrating external libraries.
3. Set up our AndroidManifext.xml by analogy with habrahabr.ru/post/261425
After the 'application' tag, add the line connecting to the Google Play Services project:
Change the android: name parameter of the main activity to “ru.forsk.AdCtl.AdCtlActivity”. With this we will indicate to the compiler that the main class of activity will be our class, which implements all the necessary features.
After the main activity we add another one, specifically for displaying ads:
Finally, add the necessary permissions to the project before the closing tag:
Done! In total, we have integrated three external services in three simple steps.
Well, all the necessary additional files will be automatically copied to the mobile / android directory using qmake tools.
How to use them? I will show for example QML.
Suppose we have a main.qml file which contains one Rectangle.
Wanting to add advertising to our application, we must do the following:
1. Declare a new QML type in main.cpp:
2. Add our new type to our main.qml.
3. Change the description of our root element.
And everything will work!
What's going on here? Very simple.
When declaring a new element of type AdCtl, we set the parameters, which submodules we need in the current application. Available as it is seen from the source 4 modules - AdMob Banner, AbMobInterstitial, StartAd Banner and Google Analytics.
After the declaration of the required modules, we set the ID for each of the external services.
Finally, we set default positions beyond the screen borders and final banner positions based on events. occurring at the moment when the banners received all the information and finally rendered.
At the same time, we shift the position of the root element of our application in this way. so that the banner never overlaps the application interface.
But in general, that's all. Connecting this library to a new project will take no more than 10 minutes, and at the output we get full integration with the three external servers and we can steer the banners as you please.
In addition to the functions described above. The library also provides several methods. which can be pulled at any time.
Methods for managing banners:
Methods for managing Google Analytics:
All described methods are available from QML code with the following syntax:
Actually everything.
In the future, I have to expand the library's functionality and add authorization via Google Play Services, save the results of games in the cloud and interact with achivka.
Waiting for your comments and suggestions. The library makes it easy to connect other advertising platforms. Also, I would not refuse assistance in integrating iOS dependent parts of the code for StartAD and verifying the performance of the GAnalytics and QtAdMob code on this platform.
PS: The link to the demo application is on the GitHub library page .
In short. Not so long ago on Habré was an article about the crossover of AdMob and Qt through the implementation of cross-platform library. But there was no opportunity there to integrate the library with the QML application. Recently, having decided to embed AdMob in my small new Qt Quick application, I ran into this problem and implemented a small wrapper. But, since I decided to embed advertising, I also needed an analyst.
Rummaged, found the appropriate library for embedding GAnalytics, connected, everything is OK. Published application - began to look for ways to advance. I realized that this is a long-time podmâty business and an indie developer will be quite difficult to advance without a good investment.
')
But suddenly I came across an interesting cross-promoution service - StartAd.mobi. Its essence is that in the first month the network gives you free traffic at times more than you bring. It became interesting, implemented this service in the project in order to check the statistics and try their luck.
As you understand, the integration of each of these solutions turned into a small hell, because the project had three external dependencies that are not clear how to manage.
In the end, I looked at the project code and realized that Frankenstein was starting to turn out, which I urgently need to refactor. And if we refactor, we will select the entire code responsible for interacting with advertising and analytics providers into the subproject, make it an open source, write a software interface and try to maximally facilitate its implementation in any new Qt project.
The main thing that I wanted to achieve is to do as little gestures as possible to integrate such functionality into future projects.
This is how AdCtl was born.
Under the cut, I will talk about the details of the implementation of the library and give examples of its implementation in my own project.
So you are interested in my little description? Fine! Let's see what we have.
The library is a wrapper that currently integrates three external services into one:
- Google admob. based on github.com/yevgeniy-logachev/QtAdMob;
- StartAD.mobi is based on github.com/kafeg/SDK-Android;
- Google Analytics is based on github.com/HSAnet/qt-google-analytics .
Everything except StartAD is started up under Android and it seems that it should start under iOS. For not having the appropriate devices. I can not do and check the normal port.
The meaning of the library is to combine the functions of these services into a single software interface. The logic of working with the library looks like this:
- We have a new Android application that we just posted on Google Play;
- We want to promote our application and then monetize it;
- We want to receive statistics on user actions in the application.
For these purposes we do the following:
- Determine the screens where the AdMob banner will be displayed;
- We define the screens where the StartAD.mobi banner will be displayed;
- We integrate the one and the other banners, set up sending information to GAnalytics when users perform certain actions.
In general, everything is as simple and logical as possible.
To achieve this goal is quite simple. Here is what we need to do. For example, we assume that in our Qt project, the android directory is located at PROJECT_ROOT / mobile / android.
1. Add a new Git submodule to our project.
cd $$PROJECT_ROOT/mobile git submodule add https://github.com/kafeg/adctl.git git submodule update --init --recursive This command will download the source code of the library along with the dependencies.
2. Connect the .pri library file to your project.
#AdCtl: Google Analytics, AdMob, StartAD.mobi ANDROID_PACKAGE_SOURCE_DIR = $$PWD/mobile/android include(mobile/adctl/AdCtl.pri) android { OTHER_FILES += \ $$PWD/mobile/android/AndroidManifest.xml } Here we set the source directory of the android part of the application and include our .pri file, which already contains all the necessary commands for integrating external libraries.
3. Set up our AndroidManifext.xml by analogy with habrahabr.ru/post/261425
After the 'application' tag, add the line connecting to the Google Play Services project:
<!--This meta-data tag is required to use Google Play Services.--> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/> Change the android: name parameter of the main activity to “ru.forsk.AdCtl.AdCtlActivity”. With this we will indicate to the compiler that the main class of activity will be our class, which implements all the necessary features.
After the main activity we add another one, specifically for displaying ads:
<!--Include the AdActivity configChanges and theme. --> <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" android:label=" "> <meta-data android:name="android.app.lib_name" android:value="darkstories"/> </activity> Finally, add the necessary permissions to the project before the closing tag:
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> Done! In total, we have integrated three external services in three simple steps.
Well, all the necessary additional files will be automatically copied to the mobile / android directory using qmake tools.
How to use them? I will show for example QML.
Suppose we have a main.qml file which contains one Rectangle.
Rectangle { id: root anchors.fill: parent } Wanting to add advertising to our application, we must do the following:
1. Declare a new QML type in main.cpp:
#include <mobile/adctl/adctl.h> ... //AdCtl QApplication::setApplicationName("Darkstories"); QApplication::setApplicationVersion("1.1"); qmlRegisterType<AdCtl>("ru.forsk.adctl", 1, 0, "AdCtl"); 2. Add our new type to our main.qml.
AdCtl { id: adCtl //manage enabled components adMobBannerEnabled: true adMobIinterstitialEnabled: true startAdBannerEnabled: true gAnalyticsEnabled: true //set ids adMobId: "YOUR_ADMOB_UNIT_ID" startAdId: "YOUR_STARTADMOBI_ID" gAnalyticsId: "YOUR_GANALYTICS_TRACKING_ID" //Start positions for banners. adMobBannerPosition: Qt.point(0,-500) startAdBannerPosition: Qt.point(0,-500) //when StartAd.mobi baners is showed we can to reposition it onStartAdBannerShowed: { console.log("onStartAdBannerShowed"); startAdBannerPosition = Qt.point(0, (appWindow.height - adCtl.startAdBannerHeight * 1.3)) } //when AdMob baners is showed we can to reposition it onAdMobBannerShowed: { console.log("onAdMobBannerShowed"); adMobBannerPosition = Qt.point((appWindow.width - adCtl.adMobBannerWidth) * 0.5, (appWindow.height - adCtl.adMobBannerHeight * 1.5 - 200)) adCtl.showAdMobInterstitial(); } //When all variables are setted, we can to initialize our code Component.onCompleted: { adCtl.init(); adCtl.showAdMobInterstitial(); } } 3. Change the description of our root element.
Rectangle { id: root anchors.fill: parent anchors.bottomMargin: adCtl.startAdBannerHeight Component.onCompleted: { adCtl.sendGaAppView("MainWindow"); } } And everything will work!
What's going on here? Very simple.
When declaring a new element of type AdCtl, we set the parameters, which submodules we need in the current application. Available as it is seen from the source 4 modules - AdMob Banner, AbMobInterstitial, StartAd Banner and Google Analytics.
After the declaration of the required modules, we set the ID for each of the external services.
Finally, we set default positions beyond the screen borders and final banner positions based on events. occurring at the moment when the banners received all the information and finally rendered.
At the same time, we shift the position of the root element of our application in this way. so that the banner never overlaps the application interface.
But in general, that's all. Connecting this library to a new project will take no more than 10 minutes, and at the output we get full integration with the three external servers and we can steer the banners as you please.
In addition to the functions described above. The library also provides several methods. which can be pulled at any time.
Methods for managing banners:
void showAdMobBanner(); void hideAdMobBanner(); void showAdMobInterstitial(); void showStartAdBanner(); void hideStartAdBanner(); Methods for managing Google Analytics:
void sendGaAppView(const QString &screenName = QString()); void sendGaEvent(const QString &category = QString(), const QString &action = QString(), const QString &label = QString(), const QVariant &value = QVariant()); void endGaSession(); All described methods are available from QML code with the following syntax:
adCtl.sendGaEvent("EventCategory", "EventAction", "Event label", "Event value") Actually everything.
In the future, I have to expand the library's functionality and add authorization via Google Play Services, save the results of games in the cloud and interact with achivka.
Waiting for your comments and suggestions. The library makes it easy to connect other advertising platforms. Also, I would not refuse assistance in integrating iOS dependent parts of the code for StartAD and verifying the performance of the GAnalytics and QtAdMob code on this platform.
PS: The link to the demo application is on the GitHub library page .
Source: https://habr.com/ru/post/267275/
All Articles