Capacitor SDK Integration

This guide provides instructions on how to integrate the Capacitor plugin into your Ionic app with Angular. The plugin includes the following features: initialize, checkMNOEligibility, showConsentManager, acceptConsent, rejectConsent, isConsentAccepted, fetchIdConnectData, idConnectData, handleDataClear and addListener.

Prerequisites

Before you start, ensure you have the following:

Node.js and npm installed
Ionic CLI installed
Capacitor CLI installed
An existing Ionic project with Angular

Installation

To install the plugin, run the following command in your project directory:

CODE

npm install utiq-tech@latest
npx cap sync

To install a specific version, visit https://github.com/Utiq-tech/Capacitor-JS-SDK/tags and replace “latest" with the desired version number.

Integration Steps

Initialize

To use the plugin, you need to initialize it in your app. Add the following code in your app.component.ts or a suitable service file.

CODE

import { Component } from '@angular/core';
import { UTIQ } from 'utiq-tech';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})

export class AppComponent {
  constructor() {
  this.initialize();
}

async initialize() {
    const config = { sdkToken: 'SDK_TOKEN', configParams: JSON.stringify(environment.utiq), sdkOptions: { enableLogging: true } };
    await UTIQ.initialize(config);
}

Check MNO Eligibility

To check the eligibility, use the checkMNOEligibility method:

CODE

UTIQ.checkMNOEligibility({ stubToken: STUB_TOKEN });

Show Consent Manager( web only )

To show the consent manager on web, use the showConsentManager method:

CODE

UTIQ.showConsentManager();

Accept Consent

To accept user consent, use the acceptConsent method:

CODE

UTIQ.acceptConsent();

Reject Consent

To reject user consent, use the rejectConsent method:

CODE

UTIQ.rejectConsent();

Is Consent Accepted

To check the user consent, use the isConsentAccepted method:

CODE

const { status: isConsentAccepted } = await UTIQ.isConsentAccepted();

Fetch IDConnect Data

To start the service and get the IDConnect data, use the fetchIdConnectData method:

CODE

await UTIQ.fetchIdConnectData({ stubToken: STUB_TOKEN });

IDConnect Data

Get the IDConnect data previously fetched , use the idConnectData method:

CODE

const { adTechPass, marTechPass } = await UTIQ.idConnectData();

Handle Data Clear

Remove all the data generated or used by UTIQ, use the handleDataClear method:

CODE

UTIQ.handleDataClear();

AddListener

To interact with Utiq events, you need to add the listeners for the Utiq events, use the addListener method:

CODE

UTIQ.addListener('onIdsAvailable', ({ adTechPass, marTechPass }) => {
    console.log(`onIdsAvailable -> mtid: ` + marTechPass + ` , atid: ` + adTechPass);
});

iOS Specific Notes

Permissions: Ensure you have added the necessary permissions in your Info.plist file.
Build Configuration: Make sure to run npx cap sync ios after installing the plugin to update the native iOS project.
Additional Setup: Some plugins might require additional setup in Xcode. Refer to the plugin documentation for more details.

Android Specific Notes

Permissions: Ensure you have added the necessary permissions in your AndroidManifest.xml file.
Build Configuration: Make sure to run npx cap sync android after installing the plugin to update the native Android project.
Proguard Rules: If you are using Proguard, you might need to add specific rules for the plugin. Refer to the plugin documentation for more details.