iOS App Tracking Transparency for Ionic 4 Angular

Many of you know apple has introduced app tracking transparency agreement for iOS apps users so that any app that tracks user information or device need consent from the iOS device users like iPhone, iPad and iPod

You must use the AppTrackingTransparency framework if your app collects data about end users and shares it with other companies for purposes of tracking across apps and web sites.

So if your app has any third party logins like Google Login, Facebook Login or so, you need to implement AppTrackingTransparency framework in your app as well.

Native iOS developer has the access to respective functions and classes to implement this quite easily but the non native and hybrid app developers need to have their own solution to implement this.

I am working as a hybrid apps developer using Ionic Framework and Angular with Cordova. While I am writing this post, there is no official plugin for Cordova to implement AppTrackingTransparency framework yet.

I found a free plugin in Github https://github.com/chemerisuk/cordova-plugin-idfa and tested the plugin using following code https://rubberchickin.com/implement-app-tracking-transparency-for-ionic-angular-and-cordova-ios-app/ instructions in Ionic 4 and Angular project, luckily it works like a charm. So here is the detailed procedure of how I used the code in my project so that other people who are looking for the solution can easily implement AppTrackingTransparency framework for their Ionic 4 Angular project with ease!

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 its time to install the plugin for Cordova

cordova plugin add cordova-plugin-idfa
npm i cordova-plugin-idfa --save

Once plugin is installed, we will add the code at app.components.ts which is located at project/src/app folder

 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));
    }
  }

Now you should call the above two functions from initializeApp function like this

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

You are done! Now run Cordova Build Command and test the app to iOS devices or in Simulator. Your iOS version must have be to 14.5 or more and In your iOS device settings check privacy->tracking (setting) it has to be allowed to ask. You will only be able to ask the user once.