Implement App Tracking Transparency for Ionic 4 Angular and Cordova based iOS app

Question

My app's update has been rejected by apple because it needs app tracking transparency and i added following lines in my ios info.plist file

<key>NSUserTrackingUsageDescription</key>
<string>Your data will be used to connect external sites to allow you to log-in and track your orders using your email.</string>

I tried this plugin https://github.com/chemerisuk/cordova-plugin-idfa

getInfo(){
    return this.platform
      .ready()
      .then(() => cordova.plugins.idfa.getInfo())
  }

But it shows error in when i run the ionic cordova build iOS. The error is: can not find idfa property in cordova.plugins

Is there any official ionic cordova plugin to implement app tracking transparency? OR anyone has a custom solution for this purpose? Please help.

Answer 1

I have found a solution on a blog

At first, add this to your appname-Info.plist file which is located at platforms/ios/appname/appname-Info.plist

<key>NSUserTrackingUsageDescription</key>
<string>Your Description</string>

Now install the plugin for Cordova

cordova plugin add cordova-plugin-idfa

npm i cordova-plugin-idfa --save

then add the below to app.component

askTrackingPermission() {
      if (this.platform.is('ios')) {
        if (window.cordova) {
          //console.log('trying to request permission ');
          window.cordova.exec(win, fail, 'idfa', "requestPermission", []);
        }
      }
      function win(res) {
        //console.log('success ' + JSON.stringify(res));
      }
      function fail(res) {
        //console.log('fail ' + JSON.stringify(res));
      }
  }
 
readTrackingPermission() {
    if (this.platform.is('ios')) {
      if (window.cordova) {
        window.cordova.exec(win, fail, 'idfa', "getInfo", []);
      }
    }
    function win(res) {
      //console.log('success  ' + JSON.stringify(res));
    }
    function fail(res) {
      //console.log('fail ' + JSON.stringify(res));
    }
  }

dont forget to delclare window as below

declare let window: any; after importing

At last call from initializeApp function

initializeApp() {
this.platform.ready().then(() => {
if (this.platform.is('ios')) {
this.askTrackingPermission();
this.readTrackingPermission();
}
});
}