Native Ads Advanced clickable issue

[郭堯彰]

Hey everybody, 

I'm currently working on Google Native Ads Advanced and the ads can be displayed normally.  

However, I'm having an ads clicking issue.

I've implemented the method that SDK offers, but still have trouble clicking on the ads. 

- (void)registerAdView:(UIView *)adView

       clickableAssetViews:(NSDictionary<GADNativeContentAdAssetID, UIView *> *)clickableAssetViews

    nonclickableAssetViews:

        (NSDictionary<GADNativeContentAdAssetID, UIView *> *)nonclickableAssetViews;

I'm not sure what went wrong so please help me identify the issues. My code is as follows: 

- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeContentAd:(GADNativeContentAd *)nativeContentAd

{

    [adimg setImage:((GADNativeAdImage *)nativeContentAd.images.firstObject).image];

    titleLabel.text = nativeContentAd.headline;

    bodyLabel.text = nativeContentAd.body;

    [btn setBackgroundColor:[UIColor redColor]];

    [btn setTitle:nativeContentAd.callToAction forState:UIControlStateNormal];

    NSDictionary *dict = @{GADNativeContentHeadlineAsset:titleLabel,GADNativeContentImageAsset:adimg};

    NSDictionary *dict1 = @{GADNativeContentBodyAsset:bodyLabel};

    [nativeContentAd registerAdView:self.view clickableAssetViews:dict nonclickableAssetViews:dict1];

}

[Bharani Cherukuri (Mobile Ads SDK Team)]

Hello, 

Thank you for contacting us. Can you make sure that the user interaction is disabled on the call to action view, so the SDK can process the touch events correctly? You may refer to this code sample for additional guidance. If you continue to have an issue with this, could you provide us a sample app of your implementation, so we can take a look at the issue and assist you further? Please use Reply privately to author option to provide us the details.

Regards,

Bharani Cherukuri

Mobile Ads SDK Team

[Bharani Cherukuri (Mobile Ads SDK Team)]

Hi there, 

Thank you for providing the details. Based on the sample app provided, it looks like an implementation issue. Firstly, you will have to create a Native AdView object and set the constraints to fill its container. Once it is done, you will have to associate the content ad view with the content ad objects. This is required to make the ads clickable. Then populate the content ad view with its respective assets. You may refer to our sample app which explains in detail each step to be followed to implement Native Advanced ads. The only difference is you will have to add constraints to the UI elements programmatically. Please go through our sample app and make the necessary changes. If you have any difficulty, let me know and I'll be happy to assist you. 

Regards,

Bharani Cherukuri

Mobile Ads SDK Team

On Monday, November 13, 2017 at 3:37:24 AM UTC-5, 郭堯彰 wrote:

[Matthew Hillebrand]

I finally figured out a way to make the entire native ad clickable without using a .xib. I subclassed GADNativeContentAdView and created a tappableOverlay view that I assigned to an unused asset view in its superclass. In this case, it was the callToActionView. Then I used the not-so-documented GADNativeContentAd.registerAdView() method:

- (void)registerAdView:(UIView *)adView clickableAssetViews:(NSDictionary<GADNativeContentAdAssetID, UIView *> *)clickableAssetViews nonclickableAssetViews: (NSDictionary<GADNativeContentAdAssetID, UIView *> *)nonclickableAssetViews;

Here's a Swift 4 example:

class NativeContentAdView: GADNativeContentAdView  {
    var nativeAdAssets: NativeAdAssets?

    private let myImageView: UIImageView = {
        let myImageView = UIImageView()
        myImageView.configureForAutoLayout()
        myImageView.contentMode = .scaleAspectFill
        myImageView.clipsToBounds = true
        return myImageView
    }()

    private let myHeadlineView: UILabel = {
        let myHeadlineView = UILabel()
        myHeadlineView.configureForAutoLayout()
        myHeadlineView.numberOfLines = 0
        myHeadlineView.textColor = .black
        return myHeadlineView
    }()

    private let tappableOverlay: UIView = {
        let tappableOverlay = UIView()
        tappableOverlay.configureForAutoLayout()
        tappableOverlay.isUserInteractionEnabled = true
        return tappableOverlay
    }()

    private let adAttribution: UILabel = {
        let adAttribution = UILabel()
        adAttribution.configureForAutoLayout()
        adAttribution.text = "Ad"
        adAttribution.textColor = .white
        adAttribution.textAlignment = .center
        adAttribution.backgroundColor = UIColor(red: 1, green: 0.8, blue: 0.4, alpha: 1)
        adAttribution.font = UIFont.systemFont(ofSize: 11, weight: UIFont.Weight.semibold)
        return adAttribution
    }()

    override var nativeContentAd: GADNativeContentAd? {
        didSet {
            if let nativeContentAd = nativeContentAd, let callToActionView = callToActionView {
                nativeContentAd.register(self,
                                         clickableAssetViews: [GADNativeContentAdAssetID.callToActionAsset: callToActionView],
                                         nonclickableAssetViews: [:])
            }
        }
    }

    init() {
        super.init(frame: CGRect.zero)

        configureForAutoLayout()
        backgroundColor = .white
        isUserInteractionEnabled = true
        callToActionView = tappableOverlay
        headlineView = myHeadlineView
        imageView = myImageView
    }

    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func didMoveToSuperview() {
        super.didMoveToSuperview()

        addSubview(myHeadlineView)
        addSubview(myImageView)
        addSubview(adAttribution)
        addSubview(tappableOverlay)
    }

//    override func updateConstraints() {
//          ....
//    }
}

Just be sure to pin the `tappableOverlay` to its superview edges so that they're the same size...in `updateConstraints()`.