[Arne]

Hi,
my situation is:
– I have a WordPress/JSON API as the backend
– I have a qml app with target android & ios
my goal is:
– I want to show the html output of various advertising providers (like yieldlove or Google Adsense) inside a qml element. I want a qml element like the integration of AdMob.

I tried to do that with the QtWebView component. The rendering and performance is ok, but I can’t disable the default touch functionality. When I swipe down and I came over the webview element, of course it tries to scroll down.

If I set the parameter “enabled” to false, it only works on desktop. On iOS this parameter is ignored. This is my start how I tried to implement what I want:

WebView {
                    id: adWebView
                    anchors.fill: parent
                    url: adWebView.enabled ? padUrl : ""
                    z:0
                    onLoadingChanged: {
                        // WebViewLoadRequest loadRequest
                        if(loadRequest.status == WebView.LoadStartedStatus){
                            adWebView.enabled = true;
                        } else if(loadRequest.status == WebView.LoadSucceededStatus){
                            if(adWebView.loadProgress == 100 || adWebView.loadProgress == 0){
                                // determine height of ad element to change webview height
                                adWebView.runJavaScript("document.getElementById('site-container').clientHeight", function(height){
                                    // adjust webview height
                                    adRect.height = height;
                                    // disable webview for swipescroll experience
                                    adWebView.enabled = false;
                                    // find external a tags
                                    adWebView.runJavaScript("document.getElementById('site-container').getElementsByTagName('a')[0].href", function(url){
                                        console.log("--> add external url", url);
                                        if( typeof url !== 'undefined' ){
                                            adRect.adtarget = url;
                                        }
                                    });
                                });
                            }
                        } else if(loadRequest.status == WebView.LoadFailedStatus){
                            adWebView.enabled = false;
                        }
                    }
                }

I want to see the implementation of AdMob. It renders a small banner at the bottom of the app screen. Do anybody know how to do that? In fact I want something like that, but inside a listview as a listelement.

Thanks for your help!
Arne

[GüntherFelgo Team]

Hi Arne,

as you’ve experienced already, the Qt WebView features are ok – but still very limited. We recommend to go with the AdMob Plugin to show advertisements in your app. It uses a native view and native Frameworks on iOS/Android.

If this is not an option, you can also ask for help in the official Qt forums – maybe someone has more experience with WebView there. You can also file a Qt bug report for the issue of disabling the view, but there’s no guarantee this will be fixed fast.

Best,
Günther

[Arne]

Hi Günther,

the thing is we want to integrate third party advertising networks that are not part of AdMob. For this reason I was wondering if it would be possible to extend the AdMob Plugin or to get an idea how you or who ever the AdMob Plugin has written would give insight on how to do that.

Best,

Arne

[ChristianFelgo Team]

Hi Arne,

we can extend the WebView to support the functionality you requested. I’ve sent you a follow up email about it.

Cheers, Chris