Initialization

This section outlines the steps to initialize the Trackier Cordova SDK in your Cordova or Ionic Native project, enabling tracking of user interactions, attribution, and campaign analytics. Initialization involves retrieving your SDK key (app token) from the Trackier Mobile Marketing Platform (MMP) Panel, configuring the SDK with the key and environment, and registering the provider for Ionic Native apps.

Prerequisites

• Trackier Cordova SDK installed in your project
• A Trackier MMP account with access to the Trackier Panel
• Cordova 9.0 or later
• For Ionic Native apps:
  • Ionic CLI and Capacitor
  • @awesome-cordova-plugins/core package installed
• Basic knowledge of JavaScript, Angular (for Ionic Native), and Cordova development

Retrieve Your SDK Key

To initialize the AppTrove SDK, you need an SDK key (app token) from the Trackier MMP Panel.

Steps to Retrieve the SDK Key

1. Log in to your Trackier MMP account.
2. Select your application from the Dashboard.
3. Navigate to SDK Integration via the left-side navigation menu.
4. Copy the SDK Key to use as the app_token.

Initialize the SDK

After installing the SDK, initialize it by configuring the TrackierConfig object with your SDK key and environment in your Cordova or Ionic Native application. The SDK automatically registers with Cordova's deviceready, resume, and pause events.

Step 1: Configure the SDK for Cordova/Ionic Native

1. Open your main application file (e.g., index.js for Cordova or tab1.page.ts for Ionic Native).
2. Import the required Trackier modules and initialize the SDK after the deviceready event (Cordova) or in the ngOnInit lifecycle hook (Ionic Native).
3. Set the environment to one of the following values based on your deployment stage:
   • TrackierEnvironment.Development
   • TrackierEnvironment.Production
   • TrackierEnvironment.Testing

JavaScript Example (Ionic Native)

tab1.page.ts

import { Component } from '@angular/core';
import { TrackierCordovaPlugin, TrackierConfig, TrackierEnvironment } from '@awesome-cordova-plugins/trackier/ngx';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  constructor(private trackierCordovaPlugin: TrackierCordovaPlugin) {}

  async ngOnInit() {
    /* While Initializing the SDK, you need to pass the SDK key and environment.
     * The first argument is the AppTrove SDK key.
     * The second argument is the environment: "development", "production", or "testing". */
    var key = "0455721b-XXXX-XXXXX-596d818d910a"; // Replace with your SDK key
    var trackierConfig = new TrackierConfig(key, TrackierEnvironment.Development);
    this.trackierCordovaPlugin.initializeSDK(trackierConfig);
  }
}

JavaScript Example (Pure Cordova)

tab1.page.ts

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
  var key = "0455721b-XXXX-XXXXX-596d818d910a"; // Replace with your SDK key
  var trackierConfig = new TrackierConfig(key, TrackierEnvironment.Development);
  TrackierCordovaPlugin.initializeSDK(trackierConfig);
}

Step 2: Register the Provider for Ionic Native

For Ionic Native apps, register the TrackierCordovaPlugin provider in the app module to enable dependency injection.

1. Open the app.module.ts file in your Ionic project.
2. Import the TrackierCordovaPlugin and add it to the providers array.

Example (app.module.ts)

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TrackierCordovaPlugin } from '@awesome-cordova-plugins/trackier/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [TrackierCordovaPlugin, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Verify Initialization

1. Build and run your Cordova or Ionic Native project:
   • For Cordova: cordova run android or cordova run ios
   • For Ionic: ionic cap run android or ionic cap run ios
2. Test on a device or emulator to ensure the SDK initializes without errors.
3. Check the console logs for initialization-related messages (if debug logging is enabled).

Expected Outcome

The SDK will initialize when the application starts, registering with Cordova's lifecycle events and enabling tracking capabilities. You can verify initialization by testing tracking features like events or checking the Trackier Panel for data.

Best Practices

• Secure SDK Key: Store the SDK key securely in a configuration file or environment variables, avoiding hardcoding in source code.
• Choose the Correct Environment: Use TrackierEnvironment.Development or TrackierEnvironment.Testing for testing and TrackierEnvironment.Production for live apps to prevent mixing test and production data.
• Initialize Early: Initialize the SDK as early as possible (e.g., after deviceready for Cordova or in ngOnInit for Ionic) to ensure all events are tracked.
• Validate Initialization: Test initialization in a development environment and verify the SDK key is recognized in the Trackier Panel.
• Use Version Control: Commit initialization code to version control to track changes and facilitate collaboration.
• Test Provider Registration: For Ionic Native, ensure the TrackierCordovaPlugin provider is correctly registered in app.module.ts to avoid runtime errors.

Troubleshooting

• SDK Key Invalid:
  • Verify the SDK key is correctly copied from the Trackier Panel without extra spaces or characters.
  • Ensure the key corresponds to the correct application in the Trackier Panel.
• Initialization Fails:
  • Check console logs for errors related to TrackierCordovaPlugin.initializeSDK.
  • Confirm the SDK package is installed in node_modules/trackier/cordova_sdk.
  • For Ionic Native, ensure the trackier folder is in node_modules/@awesome-cordova-plugins and ionic cap sync was executed.
• Provider Not Registered (Ionic Native):
  • Verify the TrackierCordovaPlugin is imported and added to the providers array in app.module.ts.
  • Check for typos in the import path or provider name.
• Environment Issues:
  • Ensure the environment (Development, Production, or Testing) matches your deployment stage.

For further assistance, refer to the Trackier Documentation Portal or contact Trackier support at support@trackier.com.