Allow multiple native adverts

[antonfire]

A huge list of errors are produced mostly looking like the following:

while processing /Users/anthonybradley/Documents/FacebookSDK/FBAudienceNetwork.framework/FBAudienceNetwork(FBDisplayAdAdapter.o): warning: /var/folders/h9/zf2xtlkd12z1_ygkj8hplkhh17xrbq/C/org.llvm.clang.dzhuowen/ModuleCache/2Y5CKRTSDVTWK/CoreGraphics-N94D31PLFESQ.pcm: No such file or directory

[antonfire]

The above errors are on ionic build iOS in the console and in Xcode error list. It does build in Xcode and run on the device showing Native adverts in a scrollable feed although it seems to demarcate the updateClickArea absolutely rather than relatively so if I scroll the feed, the click area remains in green absolutely positioned in the view port as the feed scrolls beneath it. Is it possible to have the click area follow the element when scrolling? Thanks, great plugin!

[antonfire]

I have got the scroll working, but it seems that each new advert generated for the feed resets the click area to itself, and in doing so removes the previous click area. It seems that all adverts have the same adId. How can I fix this to have multiple click areas, one for each advert? Thanks

[antonfire]

Extract from FB faqs: https://developers.facebook.com/docs/audience-network/faq#a3

How many placement IDs should I create? We recommend using a different placement for each unit in your app since reporting and refresh rates are tied to placement ID. You need to create a different placement ID for any of the different ad formats (banner, interstitial and native) and each unique path that you implement within your app.

If you use native ads in feed and plan to show several units as the user scrolls, then you should use the same placement ID for all the native ad units. If you have several different implementations of native ads, then you should use a different placement ID for each unit.

[antonfire]

I have a max feed length of 200 so just allocated 20 ids each to appear after each 10th feed item.

[pierreNeck]

Hi @antonfire ,

Can you share your code please, I have a probleme with ionic and the clickArea, please can you make an example or post you view + controller ?

Thank you

[danhper]

I am having the same issue: when tapping a view it always opens the last created ad. Is there any solution for this issue, or is the only workaround to create plenty of placement IDs?

[antonfire]

@pierreNeck Post your code and explain what is not working and I'll see if I can see any obvious errors.

@tuvistavie Yes I used multiple ad IDs.

[pierreNeck]

@antonfire It's good for me now ;-)

For people who need implement on Ionic, I confirm it's possible and it's work well. But now I have another problems, ad's are not showing when 'isTesting' is false ! It was working well before, so i thinks the problems become from facebook and my facebook session !

Thanks

[matthieu80]

@antonfire Hey there, Would you have a code sample or a tutorial to implement the FacebookAds in ionic in a long list with refresh? It would be great, I am sure it would help a lot of people. I m turning in circle and cannot find a way through... Thank you, Matt

[antonfire]

@pierreNeck Facebook have disabled ads for non production apps, you'll need to be approved for ads to run them.

[antonfire]

@matthieu80 Decide how often you want to run the ads e.g. every 10 posts, then you'll need to write a directive which you can append onto each tenth list item. I decided on a max feed length of 200 items so 20 advert placement ids were required. In the directive you can set up the ad code to run and return an advert template to replace the directive div. I can't copy paste my code as much of it is proprietary business logic mixed in but you want a directive setup like the below (change the injectables to match what you need):

.directive('fbNativeAdvert', ['$q','$window','$timeout','$rootScope','$cordovaGoogleAnalytics', function($q,$window,$timeout,$rootScope,$cordovaGoogleAnalytics) {

    var adData = {};

    return {
        require: '^$ionicScroll',
        replace: true,
        restrict: 'A',
        scope: {
            adSucceeded: "="
        },
        templateUrl: 'templates/feed-adverts.html',
        link: function($scope, element, attr, scrollCtrl) {

       // put the code shown in https://github.com/floatinghotpot/cordova-plugin-facebookads/blob/master/test/index.html in here

      // You can get the index of the replaced element in ng-repeat by something like $scope.$parent.$index to determine which ad placement id you need (put your ad ids in an array in order) and call like var adId = adIds[($scope.$parent.$index/10)-1]

     }

    };
}])

You'll need to create listeners to set the native ad click area to 0,0,0,0 when you change views or open modals as this click area is an objective C generated frame which overlays the webview. I use broadcast on the rootscope to achieve this, you'll also need to set back to the call to action button when you come back to the relevant view or shut the modal. I use something like:

        function updateClickArea(){
            if (nativeId != null && inViewBool && feedVisible) {
                // change the click area
                var offset = element.find('.actionButton').offset();
                var y = offset.top - $(window).scrollTop();
                var x = offset.left - $(window).scrollLeft();
                var w = element.find('.actionButton').width();
                var h = element.find('.actionButton').height();
                if(FacebookAds) FacebookAds.setNativeAdClickArea(nativeId, x, y, w, h);
            }
            else if (nativeId != null && (!inViewBool || !feedVisible)) {
                if(FacebookAds) FacebookAds.setNativeAdClickArea(nativeId, 0, 0, 0, 0);     
            }
        }

You can expect for this to all take some time to get right coding wise, took me a good while. Hope the above helps get you going in the right direction. I think FB do a JavaScript SDK for ads now btw.

[antonfire]

Html example:

<ion-content class="adScroll" scroll-watch delegate-handle="feedScroll">
<div ng-repeat="item in list">
<div class="yourContent"></div>
<div data-fb-native-advert ng-if="$index % 10 === 0 && $index != 0"></div>
</div>
</ion-content>

Add this into the directive to monitor scroll:

        $(".adScroll").scroll(function(){
            updateClickArea();
        });

In your advert template called from the directive set the call to action button class to "actionButton" so updateClickArea() can find it.

[matthieu80]

@antonfire Thank you! It s very valuable for the rest of us. I see Facebook as a javascript SDK for mobile web indeed, but I suppose we still have to use the Android/Ios SDK for ionic builds.