Native ads- ad choices icon problem

[halkoy]

Hii, Facebook audience network warned me that my naive ads does not have "ad choices expandable icon". I am using this plugin and I can not find any ad choices icon button option. @floatinghotpot Would you help me pls? How can I add ad choices icon to native ads ?

[W1ldW1ngs]

@halkoy we are also trying to get this resolved for our app.

We had opened an earlier issue ticket about this but not response as of yet from @floatinghotpot

https://github.com/floatinghotpot/cordova-plugin-facebookads/issues/72

[halkoy]

@floatinghotpot We need your help so much urgently. Facebook gives us 1 month to put "ad choices" button to native ads. If we dont put, they will stop serving ads to our native ads. thnx

[floatinghotpot]

Will check the new SDK and add it. Stay tuned.

[floatinghotpot]

Here is a bad news. I found the ad choice button cannot be implemented into Cordova, after checking Facebook documents, https://developers.facebook.com/docs/audience-network/ios-native

Here is why:

The elements of a native ad, recommended by Facebook.

adIconImageView (UIImageView), 
adTitleLable (UILabel), 
adCoverMediaView (FBMediaView), 
adSocialContext (UILabel), 
adCallToActionaButton (UIButton), 
adChoiceView (FBAdChoicesView), 
adBodyLabel (UILabel), 
sponsoredLabel (UILabel)

- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
{
    if (self.nativeAd) {
        [self.nativeAd unregisterView];
    }
    
    self.nativeAd = nativeAd;
    // Wire up UIView with the native ad; the whole UIView will be clickable.
    [nativeAd registerViewForInteraction:self.adUIView
                      withViewController:self];
    
    // Create native UI using the ad metadata.
    [self.adCoverMediaView setNativeAd:nativeAd];
    
    __weak typeof(self) weakSelf = self;
    [self.nativeAd.icon loadImageAsyncWithBlock:^(UIImage *image) {
        __strong typeof(self) strongSelf = weakSelf;
        strongSelf.adIconImageView.image = image;
    }];
    
    // Render native ads onto UIView
    self.adTitleLabel.text = self.nativeAd.title;
    self.adBodyLabel.text = self.nativeAd.body;
    self.adSocialContextLabel.text = self.nativeAd.socialContext;
    self.sponsoredLabel.text = @"Sponsored";
    [self.adCallToActionButton setTitle:self.nativeAd.callToAction
                               forState:UIControlStateNormal];
    self.adChoicesView.nativeAd = nativeAd;
    self.adChoicesView.corner = UIRectCornerTopRight;
}

Originally, the native ad is designed in purpose for real NATIVE apps.

In Cordova apps, everything is HTML DOM element. It was nearly not possible to use native ad in Cordova.

As a workaround, I did some trick and managed to extract the resource from native ad as image or text resource, and pass to javascript, so they can be inserted into DOM.

But, Facebook introduce a the new item, adChoiceView, it's type is FBAdChoicesView, a real native view, it cannot be extracted as image or text and inserted into DOM.

So, unfortunately, the new item cannot be implemented in plugin. Really bad. Very bad.

[charlizesmith]

I have recently tried implementing adchoices into my app. It works for me.

Just refer adRes.adchoice.url for icon and adRes.adchoice.onadchoice for Ad url in javascript template code. Changes are done in FacebookAdPlugin.java in attached zip folder Facebook Adchoice.zip

Hope this helps.

[BigFoppa]

@floatinghotpot I am sorry if I don't fully understand this. But isn't it possible to display the adchoice native view on top of the webview. Saw these plugins that does something like that: https://github.com/devgeeks/VolumeSlider https://github.com/mfdeveloper/cordova-plugin-nativeview /Big

[charlizesmith]

@BigFoppa Check the following html code where adchoice icon is fetched from FacebookAdPlugin.java file(attached above in zip folder) . We can access it via " adRes.adchoice" and add it to our native ad section. But you have to manage so that the ad's clickarea doesn't overlap the adchoice click.

