How Can I Integrate HUAWEI Ads into a Huawei HTML5 Quick Game?

How Can I Integrate HUAWEI Ads into a Huawei HTML5 Quick Game? - Huawei Developers

Symptom:
Currently, no ad API is provided for an HTML5 quick game. How can I integrate HUAWEI Ads into my quick game?
Analysis:
Currently, HUAWEI Ads supports only quick apps and runtime quick games, but not HTML5 quick games. You can use a two-way communication mechanism between the web component on the UX page of a quick game and the HTML5 web page of the game to integrate HUAWEI Ads into an HTML5 quick game. The onMessage lifecycle function on the UX page receives messages from an HTML5 page, calls the ad API of quick apps to obtain ad information (only available for native ads and rewarded video ads), and sends the obtained ad information to the HTML5 page through this.$element(‘web’).postMessage({ message: JSON.stringify(result) });.
Solution:
It is recommended that the ad creation and ad API request processes be separately encapsulated in different functions, instead together in the onInit or onMessage lifecycle function. This is because the onInit function is called during page initialization, which implements quicker loading, but it is not suitable for processing complex logic; the onMessage function is used to receive character strings passed by HTML5 pages. After you add a judgment branch, the corresponding function is called to perform specific ad processing.
Note: Currently, the quick app framework supports the creation of ad objects only in the onInit function, but not in functions such as onMessage. Keep the position of the code block unchanged.
For more sample code, you can refer to this site.
https://gist.github.com/Mayism/0a9f12438da0e86f06594e01e7643895
For more FAQs and cases about HUAWEI Ads integration, visit the following link:
https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickapp-access-ads-kit

Related

Quick App Introduction

Definition
Quick apps are a new form of installation-free apps developed based on industry standards. They are developed based on the frontend technology stack and support native rendering, therefore possessing the advantages of both HTML5 apps and native apps. Users do not need to install quick apps and only need to tap them open and enjoy the same experience and performance as native apps.
Advantages
Low Costs
You can use JavaScript and CSS to develop quick apps, reducing the code amount to 20% of that required for developing native Android apps providing the same functions. In addition, you can convert existing HTML5 apps into quick apps quickly
Native Experience
The native rendering technology enables quick apps to provide functions and experience of native Android apps, but requires less memory space and can be updated automatically.
High Retention
Users can tap to use quick apps without installation, add a quick app to their home screen if they want to use it later, and access a used quick app again from entries such as recently used apps or push notifications.
Easy Access
Your quick apps can be distributed to various channels such as AppGallery, Quick App Center, deep links, and HUAWEI Assistant, effectively improving your app exposure.
Usage Process
Find: Find quick apps on AppGallery, HUAWEI Assistant, Global Search, and more.
Open: Tap to open a quick app instantly without installation. Quick apps support automatic update and take up minimum storage.
Use: Enjoy the smooth interaction, stylish UI, comprehensive functions, and optimal performance of quick apps.
Leave: Access a used quick app again by adding it to the home screen or through recently used apps or push notifications.
Quick App Development
Tool
Huawei provides you with a complete set of development tools to develop and debug your quick apps.
HUAWEI Quick App IDE: A one-stop quick app development tool that is built based on the VSCode framework. It provides a complete set of easy-to-use features and capabilities, such as project management, programming, real-time preview, inspection, debugging, cloud test and release, helping you maximize your productivity.
Installing Huawei Quick App IDE Quick App IDE User Guide
Huawei Quick App Loader: Use it to launch and debug quick apps.
Installing Huawei Quick App Loader
Huawei Quick App PC Assistant: Use it to load quick apps to multiple terminals, testing cards, and hap links.
Installing Huawei Quick App PC Assistant PC Assistant Operation Guide
Integration with Huawei Open Capabilities
HUAWEI Quick App allows you to integrate the following capabilities of HMS Core to your quick app:
HUAWEI Account Kit allows you to offer simple, secure, and quick sign-in and authorization functions.
Accessing HUAWEI Account Kit
HUAWEI In-App Purchases allows you to implement the in-app payment function only by simple integration, helping you gain more revenue quickly.
Accessing HUAWEI In-App Purchases
HUAWEI Push Kit allows your app to push messages to users at the right moment. You can send messages to your users through your apps in real time. This helps you maintain closer ties with your users and increases user awareness and engagement.
Accessing HUAWEI Push Kit
HUAWEI Location Kit enables your app to quickly and accurately obtain user locations.
Accessing HUAWEI Location Kit

Thank you very much

Thank You

Very interesting

Are Quick Apps the same as PWAs?

How to identify requests from quick apps on an HTML5 page

How to identify requests from quick apps on an HTML5 page so that the service logic will not instruct users to download an app?
The web component of a quick app uses the same standard HTML execution environment as browsers such as Google Chrome and Safari. When an HTML5 web page is loaded, the User-Agent attribute is reported to the server. The HTML5 web page can obtain the User-Agent object of the current execution environment through the JavaScript function. Therefore, you can set the User-Agent attribute for the web component to identity requests from quick apps.
The implementation procedure is as follows:
1. In the quick app, set the User-Agent attribute of the web component to default.
Code:
<web id='web' src="{{websrc}}" allowthirdpartycookies="true" useragent="default"></web>
2. On the HTML5 page, check whether the window.navigator.userAgent object contains the hap keyword. If yes, the request is from a quick app.
Code:
if (window.navigator.userAgent.indexOf("hap") >= 0) {
// The request comes from a quick app.
}
For details about Huawei developers and HMS, visit the website.
https://forums.developer.huawei.com/forumPortal/en/home?fid=0101246461018590361

