logo indigitall
/SDK /Push web /Javascript
EN

 | ES

Guía avanzada para la integración del SDK de Javascript de indigitall



Tabla de contenidos



Propiedades configurables


La integración básica de indigitall ofrece una serie muy completa de funcionalidades. Algunos aspectos de estas funcionalidades se pueden ampliar y configurar de diferentes maneras. Estas opciones son configurables por el desarrollador.



Permisos de localización


Los permisos de localización son los encargados de permitir o no poder tener acceso a la localización del dispositivo del usuario.


Para poder usar la funcionalidad de la localización a través del SDK de indigitall es necesario añadir el método requestLoation a la configuración inicial.


Puedes consultar el fragmento de código más abajo.

<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    requestLocation: true
    ...
  })"
  async>
</script>


Actualización de la localización


Es necesario estar al tanto de los cambios de localización del usuario para así poderlo guardar en la herramienta de indigitall.
Para verificar si el dispositivo ha cambiado su ubicación, se debe agregar el callback onLocationUpdated a la configuración inicial para así poder escuchar estos cambios de localización en ese método.
Puedes consultar el extracto de código más abajo.


<script>
  function onLocationUpdated(location){
    console.log("Location\n \t - Latitude:"+location.coords.latitude+"\n \t - Longitude: "+ location.coords.longitude);
  }
</script>

<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    onLocationUpdated: onLocationUpdated
    ...
  })"
  async>
</script>


Set Log Debug

indigitall permite a los desarrolladores poder acceder a toda la información que nos brinda el log.
Si la variable setDebugLog está a falso, ningún log será mostrado. Por otra parte, si esta variable es verdadera por el log aparecerán los mensajes correspondientes al nivel de advertencia de errores al que nos hayamos suscrito.
Puedes consultar el extracto de código más abajo.

<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    setDebugLog: false,
    ...
  })"
  async>
</script>


Código externo


Puedes establecer diferentes Id para registrar un dispositivo de otra manera que no sea un deviceId, como por ejemplo puede ser el email, el nombre.. Este código externo será guardado mediante un método criptográfico de tal manera que no pueda haber manera alguna de conocer este contenido. Esta opción será para actualizar la información del dispositivo así que llamar al método DeviceCallback nos retornará un dispositivo si esta operación fue exitosa. Para ello, necesitas añadir el siguiente código:


// Remember to replace with your external code
indigitall.setExternalCode("YOUR_EXTERNAL_CODE", (device) => {
                    //DO SOMETHING
                    }, (error) => {
                      //LOG ERROR
                    });

* Now you can upload the the list of the campaign with these info instead of the devices list Using Filters.


Evento personalizado


Un evento personalizado es un tipo de evento que se configura para el producto actual. Esto significa que no es un evento propio del SDK.
Este método brinda la opción de agregar un evento a cualquier acción que se desee asignar en su código cuando el cliente realiza esa determinada acción. Se debe configurar el nombre del evento personalizado y un callback será el encargado de recibir la respuesta del servidor indicando si se guardó correctamente o no.
Para saber cómo se hace, puede consultar nuestra guía: Evento personalizado.
En el código de ejemplo de más abajo se puede ver la implementación de todo lo que hemos explicado anteriormente.

indigitall.sendCustomEvent("YOUR_CUSTOM_EVENT", (response) => {
          //DO SOMETHING     
        },(error)=>{
          //LOG ERROR
        });


Inicialización personalizada


Existe la posibilidad de inicializar de manera personalizada para obtener la información de los diferentes estados de la inicialización del SDK. Esto resultados se reciben a través de callbacks.

Nuevo usuario registrado


Para comprobar que un usuario se ha registrado, se necesita asociar el callback onNewUserRegistered en la configuración inicial.
Se puede consultar el extracto de código con la implementación más abajo:

<script>
  function onNewUserRegistered(device){
    console.log("Device onNewUserRegistered: ",device)
  }
</script>

<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    onNewUserRegistered: onNewUserRegistered
    ...
  })"
  async>
</script>


Solicitar el permisos de las notificaciones push


Mediante estos permisos las aplicaciones serán capaces de mostrar las notificaciones que les envíe la herramienta de indigitall.
Para solicitar el estado de los permisos para las notificaciones push se debe añadir el callback requestPushPermission a la configuración inicial.

