SDK con Google Tag Manager - Métodos avanzados

guía avanzada para la integración del Tag Manager de indigitall

Indice

• Dispositivos
• Temas

Dispositivos

Esta sección describe las diferentes acciones que se podrían hacer en un dispositivo registrado en indigitall. El modelo de dispositivo tiene la siguiente 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"
};

Obtener el dispositivo

Para obtener el dispositivo hay que hacer la llamada que se puede ver en el código siguiente. Si la operación se ha realizado con éxito, el método del DeviceCallback retorna un objeto Device.

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

Activar el dispositivo

La aplicación es capaz de gestionar el estado del dispositivo actual en la plataforma de indigitall. Es posible activar este dispositivo desde la propia aplicación. Con el método que podemos ver más abajo seríamos capaces de retornar el objeto Device si la operación se ha llevado a cabo satisfactoriamente.

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

Desactivar el dispositivo

Tal y como hemos visto en el punto anterior, es posible desactivar el dispositivo desde la propia aplicación. Para hacerlo hay que ejecutar el código que podemos ver más abajo. Si la operación se ha llevado a cabo satisfactoriamente, el callback con el nombre deviceDisable nos retornará un objeto Device.

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

Casos de uso

Este código de ejemplo crea una sección en tu web donde se comprueba el estado del dispositivo (estando activo o inactivo).

<div id="notifications-manager">
  <p>Notifications:</p>
  <!-- Rounded switch -->
  <label class="switch">
    <input type="checkbox">
    <span class="slider round" style=""></span>
  </label>
</div>
<script>
  $(() => {
    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');
        })
      }
    });
  });
</script>

Temas

Esta sección describe las operaciones disponibles sobre los temas. El objeto Topic tiene la siguiente estructura:

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

Lista de Topics

Gracias al método siguiente podemos obtener una lista de temas. Este método retonar un TopicsCallback, encargado de retornar un array de objetos Topic si la operación tiene éxito.

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

Suscripción

El dispositivo actual puede estar suscrito a varios canales. El método siguiente nos retorna un array de objetos Topic si la operación ha sido exitosa.

<script>
  // Remember to replace with your topicCodes
  var topicsCodes = ["001", ...];
  indigitall.topicsSubscribe(topicsCodes, (topics) => {
    // success function
    console.log(topics);
  }, () => {
    // error function
  });
</script>

Dar de baja

Como el dispositivo actual podría estar suscrito a varios canales, se podría dar de baja de estos canales. El código posterior nos muestra cómo se retorna un array de objetos Topic si la operación tiene éxito.

<script>
  // Remember to replace with your topicCodes
  var topicCodes = ["001", ...];
  indigitall.topicsUnsubscribe(topicCodes, (topics) => {
    // success function
    console.log(topics);
  }, () => {
    // error function
  });
</script>

Casos de uso

Primero de todo hay que crear los topics (ver #PlatformManual/Filters/TargetGroups) a través de la consola de indigitall.

En este ejemplo usamos un tema con el nombre: Seguros y el código: 001.

Seguros -> 001

Cómo suscribir y dar de baja a temas

En este caso usaremos el ejemplo anterior como base para extenderlo con el código que podemos ver más abajo.

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

  <p>Topics:</p>
  <ul class="topics" style="list-style: none">
  </ul>
</div>
<script>
  $(() => {
    ...

    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])
        }
      })
    });
  });
</script>

Suscripcion a un tema después de un tiempo

En este caso vamos a suscribirnos a un tema después que hayan pasado 10 segundos (que son 10000 milisegundos, como vemos en el código).

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

Suscripción a un tema cuando un evento ocurre

El código posterior representa la manera de suscribirnos a un tema cuando un evento ocurre.

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