Quick App Introduction

Any specific IDE is recommended to develop QuickApp ?

Does it have any restrictions?

HDC 2021: HUAWEI DTM Helps Developers Track Data Without Coding

From October 22 to 24, the HUAWEI DEVELOPER CONFERENCE 2021 (HDC.Together) was held in Songshan Lake, Dongguan. At the HMS Core 6.0: App Services technical session, the product executive of HUAWEI Dynamic Tag Manager (DTM) gave a speech on codeless tag management, and detailed the functions and advantages of DTM, attracting much attention from the audience.
As a tag management system, DTM can help developers flexibly manage data tracking tags for their apps without coding, empowering them to dynamically track specific events and report data to third-party analytics platforms with ease. Such a feature piqued the interests of many developers who attended the conference.
To explain how data is collected and reported without coding, let's look at the DTM service process in the figure above. DTM consists of a cloud portal and client. Developers can create a configuration file on the portal, which is then downloaded by the DTM SDK integrated into their apps. When a user clicks an ad or button in the app, the DTM SDK will collect, process, and send data based on the configuration file. The data can then be sent to HUAWEI Analytics or third-party analytics platforms as required. The configuration process is highly flexible, and even operations personnel with no coding experience can quickly create a configuration file on their own, reducing the workload of programmers.
During the HMS Core 6.0: App Services technical session, the product executive demonstrated how to use DTM with an online shopping app. When a user taps Add to Shopping Cart, the shopping app reports an event containing relevant data to a third-party analytics platform. To implement this feature, we can create a configuration file on DTM, which consists of three parts:
When to report data: This part determines when data will be reported, such as when a user taps the Add to Shopping Cart button.
What data to send: This part configures which data to be sent to the analytics platform, such as product name, color, and version.
Where data is sent to: This part specifies one or more analytics platforms to which the data is reported, for example, HUAWEI Analytics and HUAWEI Ads.
After such an event is generated, the DTM SDK will quickly collect and send the event to the specified analytics platforms based on the configuration file.
The DTM product executive also introduced another big advantage of DTM, which is visual event tracking. With visual event tracking, the native app or web app screen can be replicated on the DTM portal, allowing marketers and developers to directly add tracking events and parameters by clicking relevant elements on the portal page. This has the effect of considerably improving data collection efficiency.
DTM empowers developers to obtain and distribute data with ease by configuring rules or adding visual events.
Efficient Ad Conversion Tracking with DTM
During the session, a product expert from HUAWEI Ads gave a presentation on how HUAWEI Ads and DTM work together to track ad conversions efficiently, and shared his experience of using DTM.
Figure: Presentation on how HUAWEI Ads and DTM work together to track ad conversions efficiently
According to Huawei's statistical data, around 35% of web advertisers now use DTM to promote ad conversions, helping significantly reduce their workloads and improve efficiency. Before using DTM, web advertisers needed to add tracking code to individual web pages, and test and release the code, which is usually a time-consuming process. Following the adoption of DTM, web advertisers can now configure, test, and release tracking events using DTM, reducing the overall process time by 80%. In addition, when tracking events need to be changed, web advertisers can directly do so on the DTM portal without having to write additional code or release an app update, sharply shortening the development period. It comes as no surprise that event tracking with DTM is now the first choice for HUAWEI Ads web advertisers to track conversions on web pages.
Refined Operations with DTM
Figure: Huawei personnel explain DTM functions to developers
DTM garnered much attention for itself at this year's HDC, thanks to its flexibility, efficiency, low cost, support for multiple platforms, and ability to provide mobile app and web page data tracking without coding. Ultimately, the key advantage of DTM is that it allows operations personnel to easily configure and modify rules for reporting events to various analytics platforms, which not only helps reduce development costs but also allows operations personnel to quickly obtain a wide range of data and adjust their operations strategies accordingly.
To learn more about DTM, please visit:
>> DTM official website
>> DTM development guide
>> DTM codelab
If you have any questions, submit a ticket online.

Thanks for sharing!

How to Target Ads Precisely While Protecting User Privacy