Este método no funciona on _Edge_ y _Safari_ porque estos navegadores no implementan la API de Permisos


Puedes consultar el código de ejemplo más abajo:


<script>
  function requestPushPermission(permission){
    console.log("RequestPushPermission: "+permission.state);
  }
</script>

<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    requestPushPermission: requestPushPermission
    ...
  })"
  async>
</script>


Solicitar el permisos de localización


Mediante estos permisos las aplicaciones serán capaces de solicitar a los dispositivo la localización del usuario.
Para solicitar el estado de los permisos de localización se debe añadir el callback requestLocationPermission a la configuración inicial.

This method does not work on Edge and Safari because the browsers does not implement the Permission API


Puedes consultar el código de ejemplo más abajo:

<script>
  function requestLocationPermission(permission){
    console.log("RequestLocationPermission: "+permission.state);
  }
</script>

<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    requestLocationPermission: requestLocationPermission
    ...
  })"
  async>
</script>


Mostrar un Error


Se pueden producir comportamientos inesperados dentro todo el flujo del SDK.
To check the error logs, you need add 'onError' callback to initial configuration. Para verificar los registros de errores en el log, se debe agregar el callback onError para la configuración inicial.


<script>
  function onError(error){
    console.log(error);
  }
</script>

<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    onError: onError
    ...
  })"
  async>
</script>



Inicialización del dispositivo y permisos


Para verificar los estados de permisos y la información del dispositivo, se debe agregar el callback onIndigitallInitialized a la configuración inicial.


<script>
  function onIndigitallInitialized(permissions,device){
    console.log("Push Permission: ",permissions.push)
    console.log("Location Permission: ",permissions.location)
    console.log("Device: ", device)
  }
</script>

<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    onInitialized: onIndigitallInitialized
    ...
  })"
  async>
</script>


Inicialización de la carga de indigitall



Esto es un fragmento de código para usar un callback que se encarge de hacer la inicialización de indigitall. Es necesario añadir el indigitall.init dentro del método onDigitallLoaded y cargarlo en el script.
Más abajo se puede consultar un ejemplo con todos los callbacks.


<script>
  function onNewUserRegistered(device){
    console.log("Device onNewUserRegistered: ",device)
  }

  function onIndigitallInitialized(permissions,device){
    console.log("Push Permission: ",permissions.push)
    console.log("Location Permission: ",permissions.location)
    console.log("Device: ", device)
  }

  function onLocationUpdated(location){
    console.log("Location\n \t - Latitude:"+location.coords.latitude+"\n \t - Longitude: "+ location.coords.longitude);
  }

  function onError(error){
    console.log(error);
  }

  function requestPushPermission(permission){
    console.log("RequestPushPermission: "+permission.state);
  }

  function requestLocationPermission(permission){
    console.log("RequestLocationPermission: "+permission.state);
  }

  // Remember to replace with your appKey
  function onIndigitallLoaded(){
    indigitall.init({
      appKey:'765b4222-ae48-xxxx-80e2-213c62f337df',
      workerPath:'./indigitall/worker.min.js',
      requestLocation: true,
      onInitialized: onIndigitallInitialized,
      requestPushPermission: requestPushPermission,
      onNewUserRegistered: onNewUserRegistered,
      requestLocationPermission: requestLocationPermission,
      onLocationUpdated: onLocationUpdated,
      onError: onError            
    });
  }
</script>

<script src="./indigitall/sdk.min.js" onload="onIndigitallLoaded()" ></script>




Dispositivos


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"
};


Cómo obtener el dispositivo

Si por alguna razón en nuestro código queremos obtener la información del dispositivo, podemos hacerlo mediante el callback DeviceCallback. Esta operación cuando es existosa nos devuelve un objeto del tipo Device.
El ejemplo de código está más abajo.


indigitall.deviceGet((device) => {
  // success function
  console.log(device);
},() => {
  // error function
});


Cómo habilitar el dispositivo


La aplicación es capaz de administrar el estado actual del dispositivo en la plataforma indigitall gracias al SDK. Esto es posible gracias al método deviceEnable al que se le pasa un callback. Cuando la operación ha tenido éxito, es retornado un objeto Device a este callback.
El código es el siguiente:


