logo indigitall logo indigitall
/SDK /Push app /Cordova
EN

  |  ES

SDK de Cordova

Guía avanzada para configurar el SDK de Cordova


Tabla de contenidos



1. Propiedades configurables


En esta sección encontrarás una serie de funcionalidades más avanzadas y que requieren de un desarrollo más complejo. Aconsejamos que sea un desarrollador el encargado de esta configuración.


1.1. Activar las notificaciones geolocalizadas


El SDK de indigitall puede gestionar la localización del usuario. Esto te permite usar los filtros de localización en la pantalla de enviar campaña push (Campañas>Push>Nueva campaña push>Filtros>Filtros geográficos)


Location path on console

Una vez hayamos habilitado esta funcionalidad, el usuario final tendrá que dar su consentimiento al permiso de localización y habilitar los servicios de localización de su smartphone, para que la aplicación obtenga la ubicación exacta del usuario.


Incluir el parámetro requestPermission a tu inicialización.


...

window.plugins.indigitall.init({ appKey: "<YOUR_APP_KEY>", senderId: "<YOUR_SENDER_ID>", requestPermission: true });

...


1.2. Asociar el dispositivo a un usuario


Puedes asociar tu propio ID a cada dispositivo. De esta forma te será más sencillo e intuitivo trabajar con nuestra herramienta. Por ejemplo:


Para realizar esta asociación entre tu ID personalizado (externalId), y el identificador que maneja indigitall (deviceId), hay que invocar el método setExternalCode:


window.plugins.indigitall.setExternalCode({externalCode: "YOUR_EXTERNAL_ID"}, (device) => {
            //DO SOMETHING
        },(error) => {
            //LOG ERROR
        });


No te preocupes por nada. Tus IDs se cifran de forma irreversible en el propio teléfono y se mandan de forma segura a nuestros servidores. Ni siquiera el equipo de indigitall puede conocer esta información.


1.3. Filtro WiFi


Si se requiere recoger la información de la WiFi del usuario, además de la configuración del panel de Indigitall, deberás añadir el parámetro wifiFilterEnabled cuando se inicialice el SDK:


window.plugins.indigitall.init({
  appKey: "<YOUR_APP_KEY>",
  senderId: "<YOUR_SENDER_ID>",
  wifiFilterEnabled: true
});


1.3.1 Permisos Android


Para poder obtener la información de la wifi en adroid se necesitan los siguientes permisos y servicios declarados en el manifest:

<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

//Servicio WiFi
<service
    android:name="com.indigitall.android.services.WifiStatusService"
    android:permission="android.permission.BIND_JOB_SERVICE" >
</service>

<receiver android:name="com.indigitall.android.receivers.AlarmReceiver">
    <intent-filter>
        <action android:name="AlarmReceiver.Action.NETWORK_ALARM" />
    </intent-filter>
</receiver>


1.3.2 Permisos iOS


Así mismo, deberás añadir en las opciones del proyecto en Xcode, en Signing & Capabilities la opción Access WiFi Information:


Access WiFi Information


2. Callbacks que ofrece el SDK


Nuestro SDK ofrece diversos callbacks que te ayudan tener mayor control del flujo de ejecución y a implementar comportamientos personalizados.


window.plugins.indigitall.init({ appKey: "YOUR_APPKEY", senderId: "YOUR_SENDER_ID", requestLocation: true }, (device)=> {
            //LOG device
        }, (errorMessage)=>{
            //LOG ERROR
        });


 2.1. SDK inicializado


El objeto device que devuelve el callback se ejecutará cuando el dispositivo ha sido registrado por primera vez, es decir, en la primera ejecución de la app tras ser instalada. y cuando el SDK termine de inicializarse y el dispositivo esté preparado para recibir notificaciones de indigitall.


Recibe como parámetro el objeto Device con la información asociada al dispositivo.


window.plugins.indigitall.init({ appKey: "YOUR_APPKEY", senderId: "YOUR_SENDER_ID", requestLocation: true }, (device)=> {
            console.log("Device: ", Object.values(device));
        });


 2.2. Se ha producido un error


El método de error se ejecutará sólo si se produce un error durante la inicialización del SDK.


Recibe como parámetro la descripción del error.