Background
When using an app, if pop-up ads keep appearing when we browse app pages but we are not interested in the advertised content, not only will our browsing experience be negatively affected, but we will also quickly become tired of the advertised content. Unwanted ads are usually annoying. Aimless ad targeting and delivery will result in the wrong ads being sent to users and cause poor ad performance.
So, as publishers, how do we guarantee that we can deliver ads to audiences who will be interested in them and how can we decrease users' resistance to advertising? The answer is to collect information about the user requirements of your target audiences or to really know them, and to do so in a way that causes the least annoyance. But when a user is unwilling to share their personal data, such as age, gender, and interests, with my app, placing an ad based on the page that the user is browsing is a good alternative.
For example, a user is reading an article in a news app about the fast-paced development of electric vehicles, rapidly improving battery technology, and the expansion of charging stations in cities. If the targeted advertising mechanism understands the context of the article, when users continue to read news articles in the app, they may see native ads from nearby car dealerships for test driving electric vehicles or ads about special offers for purchasing electric vehicles of a certain brand. In this way, user interests can be accurately discovered, and publishers can perform advertising based on the keywords and other metadata included in the contextual information of the app page, or any other content users are reading or watching, without having to collect users' personal information.
But I can't integrate these features all by myself, so I started searching for tools to help me request and deliver ads based on the contextual information on an app page. That's when I had the great fortune to discover Ads Kit of HMS Core. Ads Kit supports personalized and non-personalized ads. Personalized ad requests require users to grant the app access to some of their personal information, which may not be palatable for some users. Non-personalized advertising, however, is not constrained by this requirement.
Non-personalized ads are not based on users' past behavior. Instead, they target audiences using contextual information. The contextual information includes the user's rough geographical location (such as city) authorized by the user, basic device information (such as the mobile phone model), and content of the current app or search keyword. When a user browses a piece of content in your app, or searches for a topic or keyword to express a specific interest, the contextual ad system scans a specific word or a combination of words, and pushes an ad based on the page content that the user is browsing.
Today, data security and personal privacy requirements are becoming more and more stringent. Many users are very hesitant to provide personal information, which means that precise ad delivery is becoming harder and harder to achieve. Luckily, Ads Kit requests ads based on contextual information, enabling publishers to perform ad delivery with a high degree of accuracy while protecting user privacy and information.
Now let's take a look at the simple steps we need to perform in order to quickly integrate Ads Kit and perform contextual advertising.
Integration Steps
1. Ensure that the following prerequisites are met before you integrate the Ads Kit:
HMS Core (APK) 4.0.0.300 or later should be installed on devices. If the APK is not installed or an earlier version has been installed, you will not be able to call the APIs of the Ads Kit.
Before you begin the integration process, make sure that you have registered as a Huawei developer and completed identity verification on HUAWEI Developers.
Create a project and add an app to the project for later SDK integration.
2. Import the Ads SDK.
You can integrate the Ads SDK using the Maven repository.
That is, before you start developing an app, configure the Maven repository address for Ads SDK integration in your Android Studio project.
The procedure for configuring the Maven repository address in Android Studio is different for Gradle plugin versions earlier than 7.0, Gradle plugin 7.0, and Gradle plugin versions 7.1 and later. Configure the Maven repository address accordingly based on your Gadle plugin version.
3. Configure network permissions.
To allow apps to use cleartext HTTP and HTTPS traffic on devices with targetSdkVersion 28 or later, configure the following information in the AndroidManifest.xml file:
Code:
<application
...
android:usesCleartextTraffic="true"
>
...
</application>
4. Configure obfuscation scripts.
Before building the APK, configure the obfuscation configuration file to prevent the SDK from being obfuscated.
Open the obfuscation configuration file proguard-rules.pro in your app's module directory of your Android project, and add configurations to exclude the SDK from obfuscation.
Code:
-keep class com.huawei.openalliance.ad.** { *; }
-keep class com.huawei.hms.ads.** { *; }
5. Initialize the SDK.
You can initialize the SDK in the activity, or initialize the SDK by calling the HwAds.init(Context context) API in the AdSampleApplication class upon app launch. The latter method is recommended, but you have to implement the AdSampleApplication class by yourself.
6. Request ads based on contextual information.
The SDK provides the setContentBundle method in the AdParam.Builder class for you to pass contextual information in an ad request.
The sample code is as follows:
Code:
RewardAd rewardAd = new RewardAd(this, rewardId);
AdParam.Builder adParam = new AdParam.Builder();
String mediaContent = "{\"channelCategoryCode\":[\"TV series\"],\"title\":[\"Game of Thrones\"],\"tags\":[\"fantasy\"],\"relatedPeople\":[\"David Benioff\"],\"content\":[\"Nine noble families fight for control over the lands of Westeros.\"],\"contentID\":[\"123123\"],\"category\":[\"classics\"],\"subcategory\":[\"fantasy drama\"],\"thirdCategory\":[\"mystery\"]}\n";
adParam.setContentBundle(mediaContent);
rewardAd.loadAd(adParam.build(), new RewardAdLoadListener());
ConclusionNowadays, advertising is an important way for publishers to monetize their apps and content, and how to deliver the right ads to the right audiences has become a key focus point. In addition to creating high quality ads, significant efforts should be placed on ensuring precise ad delivery. As an app developer and publisher, I was always searching for methods to improve ad performance and content monetization in my app. In this article, I briefly introduced a useful tool, Ads Kit, which helps publishers request ads based on contextual information, without needing to collect users' personal information. What's more, the integration process is quick and easy and only involves a few simple steps. I'm sure you'll find it useful for improving your app's ad performance.
ReferencesDevelopment Guide of Ads Kit

Better Mobile App

welcome