indigitall.deviceEnable((device) => {
  // success function
  console.log(device);
},() => {
  // error function
});


Cómo desactivar el dispositivo


Similar al punto anterior, es posible desactivar el dispositivo desde la app a través del SDK de indigitall. Esto es posible gracias al método deviceDisable al que se le pasa un callback. Cuando la operación ha tenido éxito, es retornado un objeto Device a este callback.


indigitall.deviceDisable((device) => {
  // success function
  console.log(device);
},() => {
  // error function
});


Ejemplo de uso del dispositivo


Vamos a ver la implementación para verificar el estado del dispositivo donde se está ejecutando la aplicación. Llevaremos a cabo las operaciones de: verificar el estado del dispositivo, habilitar el estado del dispositivo y deshabilitar el dispositivo.
Antes que nada necesitamos crear una vista en HTML. Lo haremos de la siguiente manera:


<div id="notifications-manager">
  <p>Notifications:</p>
  <!-- Rounded switch -->
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</div>


Tras esto, añadiremos los estilos para la vista dentro del CSS:


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


Y para finalizar definiremos los eventos indicados anteriormente en la guía en Javascript con jQuery.


$(() => {
  indigitall.deviceGet((device) => {
    if (device && device.enabled === true) {
      $('.switch input[type=checkbox]')[0].checked = true;
    } else {
      $('.switch input[type=checkbox]')[0].checked = false;
    }
  });

  $('.switch span.slider').click(() => {
    if ($('.switch input[type=checkbox]')[0].checked === true) {
      indigitall.deviceDisable((device) => {
        console.log ('device disabled');
      })
    } else {
      indigitall.deviceEnable((device) => {
        console.log ('device enabled');
      })
    }
  });
});


InApp


Los mensajes InApp son pantallas que aparecen dentro de la pantalla del usuario cuando se cumplen una serie de condiciones.
Para integrar las InApp en tu página web, deberías añadir el siguiente código que vamos a ver más abajo:


Una única InApp


En este primer método se carga una InApp en una página. Para llamarlo, se debe crear un div en su página con el tamaño que ya previamente haya creado en InApp/InWeb Schemes de nuestra consola de indigitall. Como este ejemplo:

<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 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í

indigitall.showInApp(divView_code, "divView", (inAppId, div)=>{
                // DO SOMETHING
            },(error)=>{
                // Log error message
            });
WebView myWebView = findViewById(R.id.webViewBanner);


Múltiples InApp


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");
...

indigitall.showMultipleInApp(inAppCodeList, divList,(inAppId, div)=>{
            //DO SOMETHING
        },(error)=>{
             // Log error message
        });


InApp como 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.

Topics


En esta sección se describe la disponibilidad de las operaciones sobre los temas.
El objeto Topic tiene esta estructura:

topics = [{
  code: "string",
    name: "string",
    subscribed: "boolean",
    visible: "boolean",
    parentCode: "string"
},
{
  ...
}];


Lista de temas


Con este método se devuelve la lista de temas mediante un array de objetos Topic. Esto se retorna si la operación ha sido satisfactoria.


indigitall.topicsList((topics) => {
  // success function
  console.log(topics);
}, () => {
  // error function
});


Suscripción


El actual dispositivo podría ser suscrito a varios temas. Si la operación ha sido satisfactoria, este método retonar un array de objetos Topic.


var topicsCodes = ["001", ...];
indigitall.topicsSubscribe(topicsCodes, (topics) => {
  // success function
  console.log(topics);
}, () => {
  // error function
});


Darse de baja


Como el dispositivo actual puede ser suscrito a varios temas, podría darse de baja de alguno de ellos. Si la operación ha sido satisfactoria, este método retorna un array de objetos Topic.


// Recuerda reemplazar con los códigos de tus temas
var topicCodes = ["001", ...];
indigitall.topicsUnsubscribe(topicCodes, (topics) => {
  // success function
  console.log(topics);
}, () => {
  // error function
});


Casos de uso


