[🐛] Ads Doesn't respond to tap

[wbalogun]

What happened?

Ads do not open when clicked on or tapped, I tested on the Simulator and Physical device.

Expected Behaviour:

When the Ads is tapped it should open the CTA link.

Demo:

Ads.not.responding.to.click.mov

Code Example (Same from the Docs)

<NativeAdView nativeAd={nativeAd}>
      {nativeAd.icon && (
        <NativeAsset assetType={NativeAssetType.ICON}>
          <Image
            accessibilityIgnoresInvertColors
            source={{ uri: nativeAd.icon.url }}
            width={24}
            height={24}
          />
        </NativeAsset>
      )}

      <NativeAsset assetType={NativeAssetType.HEADLINE}>
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
          {nativeAd.headline}
        </Text>
      </NativeAsset>

      <Text>Sponsored</Text>
      <NativeMediaView style={{ height: 150 }} />
    </NativeAdView>

Platforms

Android and iOS

React Native Info

Node:
    version: 20.10.0
    path: ~/.nvm/versions/node/v20.10.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.3 AI-213.7172.25.2113.9123335
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.17
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /Users/xxx/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.12
    wanted: 0.72.12
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Are your using Typescript?

• My project is using Typescript

package.json

{
...
"dependencies": {
    ...
    "react-native-google-mobile-ads": "14.8.0",
    "react-native": "0.72.12",
    "react": "18.2.0",
    ...
}
...
}

app.json

"react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxx~yyy",
    "ios_app_id": "ca-app-pub-xxx~yyy",
    "delay_app_measurement_init": false,
    "optimize_initialization": true,
    "optimize_ad_loading": true,
    "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you.",
    "sk_ad_network_items": [
      "cstr6suwn9.skadnetwork",
      "4fzdc2evr5.skadnetwork",
      "2fnua5tdw4.skadnetwork",
      "ydx93a7ass.skadnetwork",
      "p78axxw29g.skadnetwork",
      "v72qych5uu.skadnetwork",
      "ludvb6z3bs.skadnetwork",
      "cp8zw746q7.skadnetwork",
      "3sh42y64q3.skadnetwork",
      "c6k4g5qg8m.skadnetwork",
      "s39g8k73mm.skadnetwork",
      "3qy4746246.skadnetwork",
      "hs6bdukanm.skadnetwork",
      "mlmmfzh3r3.skadnetwork",
      "v4nxqhlyqp.skadnetwork",
      "wzmmz9fp6w.skadnetwork",
      "su67r6k2v3.skadnetwork",
      "yclnxrl5pm.skadnetwork",
      "7ug5zh24hu.skadnetwork",
      "gta9lk7p23.skadnetwork",
      "vutu7akeur.skadnetwork",
      "y5ghdn5j9k.skadnetwork",
      "v9wttpbfk9.skadnetwork",
      "n38lu8286q.skadnetwork",
      "47vhws6wlr.skadnetwork",
      "kbd757ywx3.skadnetwork",
      "9t245vhmpl.skadnetwork",
      "a2p9lx4jpn.skadnetwork",
      "22mmun2rn5.skadnetwork",
      "4468km3ulz.skadnetwork",
      "2u9pt9hc89.skadnetwork",
      "8s468mfl3y.skadnetwork",
      "ppxm28t8ap.skadnetwork",
      "uw77j35x4d.skadnetwork",
      "pwa73g5rt2.skadnetwork",
      "578prtvx9j.skadnetwork",
      "4dzt52r2t5.skadnetwork",
      "tl55sbb4fm.skadnetwork",
      "e5fvkxwrpn.skadnetwork",
      "8c4e2ghe7u.skadnetwork",
      "3rd42ekr43.skadnetwork",
      "3qcr597p9d.skadnetwork"
    ]
  }

ios/Podfile

android/build.gradle

android/app/build.gradle

android/settings.gradle

AndroidManifest.xml

[mikehardy]

Have you tried our example from the repository?

[wbalogun]

Have you tried our example from the repository?