if (data.adType == "native") { var adRes = data.adRes;

				nativeId = data.adId;
				var nativeAdContent = "<span><span onclick='openAdchoice()' class='ad_choice_img_span'><img class='adchoice_logo'  src='" + adRes.adchoice.url + "' width='" + adRes.adchoice.width + "' height='" + adRes.adchoice.height + "' /></span>"
                                    +"<a class='ad_choice'  onclick='openadchoicelink();'>AdChoices</a></span>"+adRes.title + '<br/>'
						+ adRes.body
						+ "<br/>rating: " + adRes.rating + ", " + adRes.buttonText + "<br/>"
						+ adRes.socialContext + "<br/>"
						+ "<img src='" + adRes.icon.url + "' width='" + adRes.icon.width + "' height='" + adRes.icon.height + "'/><br/>"
						//+ "<img src='" + adRes.coverImage.url + "' width='" + adRes.coverImage.width + "' height='" + adRes.coverImage.height + "'/>"
						;
				$('#nativead').html(nativeAdContent);
				
				updateClickArea();
			}
            function openadchoicelink()

{

   cordova.InAppBrowser.open(adchoicelink, "_self", "location=yes");
            

}

[BigFoppa]

@charlizesmith Thanks for your detailed instructions. Unfortunately I have not implemented native ads in my app yet. But I am thinking about it. Do you know if your way is accepted by Facebook (Audience Network)? Have you tried to make the same changes for ios?

@floatinghotpot Will this be implemented in the plugin?

/Big

[jwliang1226]

Hi @floatinghotpot The above solution on android works well. Can you make a solution for IOS?

Hi @charlizesmith Is your way accepted by Facebook?

[jwliang1226]

Hi @floatinghotpot I have tried implementing adchoices on ios. Add following code in FacebookAdPlugin.m

FBAdImage iconForAdChoice = nativeAd.adChoicesIcon; NSMutableDictionary adchoiceInfo = [[NSMutableDictionary alloc] init]; [adchoiceInfo setValue:[nativeAd.adChoicesLinkURL absoluteString] forKey:@"onadchoice"]; [adchoiceInfo setValue:nativeAd.adChoicesText forKey:@"onadchoicetext"]; [adchoiceInfo setValue:[iconForAdChoice.url absoluteString] forKey:@"url"]; [adchoiceInfo setValue:[NSNumber numberWithInt:iconForAdChoice.width] forKey:@"width"]; [adchoiceInfo setValue:[NSNumber numberWithInt:iconForAdChoice.height] forKey:@"height"]; ... [adRes setValue:adchoiceInfo forKey:@"adchoice"];

We don't have to use adChoiceView to solve the problem of adchoice. All the require items are in FBNativeAd.

[charlizesmith]

Yes. It is, no issues yet.

[ghost]

We have created a fork that contains both charlizesmith additions (Android) as well as jwliang1226's additions.

https://github.com/BisManOnline/bmo-cordova-plugin-facebookads

To use with PhoneGapBuild reference the repo

[rafaellop]

@ekubischta @charlizesmith @floatinghotpot Any chances for a PR of the changes to the original repo?

[ghost]

@rafaellop

Here you go:

https://github.com/floatinghotpot/cordova-plugin-facebookads/pull/95

[matte5031]

Is the addchoices icon enough or must the text "AdChoices" be there aswell?

It says "Include the clickable "AdChoices" text on your native ad by using the AdChoices control provided by Audience Network SDK (see FBAdChoicesView for iOS or AdChoicesView for Android)."

on this link: https://developers.facebook.com/docs/audience-network/guidelines/native-ads/

however I don't see the text on the examples above on this link.

anyone know? any help appreciated, thanks!

[unstableair]

Facebook have approved my app (April 2018) with just the AdChoices icon (no extra text). App has 2 native ads, one banner and one square.

[matte5031]

Thanks @unstableair appreciate it!

[matte5031]

@unstableair Another question, if you don't mind.. from the same page they say "Provide enough space to display at least 20 characters of the Advertiser Name. Make sure if the title is longer than 20 characters, that you replace the additional text with an ellipsis"

Do you know if this has to be done? I mean do I have to make it so that the title can't be any longer than 20 characters and if so add ellipsis?

The reason I'm asking is because I've found other information here about 30 characters on the title, maybe there is none? It's a bit confusing.

https://www.facebook.com/help/publisher/255178864813339

help appreciated, thanks once again!

[unstableair]

It's a minimum of 20 chars, more is not a problem.

[Kisoth]

When I was implementing native ads on recycler, with scrolling the adchoices icon apears more than one time and made view more nasty. That is adding again and again if we use the sample code from facebook. We have to modify that from AdChoicesView adChoicesView = new AdChoicesView(mContext, nativeAd, true); adChoicesContainer.addView(adChoicesView); to AdChoicesView adChoicesView = new AdChoicesView(mContext, nativeAd, true); if(adChoicesContainer.getChildCount() > 0){ adChoicesContainer.removeAllViews(); } adChoicesContainer.addView(adChoicesView);