3. Native Ad

How to use native Ad

Before you begin native ad integration, you may wish to review the Native Ad Design Guidelines. The guidelines are intended to help you build engaging ad experiences while protecting the integrity of your advertisers’ brand assets. You need to adhere to these guidelines when implementing Yahoo Gemini native ads in your apps.

Before you can integrate the code into your application, you will need to configure the ad space that your code references on the Flurry dev portal. For native ads, the ad space is configured as the “Stream” ad placement. For detailed instructions on how to configure Stream ad spaces, see Creating Gemini Native Stream Ad Spaces. Please create ad space named "NATIVE_AD" and set its type to "Stream".

For all other ad space placements, follow these detailed instructions on how to configure an ad space: Basic Ad Space Setup.

Note: that after you create a Stream ad space on the dev portal, it takes about one hour for the ad space to start serving ads and for the ad space to become active.

For each Activity where Native ads are served, use a single ad space. This ad space can be referenced multiple times in multiple locations within the Activity. For example, if the native ad is placed in multiple cells of a table view, it would be referencing the same ad space name.

Example code: (assume to display native Ad in a DIV with id 'nativead', and jQuery is needed)

		var nativeId = null;
		function updateClickArea(){
			if (nativeId != null) {
				// change the click area
				var offset = $("#nativead").offset();
				var y = offset.top - $(window).scrollTop();
				var x = offset.left - $(window).scrollLeft();
				var w = $("#nativead").width();
				var h = $("#nativead").height();
				AdMob.setNativeAdClickArea(nativeId, x, y, w, h);
			}
		}
		$(window).scroll(function(){
			updateClickArea();
		});
		document.addEventListener('onAdLoaded', function(data){
				if (data.adType == "native") {
					var adRes = data.adRes;
					//alert( JSON.stringify(adRes) );

					// show ad
					nativeId = data.adId;
					var nativeAdContent = adRes.headline
							+ '<br/>summary:'
							+ adRes.summary
							+ "<br/>source: "
							+ adRes.source
							+ "<br/>";
					if(adRes.secBrandingLogo) {
						nativeAdContent = "<img src='" + adRes.secBrandingLogo.url + "' width='" + adRes.secBrandingLogo.width + "' height='" + adRes.secBrandingLogo.height + "'/><br/>";
					}
					if(adRes.secHqBrandingLogo) {
						nativeAdContent = "<img src='" + adRes.secHqBrandingLogo.url + "' width='" + adRes.secHqBrandingLogo.width + "' height='" + adRes.secHqBrandingLogo.height + "'/><br/>";
					}
/*					if(adRes.secOrigImg) {
						nativeAdContent = "<img src='" + adRes.secOrigImg.url + "' width='" + adRes.secOrigImg.width + "' height='" + adRes.secOrigImg.height + "'/><br/>";
					}
					if(adRes.secHqImage) {
						nativeAdContent = "<img src='" + adRes.secHqImage.url + "' width='" + adRes.secHqImage.width + "' height='" + adRes.secHqImage.height + "'/><br/>";
					}
*/
					if(adRes.secImage) {
						nativeAdContent = "<img src='" + adRes.secImage.url + "' width='" + adRes.secImage.width + "' height='" + adRes.secImage.height + "'/><br/>";
					}
					$('#nativead').html(nativeAdContent);
					
					updateClickArea();
				}
		});
		function createNativeAd() {
			FlurryAds.createNativeAd(adid);
		}
		function removeNativeAd() {
			$('#nativead').html("<br/>");
			FlurryAds.removeNativeAd(nativeId);
		}