window.plugins.indigitall.init({ appKey: "YOUR_APPKEY", senderId: "YOUR_SENDER_ID", requestLocation: true }, (device)=> {
            //LOG device
        }, (errorMessage)=>{
            console.log("Error: ", errorMessage;
        });

3. Administrar dispositivo


Esta sección describe las diferentes acciones que se podrían realizar en un dispositivo indigitall. El modelo de dispositivo tendría esta estructura:


device = {
  deviceId: "string",
  pushToken: "string",
  browserPublicKey: "string",
  browserPrivateKey: "string",
  platform: "string",
  version: "string",
  productName: "string",
  productVersion: "string",
  browserName: "string",
  browserVersion: "string",
  osName: "string",
  osVersion: "string",
  deviceType: "string",
  enabled: "boolean",
  externalCode: "string"
};


3.1. Consultar información y estado del dispositivo


Retorna un DeviceCallback si la operación es satisfactoria devuelve un objeto Device.


window.plugins.indigitall.deviceGet((device) => {
  // Do something with device in success function
}, (error) => {
  // Do something in error function
});


3.2. Habilitar / deshabilitar el dispositivo


Puedes elegir deshabilitar el dispositivo para bloquear la recepción de notificaciones. Es un método muy útil para:


Para ello, dispones de los métodos deviceEnable y deviceDisable.


Debes instanciar un onjeto DeviceCallback y pasarlo como segundo parámetro. Este callback recibirá como parámetro el objeto device que contiene toda la información asociada al dispositivo.


window.plugin.indigitall.deviceEnable((device) => {
  // Do something with device in success function
}, (error) => {
  // Do something in error function
});

window.plugin.indigitall.deviceDisable((device) => {
  // Do something with device in success function
}, (error) => {
  // Do something in error function
});


4. Grupos de interés


Nuestro SDK te permite clasificar a los usuarios en diferentes grupos personalizables. Esto es muy útil para:


Recuerda que primero debes definir los grupos con los que quieres trabajar en la consola de indigitall (Herramientas > Grupos de interés). Consulta nuestro manual de usuario para más info.


4.1. Listar grupos


Usa el método topicsList para obtener la lista de grupos que están configurados en tu proyecto de indigitall. El callback de este método recibe como parámetro un array de Topics, que contiene la información de todos los grupos disponibles, además de un flag que indica si el usuario está incluido en alguno de ellos.


window.plugin.indigitall.topicsList((topics) => {
  // Do something with topics in success function
}, (error) => {
  // Do something in error function
});


4.2. Gestionar suscripción


Para gestionar la suscripción del dispositivo a uno o varios grupos, existen dos métodos: topicsSubscribe y topicsUnsubscribe.

Opcionalmente ambos reciben un objeto TopicsCallback como tercer parámetro, que devolverá el listado de todos los Topic del proyecto.


// topics is typeof String[]
window.plugin.indigitall.topicsSubscribe(topics, (topics) => {
  // Do something with topics in success function
}, (error) => {
  // Do something in error function
});

// topics is typeof String[]
window.plugin.indigitall.topicsUnsubscribe(topics, (topics) => {
  // Do something with topics in success function
}, (error) => {
  // Do something in error function
});


5. Enviar eventos personalizados


Tu app puede mandar información a los servidores de indigitall para identificar las acciones y eventos que suceden en ella. Esto te permite automatizar acciones de retargeting.


Para registrar estos eventos hay que llamar al método sendCustomEvent, pasando como parámetro un ID descriptivo (puedes inventarte el que más te guste).

En el caso de Android, opcionalmente recibe un callback que devuelve el objeto device.


window.plugins.indigitall.sendCustomEvent({ event: "YOUR_CUSTOM_EVENT"}, (error) => {
             // Do something in error function
         });


6. Mensajes In-App


Si quieres integrar los mensajes In-App en tu aplicación, puedes hacerlo con varios formatos complementarios:


6.1. Formato banner


A continuación te contamos como instanciar uno o varios mensajes In-App en formato banner.

Recuerda que primero deberías tenerlos definidos en la consola de indigitall. Consulta nuestro manual de usuario para más info.

6.1.1. Un único banner

Crea un div en su página. El tamaño debe coincidir con el que hayas definido en la consola de indigitall (Herramientas > Esquemas In-App/In-Web).


<div id="divView" style="width:1250px; height:285px;"></div>



Una vez que se haya creado el código para mostrar la InApp, hay que instanciarla y llamarla en el método showInApp que podemos ver más abajo. Hay que pasarle como parámetros el código de la InApp, el id del div anterior, el appKey de la aplicación y deviceId del dispositivo y el callback oportuno para obtener la vista y el código. Este callback nos indicará si se ha cargado correctamente o no y en relación a este resultado haremos una acción u otra.
Un ejemplo de código está aquí

window.plugins.indigitall.showInApp({
        divId: "divView_code",
        schemeId: "divView",
        appKey: appKey,
        deviceID: deviceId
    }, (inAppCode, webView) => {
        // DO SOMETHING
    }, (inAppCode, webView, message) => {
        // Log error message
    });


6.1.2. Múltiples banner


Si queremos tener varias InApp para ser mostradas en el flujo de los usuarios hay que seguir los siguientes pasos.
Para ello, en primer lugar se debe crear cada vista div en su página. Cada una de ellas debe tener asignado el mismo tamaño que se creó en InApp/inWeb Schemes de nuestra consola de indigitall.
Tal que así:

  <div id="divView" style="width:1250px; height:285px;"></div>
  <div id="divViewTwo" style="width:980px; height:150px;" ></div>
  <div id="divViewThree" style="width:150px; height:950px;"></div>
...


Una vez que se han creado todos las vistas, hay que instanciarlos mediante el método showMultipleInApp. Antes de llegar a esta llamada hay que crear un par de arrays. El primero de ellos es la lista de los código InApp mientras que el segundo contendrá los identificadores de los div donde aparecerán las InApp. Cuando se llame al método showMultipleInApp hay que pasarle la lista con los identificadores, la lista con los div y además un callback que será el encargado de indicarnos si la operación ha sido satisfactoria o por el contratio ha ocurrido un error.


let inAppCodeList = [];
inAppCodeList.push("divView_code");
inAppCodeList.push("divView_code_two");
inAppCodeList.push("divView_code_three");
...

let divList = [];
divList.push("divView");
divList.push("divViewTwo");
divList.push("divViewThree");
...

window.plugins.indigitall.showMultipleInApp({
      divId: divList,
      schemeId: inAppCodeList,
      appKey: appKey,
      deviceID: deviceId
  }, (inApp, webView) => {
      //DO SOMETHING
  }, (inAppCode, webView, message) => {
      // Log error message
  });


6.2. Formato PopUp


Podría darse el caso que se quisiera mostrar una InApp con un PopUp.


Afortunadamente, en Javascript, para crear una InApp como un PopUp no es necesario un nuevo procedimiento para crearlo. Se puede seguir la misma actuación que para mostrar una única InApp.


7. Recogida de los datos de la push


En el caso de que quisieras obtener el objeto push de tipo json para realizar comprobaciones y/o cuando el usuario haga click en la notificación y sea con la acción de abrir app. El modelo de dispositivo tendría esta estructura:


push = {
  id: "int", 
    appKey: "string",
    title: "string",
    body: "string",
    icon: "string",
    image: "string",
    gif: "string",
    video: "string",
    action: {
          topics: ["string"],
          destroy: "boolean",
          type: "app | url | call | market | share",
          app: "string",
          url: "string",
          call: "string",
          market: "string",
          share: "string"
            }
    buttons: [{
          label:"string",
          action: {
                topics: ["string"],
                destroy: "boolean",
                type: "app | url | call | market | share",
                app: "string",
                url: "string",
                call: "string",
                market: "string",
                share: "string"
                  }
              }]
    data: "string",
    layout: "Layout"
};


Te dejamos este código que ayudará a su obtención:


window.plugins.indigitall.getPush(push => {
    //DO SOMETHING
    },(error)=>{
      // Do something in error function
    });


8. Changelog

[2.3.0] - 07/2020

Añadido

[2.2.0] - 06/2020

Añadido

[2.1.0] - 04/2020

Añadido

[2.0.3] - 04/2020

Añadido

Correcciones

[2.0.2] - 04/2020

Correcciones

[2.0.1] - 03/2020

Añadido

[2.0.0] - 03/2020

Añadido

Correcciones