Firs, you must create your topics (see #UserManual/Tools/Topics) in the indigitall console.

Primero, vamos a crear nuestros temas (consulte #UserManual/Tools/Topics) en laconsola de indigitall.

Para este ejemplo concreto vamos a usar un tema con el nombre: Seguros y el código: 001.

Seguros -> 001

Cómo hacer la suscripción/darse de baja de los temas


En este caso nosotros usaremos el ejemplo anterior para extenderlo con este ejemplo concreto.
Primero vamos a añadir esta vista para el archivo HTML:


<div id="notifications-manager">
  ...

  <p>Topics:</p>
  <ul class="topics">
  </ul>
</div>


Después vamos a eliminar el estilo 'ul' por defecto:


...

ul {
  list-style: none;
}


Y al final habrá que añadir este código a tu archivo Javascript:


$(() => {
  ...

  indigitall.topicsList((topics) => {
    topics.forEach((topic) => {
      $("ul.topics").append(`<li><input type="checkbox"
        id="${topic.code}"
        ${topic.subscribed ? 'checked' : ''}/>
        ${topic.name}</li>`)
    });

    $('ul.topics li input[type="checkbox"]').click((e) => {
      if (e.target.checked === true) {
        indigitall.topicsSubscribe([e.target.id]);
      } else {
        indigitall.topicsUnsubscribe([e.target.id])
      }
    })
  });
});


Suscripción a un tema después de un rato


Para este caso concreto vamos a suscribirnos a un tema cuando hayan pasado 10 segundos.


setTimeout(() => {
  indigitall.topicsSubscribe(['001']);
}, 10000);


Suscripción a un tema cuando ha ocurrido un evento


Para este caso concreto vamos a suscribirnos a un tema cuando un evento haya ocurrido.


document.addEventListener('myEvent', () => {
  indigitall.topicsSubscribe(['001']);
});


User Location


indigitall puede gestionar la ubicación del usuario. Esta característica es opcional, y por defecto está deshabilitada. Si la aplicación requiere esta funcionalidad puedes activar esta opción (mirar la sección 1. Propiedades configurables).


Si la aplicación administra este permiso por sí misma, el SDK de indigitall capturará la ubicación automáticamente una vez que el usuario acepte el permiso.


El SDK de indigitall captura la localización cada doce horas si el usuario abre la URL y tiene la accuracy de la localización del router al cuál está conectado.
Si quieres preguntar al usuario los permisos de localización, establece el parámetro requestLocation a true en el método init().


<!-- Recuerda reemplazarlo con tu appKey -->
<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    appKey:'765b4222-ae48-xxxx-80e2-213c62f337df',
    workerPath:'/indigitall/worker.min.js',
    requestLocation:true
  })"
  async>
</script>

Inicialización personalizada

Esta inicialización se puede realizar a través de NPM o archivos locales.


Si tiene otros ServiceWorkers en su sitio web, puede crear un archivo service-worker.js e importar todos sus ServiceWorkers en él. Siga estos pasos para hacerlo:

  1. Cree un archivo en su proyecto raíz con el nombre service-worker.js

  2. Agregue esta de estas líneas a su archivo service-worker.js:


importScripts('/node_modules/indigitall-webpush/worker.min.js');
// Other imports



importScripts('/indigitall/worker.min.js');
// Other imports


Tu proyecto tendrá la siguiente estructura:


/
|   node_modules/
|   |   indigitall-webpush/
|   |   |   index.js
|   |   |   package.json
|   |   |   readme.md
|   |   |   sdk.min.js
|   |   |   worker.min.js
|   |   ...
|   service-worker.js
|   ...



/
|   indigitall/
|   |   sdk.min.js
|   |   worker.min.js
|   service-worker.js
|   ...


Elimine el parámetro workerPath en el método indigitall.init ({... ~~ workerPath: '/indigitall/worker.min.js'~~ ...}).


<!-- Reemplaza este fragmento con tu appKey -->
<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    appKey:'765b4222-ae48-xxxx-80e2-213c62f337df'
  })"
  async>
</script>



Referencia


Referencia JSdoc



Changelog

[3.1.3] - Octubre de 2019

Arreglos

[3.1.2] - Octubre de 2019

Modificaciones

[3.1.1] - Octubre de 2019

Arreglos

3.1.0 - Agosto de 2019

Añadido