App Tracking Transparency Capacitor Ionic Plugin

Capacitor plugin to request user authorization to access app-related data for tracking the user or the device. iOS only.

Read more about Apple's App Tracking Transparency framework here. Also this might be a good read.

Platform support

iOS only but with web fallback for development purposes.

Plugin versions

| Capacitor version | Plugin version | | ---------- | ----------------------------------------- | | 5.x | >= 2.0.2 | | 4.x | >= 2.0.2 | | 3.x | >= 2.0.0 | | < 3.0.0 | 1.x.x |

Install

npm install app-tracking-transparency-capacitor-ionic
npx cap sync

Configuration

Add this to your app's Info.plist and update the message according to your needs:

<key>NSUserTrackingUsageDescription</key>
<string>Your data will be used to deliver personalized ads to you.</string>

This message can be provided in multiple languages by using a InfoPlist.strings file. See the Apple docs or this stack overflow answer for help.

Usage

In Vue >

<script>
import {
  AppTrackingTransparency,
  AppTrackingStatusResponse,
} from 'app-tracking-transparency-capacitor-ionic';

export default {
  async mounted() {
    requestPermission(); 
  },
};

async function requestPermission() {
  try {
    const response = await AppTrackingTransparency.requestPermission();
    console.log(response); // { status: 'authorized' } for example
    status.value = response;
  } catch (error) {
    console.error('Error requesting permission:', error);
  }
}



async function getStatus() {
  try {
    const response = await AppTrackingTransparency.getStatus();
    console.log(response); // { status: 'authorized' } for example
    status.value = response;
  } catch (error) {
    console.error('Error getting status:', error);
  }
}
</script>

In Angular

import {
  AppTrackingTransparency,
  AppTrackingStatusResponse,
} from 'app-tracking-transparency-capacitor-ionic';

...

public async getStatus(): Promise<AppTrackingStatusResponse> {
  const response = await AppTrackingTransparency.getStatus();

  console.log(response);
  // { status: 'authorized' } for example

  return response;
}

public async requestPermission(): Promise<AppTrackingStatusResponse> {
  const response = await AppTrackingTransparency.requestPermission();

  console.log(response);
  // { status: 'authorized' } for example

  return response;
}

Both available methods return AppTrackingStatusResponse with status: AppTrackingStatus, which will be one of the following: authorized, denied, notDetermined or restricted. See Apple's docs for reference.

API

• getStatus()
• requestPermission()
• Type Aliases

getStatus()

getStatus() => Promise<AppTrackingStatusResponse>

Returns: Promise<AppTrackingStatusResponse>

requestPermission()

requestPermission() => Promise<AppTrackingStatusResponse>

Returns: Promise<AppTrackingStatusResponse>

Type Aliases

AppTrackingStatusResponse

{ status: AppTrackingStatus }

AppTrackingStatus

'authorized' | 'denied' | 'notDetermined' | 'restricted'