Ionic Angular

Latest Version: 2.0.0

Below are the various processes involved in setting up Spotcheck in Ionic Angular

Installation

To install the SurveySparrowSdk, make sure you are in the root folder of your Ionic Angular project in the terminal and run the following command.

# NPM Installation
npm install surveysparrow-ionic-plugin

# YARN Installation
yarn add surveysparrow-ionic-plugin

• The SurveySparrowSdk requires Internet access to fetch surveys and submit answers

• It also requires camera permission to attend the photo capture Questions.

• So, add the following permissions to the AndroidManifest.xml file for Android

 <uses-permission android:name="android.permission.CAMERA" />
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <queries>
       <intent>
           <action android:name="android.media.action.IMAGE_CAPTURE" />
       </intent>
   </queries>

• Also add the camera permissions in info.plist for IoS

<key>NSCameraUsageDescription</key>
<string>Your-Description</string>

Initialization

Initialize spotchecks in root component's (eg app.component.ts) constructor. Add this once in the entire app.

Anonymous users

If you wish not to keep track of users' data, you can follow the below syntax for initialization.

  constructor() {
    try {
      initializeSpotChecks({
        domainName: ‘your-domain-name',
        targetToken: 'your-target-token’',
        userDetails: {},
        variables: {
          sparrowLang: 'lang-code',
        },
        customProperties: {},
      });
    } catch (error) {
      console.error('Failed to initialize SpotChecks:', error);
    }
  }

Known Users

If you wish to keep track of users' data and perform conditional Survey triggers, you can follow the below syntax for initialization.

  constructor() {
    try {
      initializeSpotChecks({
        domainName: ‘your-domain-name',
        targetToken: 'your-target-token’',
        userDetails: {
          email:"<user_email>",
          mobile:"<user_mobile>",
          uuid: '<uuid_value>' // Optional
        },
        variables: {
          sparrowLang: "ta" // Eg: ta, en,
          <api_identifier_of_variable>:"<variable_value>",
        },
        customProperties: {
          <custom_property_name>: ‘<custom_property_value>’
        },
      });
    } catch (error) {
      console.error('Failed to initialize SpotChecks:', error);
    }
  }

Add Spotcheck tag in last line of the html in the root component's html eg(app.component.html)

  <ion-app>
    <ion-router-outlet></ion-router-outlet>
  </ion-app>
  
  <SpotCheck />

Screen Track

It provides the ability to keep track of screens the users are visiting and to enable the survey trigger on that screen. Also user can able to pass the dynamic variables in the screen tracking function. Call the trackScreen function in ngOnInit of a screen.

Syntax:

  ngOnInit() {
    this.trackHomeScreen();
  }

  private async trackHomeScreen() {
    try {
      await trackScreen({
        screen: 'HomeScreen',
        options: {
          userDetails: {
            email: '<user_email>',
            mobile: '<user_mobile>',
            uuid: '<uuid_value>' // Optional
          } // optional,
          variables: {
            sparrowLang: 'ta', // Language code (e.g., 'ta', 'en')
            <api_identifier_of_variable>: '<variable_value>',
          } // optional,
          customProperties: {
            <custom_property_name>: '<custom_property_value>'
          } // optional
        },
      });
    } catch (error) {
      console.log('Error tracking home screen:', error);
    }
  }

Example:

If a survey needs to be triggered on the payment page, the name of the ScreenName should be specified in the TrackScreen function. Also we can pass the dynamic variables as shown below.

  ngOnInit() {
    this.trackHomeScreen();
  }

  private async trackHomeScreen() {
    try {
      await trackScreen({
        screen: 'HomeScreen',
        options: {
          variables: {
            sparrowLang: 'en',
          },
          userDetails: {
            email: '[email protected]',
          },
          customProperties: {
            userId: 10000234
          }
        },
      });
    } catch (error) {
      console.log('Error tracking home screen:', error);
    }
  }

Event Track

It provides the ability to keep track of events which when triggered, will enable the survey to be popped. trackEvent function can be called in any events of a screen.

Syntax:

  try {
    await trackEvent({
      screen: '<your-screen-name>',
      event: {
        <your-events-or-functions>: {
          <your-event-property>: <your-event-property-value>,
        },
      },
    });
  } catch (error) {
    console.error('Error tracking home event:', JSON.stringify(error));
  }

Example:

If a survey needs to be triggered when the user completes a payment, then the TrackEvent function should be called with the respective ScreenName and optional custom properties.

  try {
    await trackEvent({
      screen: 'PaymentScreen',
      event: {
        paymentCompletedEvent: {
          paymentStatus: "COMPLETED",
          paymentDoneOn: Date.now().toString(),
          email: gokulkrishnaraju@surveysparrow.com
        },
      },
    });
  } catch (error) {
    console.error('Error tracking home event:', JSON.stringify(error));
  }

Make sure to have the eventName configured in the Checks section of the configure panel