logo indigitall logo indigitall
/Integración indigitall /Push web /Tag Manager
EN

  |  ES

Integración Tag Manager

Guía de integración rápida con TagManager.


Tabla de contenidos



¿Qué necesitas para la integración?


Es importante ya que el proyecto contiene los datos de configuración de tu aplicación, es decir, el dominio donde esta alojada tu web, los certificados de safari o iOS o la clave de firebase que usa android. Todo depende de las plataformas (web o app) que use el proyecto.

Integración


Esta integración hay realizarla alojando los ficheros del SDK en tu servidor, para luego importarlos mediante tu Tag Manager.

Atención: los ficheros deben alojarse en el mismo dominio y subdominio donde se vaya a integrar el servicio


Puedes ver nuestro vídeo tutorial o leer el texto más abajo:



Pasos a seguir


  1. Descarga y descomprime el .zip que contiene los dos ficheros del SDK (sdk.min.js y worker.min.js)



  1. Agrega ambos ficheros a tu proyecto copiandolos en la carpeta de recursos JavaScript. No te preocupes, la ruta es personalizable.


  1. Creación de un nuevo tag desde la consola de Google Tag Manager.


New tag

  1. Accede a la Configuración del Tag.


Tag configuration

  1. Añade las siguientes líneas de código en la parte de Configuración del Tag. Revisa y personaliza los valores de src y workerPath.

Atención: no olvides reemplazar el App Key por el de tu proyecto

<script>
  (function() {
    var el = document.createElement('script');
    el.src = '/indigitall/sdk.min.js';
    el.async = 'true';
    el.addEventListener('load', function(){
      indigitall.init({
        appKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        workerPath:'/indigitall/worker.min.js'
      });
    });
    document.head.appendChild(el);
  })();
</script>


En la consola de Google Tag Manager quedaría de esta forma:


TagManager Custom HTML

  1. En la parte de Elegir un activador selecciona All Pages .


TagManager Choose Trigger

  1. Dale al botón Guardar (arriba a la derecha).


TagManager Last Screen

Validar la integración


Previsualiza y publica el nuevo Tag. En tu página de Google Tag Manager debes tener algo parecido a esto:


TagManager validation

Para probar que la integración se ha realizado correctamente, deberías ser capaz de registrar tu navegador en el servicio de notificaciones y comprobar que no hay errores. Te lo contamos en dos sencillos pasos:


  1. Entra en tu web y acepta el permiso de notificaciones.


New tag

  1. Busca en el log del navegador la llamada PUT /device conteniendo los parámetros appKey, deviceId y pushToken, y que devuelva HTTP 200


[IND]Client:  Method: PUT
URL: https://device-api.indigitall.com/v1/device?appKey=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&deviceId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Request Body: {
  [...]
    "pushToken": "https://fcm.googleapis.com/fcm/send/xxxx",
    "browserPublicKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "browserPrivateKey": "xxxxxxxxxxxx"
}
Response Code: 200
Response Message: OK
Response Body: {
    "deviceId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "enabled": true,
    "platform": "webpush"
}


  1. Envia una notificación desde la consola de indigitall. Es posible que en la consola el contador de dispositivos aparezca a 0. No te preocupes, puede tardar unos minutos en actualizarse, pero no hace falta que esperes, la push debería llegar igualmente.




Siguientes pasos