Clickable area overlapping other elements

[charlizesmith]

I have implemented native ads in Ionic v1 application.

The updateClickarea() works fine on scroll and gets updated as I scroll, but trouble starts with it goes behind the header or any other div or any floating elements in the view.

In such a case, even though part of the the Native Ad is hidden behind the header, but the clickarea remains at the top. clicking on the header element actually throws a click on the FB native Ad, as the green clickarea is still present.

Is there a way to set some z-index on the clickarea so that it can be pushed behind the floating elements? Or some other idea how to solve it ???

[ghost]

We had the same issue and ended up having to do some math to adjust the clickable area to compensate (Note - this is a cordova app using jquery, but, the concept should be the same for ionic)

Here is some sample code that we used. attachedDivId is just the ID of the div that contains the fb ad.

Note: Ours is inside of a scrollable div. So we calculate things a bit differently than the example code you may see in other areas. We just use the straight offsets of the div, and that provides us the correct initial values.

In a nutshell. IF y is higher than the header, set y to the height of the header and then adjust the height value to compensate.

IF the ad is below the footer, then adjust the height of the click area to compensate to just above the top of the footer.

                   var offset = $("#"+this.attachedDivId).offset();
                    var y = offset.top;
                    var x = offset.left;
                    var w = $("#"+this.attachedDivId).width();
                    var h = $("#"+this.attachedDivId).height();

                    //Adjust based on stuff like headers and footers

                    var topHeaderHeight = 50;
                    var windowHeight = $(window).height();
                    var footerHeight = 35;

                    var yNEW = 0;
                    var hNEW = 0;

                    if( y<=topHeaderHeight )
                    {
                        yNEW = topHeaderHeight;
                        hNEW = h - ( topHeaderHeight - y );
                    }
                    else if( y+h > ( windowHeight - footerHeight ) )
                    {                        
                        yNEW = y;
                        hNEW = windowHeight - footerHeight - y;
                    }
                    else
                    {
                        yNEW = y;
                        hNEW = h;
                    }

                    FacebookAds.setNativeAdClickArea(this.fbId, x, yNEW, w, hNEW);

[charlizesmith]

Hi,

Thank you for the detailed answers.

1) Headers or Footers - Solved

Yes, I would be able to manage the header or the footer via dynamically reducing the height of the clickarea, and this avoid the conflict.

Check Figure B. In that, I would be able to manage the header using your logic

2) Floating Icons - How to solve?

But I even have a floating icon on the bottom right for the Add Form... Also, a floating icon at the bottom left with up arrows for quickly jumping to the top.

It is getting difficult to manage these floating icons.

Check Figure A

A hack would be for me to remove the clickarea to the left of that floating icon, but then a part of the banner (to the left of floating icon) is visible but is not clikable. This is very awkward!

Is there a way to set the Z Order of the clickarea, so that any floating elements that might be present on the app would also get safe...

Thanks!

[W1ldW1ngs]

From what me and @ekubischta understand, the click area exists outside of the webview and floats on top as a native element. This would prevent you from z-indexing it. The hacky solution would be restricting the click area away from the floating icon.

[charlizesmith]

Thank you @ekubischta and @W1ldW1ngs for the hacky solution.

[hodaifa82]

can you send me the native add full code after the updates , if any one use phone gap that will be excellent

[ghost]

@hodaifa82 - Most of us all have custom implementations. You will have to write the code in your app that works best for you.

The samples provided by the developer, along with my clickable area code

https://github.com/floatinghotpot/cordova-plugin-facebookads/issues/71#issuecomment-324398975

Should get you going. Note: My example our feed is inside of a div with overflow scroll. If you are using a feed outside of a scrollable div, then you will have to make some changes in the offset calculations I think.

Good luck

[hodaifa82]

@ekubischta @charlizesmith i have no problem with content scrolling on the ad page it self but when im clicking on back or going to new page the ( click area only with no text or image ) remains on the new page overlapping the content ??? what is that is it cashing or what

[charlizesmith]

@hodaifa82 There are 2 ways to do this. Either you can remove the "Clickarea" itself by setting UpdateClickarea to 0 (zero) Or by removing the Ad while going to new page and creating it again when clicked back. If you can think of something better, that will be great

[hodaifa82]

@charlizesmith @ekubischta the native ad very ok but the image is not loading in test , the text and the clickarea are ok but the image don't load