Yes, I did. With code from the example repository, it doesn't respond to tap.

I also get this ad validator error

[aimz-yeah]

I noticed this too - I just assumed TestAdverts didn't have a click handler (using old architecture expo 52)

[wbalogun]

I noticed this too - I just assumed TestAdverts didn't have a click handler (using old architecture expo 52)

It wasn't with Live Ads behaving the same way. I had the same assumption so I tested to be sure.

[natsuya-kume]

same here 🤔

[mikehardy]

@wbalogun I have noticed the ad attribution thing, and I was able to influence it by playing with the sizing of the ad text - but that remained a worry for me.

I was not aware that it had no click handler functioning etc, that's a surprise, so this bears investigation. I won't have time myself for quite a while though - so to set expectations - please please please if this affects you (and I assume it affects everyone paying attention here?) - dig in by adding some logging to the relevant code and try to figure out what's happening (or why clicks aren't happening...). We would welcome a PR and would be happy to review+merge one

[aimz-yeah]

I'm happy to help share the load but it would be useful to get some insight into where to start looking (all this is a bit of a black box to me at the moment)

logging the nativeAd output from NativeAd.createForAdRequest(TestIds.GAM_NATIVE) yields this:

{
  "adUnitId": "/21775744923/example/native", 
  "advertiser": "NY Mortgage Inc.", 
  "body": "Your home sweet Queens home - cheaper and sooner than you think!", 
  "callToAction": "Get a quote", 
  "eventEmitter": {}, 
  "extras": undefined, 
  "headline": "Lowest mortgage rates", 
  "icon": {
    "scale": 1, 
    "url": "https://tpc.googlesyndication.com/simgad/12391062613623238557?"}, 
    "images": undefined, 
    "mediaContent": {"aspectRatio": 1.500697350069735, 
    "duration": 0, 
    "hasVideoContent": false
  }, 
  "nativeEventSubscription": {"remove": [Function remove]}, 
  "price": null, 
  "responseId": "0ZuPZ4qCIf7X1fAP_5iv4Qw", 
  "starRating": null, 
  "store": null
}

In particular i've noticed there does not seem to be a navigation URL and the eventEmitter is returning an empty object.

Would we expect to see either of thosein the nativeAd object or would <NativeAdView/> generate this from the responseId?

Just trying to figure whether to focus more on the NativeAd.createForAdRequest() or <NativeAdView/>

[aimz-yeah]

    const listener = nativeAd.addAdEventListener(NativeAdEventType.CLICKED, () => {
      console.log("Native ad clicked");
    });
    const listener2 = nativeAd.addAdEventListener(NativeAdEventType.IMPRESSION, () => {
      console.log("Native ad impression");
    });

NativeAdEventType.CLICKED never fires.
NativeAdEventType.IMPRESSION does.

Just noting this down to share findings lol

[aimz-yeah]

I'm not going to lie, I have absolutely no idea what's going on here so please get involved if you've got this issue too as i'm unreliable.

What I seem to gather is that the & components should be generating a clickable view and this view is not rendering, or click handler is not registered for whatever reason.

[aimz-yeah]

Just to note this issue seems to only be applicable on iOS. Android seems to work as long as you pass in the correct child components.

I'm finding that child components are VERY sensitive to what component you pass through. So far only <Text/> and <Image/> seems to work for me

        <NativeAsset assetType={NativeAssetType.HEADLINE}>
          <Text className={"text-sm"}>{nativeAd.headline}</Text>
        </NativeAsset>

e.g. the above works while replacing text with <Pressable/>, <TouchableOpacity/> and even <View/> - or another component that is a wrapper around <Text/> e.g. <StyledText/> - doesn't

I wonder if React19 would perhaps help with this with passable refs. 🤔

Sorry for rambling guys, hopefully this is at least somewhat useful.

Again...iOS is still completely borked for me, this is only observations on android

[mikehardy]

Running experiments with steps listed and reporting results is science, and it's definitely useful. That usually helps lead to a solution so it's always appreciated!