SDK con Google Tag Manager - Métodos avanzados
guía avanzada para la integración del Tag Manager de indigitall
Indice
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>