Creando links dinámicos con Firebase Dynamic Links.

El concepto de deep linking no es nada nuevo, lleva mucho tiempo funcionando en el mundo web, pero puede que no quede muy claro qué significa. En realidad es un concepto insultantemente simple: un deep link (o “enlace profundo”) sirve para apuntar a un link específico dentro de un website y lleva consigo toda la información necesaria para acceder a la sección deseada.

Para crear un Dynamic Link, podemos usar Firebase console, una API de REST o una API de Builder para Android o iOS, o puedes formar una URL con parámetros de Dynamic Links a un dominio específico de tu app. Esos parámetros especifican los vínculos que quieres abrir, según la plataforma del usuario y si tiene instalada la aplicación.

Cuando un usuario que no tiene instalada tu aplicación abre uno de los Dynamic Links, se lo dirige a la página que se haya declarado para que la instale (normalmente, Play Store o App Store), y luego se abre la aplicación. A continuación, puedes recuperar el vínculo que se pasó a la aplicación y procesar el vínculo directo según corresponda en el caso de tu app.

Los casos de uso más comunes de los Dynamic Links son:

• La conversión de usuarios Web/Escritorio en usuarios de la app de forma cómoda y sin pérdidas de información.
• Campañas promocionales en medios sociales, correo o SMS.
• Permite a los usuarios compartir contenido de la app de forma fácil sin depender de qué plataforma usan o si tienen la app instalada o no.
• Casos avanzados como la codificación del Dynamic Link dentro de balizas beacon o QRs preparados para lanzar la aplicación al ser reconocidos.

En este tutorial se tratará la foma de crear Dynamic Links con parámetros dinámicos, aunque existen más opciones, como por ejemplo:

• Creación de Dynamic Links estáticos con fines promocionales. Por ejemplo, podemos definir que cuando un usuario acceda en su navegador a la página www.example.com/downloadApp sea redireccionado directamente a la página de descarga de la aplicación simplemente registrando un nuevo esquema en la sección de Dynamic Links de Firebase Console y completando el formulario que se muestra al pulsar sobre el botón “Nuevo enlace dinámico”.
• Mediante la API de Dynamic Link Builder para iOS y Android: adecuada cuando los usuarios quieren compartir contenido entre sí o invitar a otros usuarios a conocer la app. Más información aquí para iOS y Android.
• Con parámetros dinámicos: Existen dos formas para abordar este planteamiento:
  • Composición manual de los Dynamic Links: Esta opción es válida si no nos importa el tamaño del enlace, pero es la más desaconsejable ya que los parámetros del deep link son perfectamente legibles en el enlace. Si quieres más información, pincha aquí.
  • A través de la API REST provista por Firebase para la creación de Dynamic Links cortos a partir de la información necesaria. Este será el punto que trataremos más a fondo durante el resto del artículo.

El enlace http://example.com/path1/?param1=X sería un deeplink sobre la página http://example.com/ y ya llevaría consigo todos los parámetros e información necesarios para acceder directamente al recurso deseado dentro del dominio.

Hasta aquí todo correcto. La tecnología de deep linking comenzó a utilizarse en el mundo de la movilidad de la misma forma que en web, pero con el objetivo de redireccionar usuarios potenciales y existentes a una ubicación determinada dentro de una aplicación de Android o iOS desde la web a la que estaban accediendo.

Esto se consigue registrando en nuestra aplicación el esquema de URL que ésta debe reconocer para abrirse en caso de que el usuario navegue a un link que concuerde con el patrón.

En Android, esto se lleva a cabo en el Manifest.xml, donde registramos todos los componentes que conforman nuestra aplicación.

En este ejemplo, vamos a preparar la aplicación para abrir la pantalla ExampleActivity al reconocer cualquier URL de la forma “https://www.example.com/value1” y también “http://www.example.com/value1”.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.android.example">
<application ...
<activity android:name=".ExampleActivity" android:theme="@style/AppTheme">
   <intent-filter>
       <action android:name="android.intent.action.VIEW" />
       <category android:name="android.intent.category.DEFAULT" />
       <category android:name="android.intent.category.BROWSABLE" />
       <data android:scheme="https" android:host="www.example.com"/>
       <data android:scheme="http" android:host="www.example.com"/>
   </intent-filter>
</activity>

Lo primero es incluir dentro del cuerpo de la declaración de la Activity a la que queramos redirigir nuestros deep links un intent-filter con los siguientes campos:

• <action>: especificamos VIEW como intent action para que el filtro pueda ser localizado por Google Search (en otras palabras, hacerlo visible).
• <category>: incluímos tanto BROWSABLE como _DEFAULT _como categorías, la primera para hacer accesible el intent filter desde un navegador web (si no, no redirigiría hasta nuestra app al pulsar el enlace en un navegador) y la segunda para permitir a la app a responder intents implícitos.
• <data>: esta es la pieza más importante. Puede haber más de una etiqueta data y representa las URLs que resuelven a nuestra Activity. Como mínimo han de especificar el atributo scheme, aunque admiten más diferenciaciones como host, path, pathPattern o pathPrefix, en caso de que nuestra app redireccione URLs similares a diferentes secciones. No vamos a entrar en detalle sobre estos valores, pero se puede obtener más información sobre el tema en la página oficial de desarrolladores de Android.

Con esto, nuestra app está preparada para redireccionar a los usuarios que tienen la aplicación instalada a ExampleActivity siempre que accedan a una URL de la forma https://www.example.com o http://www.example.com.

Si la aplicación no está instalada, el deep link direccionará a la tienda correspondiente (Apple Store/Google Play) a la sección de la aplicación para su descarga. Hasta aquí todo sabido, pero entonces… ¿por qué Dynamic Links?

Los deep links son una buena idea pero en la práctica estaban llenos de fallos (muchos no llegaban, redireccionaban mal, no era válido el mismo para iOS y Android o, tras la instalación de la app a través de uno de ellos, la redirección a una sección concreta dejaba de funcionar).

Por eso Firebase ha creado su versión mejorada, exactamente con el mismo funcionamiento, más fiabilidad y con la capacidad de “sobrevivir” al proceso de instalación de la app (además de funcionalidades de generación de invitaciones a tu app mediante el mismo sistema, por ejemplo).

A la vista de estas mejoras, es lógico pensar que todo sigue igual, pero el principal problema viene a la hora de registrar deep links en la consola de Firebase y generar URLs dinámicas (por ejemplo, incluir el identificador de un usuario en la URL para su posterior uso dentro de la app).

Ese es el punto principal que vamos a tratar para que nadie tenga que peregrinar por el desierto de la documentación redundante la primera vez que use este nuevo servicio.

En primer lugar, tendremos que registrar y conectar nuestra aplicación con los servicios de Firebase, lo cual difiere dependiendo de la plataforma en la que queramos integrar sus servicios, aunque está muy bien explicado y es relativamente fácil si seguimos la documentación disponible en su página oficial (Android e iOS).

Una vez configurado, podremos acceder a la consola de Firebase y, al acceder a la sección de Dynamic Links, lo primero que se nos pedirá será registrar un dominio único para nuestros deep links (en nuestro caso, será https://example.page.link).

Y ahora viene la curiosa forma de Firebase de crear nuevos deep links, ofreciendo varias vías diferentes y separadas por funcionalidad, de las cuales las más interesantes en un principio son:

• A través de la propia consola de Firebase. Registramos links con un sufijo personalizado y que resuelven a cierta URL interna (es esta URL la que ha de coincidir con el intent-filter declarado previamente).

De esta forma se puede hacer un seguimiento del rendimiento de dichos links en la propia consola o mediante la API de Analytics.

Esto es útil para links promocionales, ya que resuelven a URLs estáticas, es decir, no podremos enviar parámetros personalizados en cada una.

• Ahora imaginemos que necesitamos enviar mediante un deep link el identificador y el nombre de un usuario (variará para cada usuario) con el fin de mostrarlo en ciertos campos de una pantalla concreta dentro de nuestra aplicación (por ejemplo de esta forma).

Para conseguir este comportamiento, haremos uso de la API REST que pone a nuestra disposición Firebase para generar links con contenido dinámico y compartirlo.

La creación de deep links estáticos no tiene ningún misterio, por lo que nos centraremos en la generación de links dinámicos mediante el uso de la API REST suministrada por Firebase para tal fin. En primer lugar, hemos de apuntar a la siguiente URL:

POST https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=api_key
Content-Type: application/json

• Donde el parámetro api_key es el valor de la “Clave API de Web”, la cual se obtiene de la pantalla de configuración de nuestro proyecto en Firebase Console (Project Overview -> Configuración del Proyecto).

Ahora ya podemos realizar peticiones a dicho servicio con uno de los siguientes cuerpos de request (el resultado es idéntico, solo difieren en la “limpieza” de los parámetros):

{
   "longDynamicLink": "https://example.page.link/?link=https://www.example.com/{userId}/{userName}&apn
=com.example.android&ibi=com.example.ios"
}

{
  "dynamicLinkInfo": {
    "domainUriPrefix": "https://example.page.link",
    "link": "https://www.example.com/{userId}/{userName}",
    "androidInfo": {
      "androidPackageName": "com.example.android"
    },
    "iosInfo": {
      "iosBundleId": "com.example.ios"
    }
  }
}

Como ya hemos comentado, ambas formas de construir nuestro dynamic link son idénticas, si bien en la segunda forma se entienden mucho mejor los parámetros que la componen (también incluidos en la primera llamada pero ya concatenados correctamente en el parámetro longDynamicLink), siendo estos:

• “domainUriPrefix”: el valor del dominio que registramos en la sección de Dynamic Links de Firebase Console.
• “link”: el link de redirección al que resolverá nuestro Dynamic Link (es decir, el que la aplicación está esperando en sus intent-filters para abrirse en una determinada sección).
• “androidInfo”/”androidPackageName": información sobre el identificador de la aplicación en Google Play para poder enlazar el deep link con la página de descarga de la aplicación en caso de no tenerla instalada.
• “iosInfo”/”iosBundleId": información idéntica a la del anterior punto, pero relativa a la aplicación de iOS.

Si todos los pasos se han seguido correctamente, el servicio nos devolverá un campo de la forma:

"shortLink": "https://example.page.link/xPVyLWFy4iLinMYw9"

Hay más parámetros adicionales, por ejemplo si queremos componer nuestro short link de forma que solo ocupe el número mínimo de caracteres necesarios para crear una ruta única. La documentación completa de este servicio se encuentra en este enlace.

Compartiendo el link devuelto por la API el usuario accederá a la página de descarga de nuestra aplicación en caso de no tenerla instalada o a la sección deseada dentro de la misma y llevando consigo los parámetros definidos en el deep link.

De esta manera tiene la seguridad de que no se perderá la información por el camino si hay procesos intermedios como ocurría antes.

El tratamiento de dicho link varía de una plataforma a otra, pero siempre haciendo uso del SDK de Dynamic Links que ofrece Firebase:

• iOS
• Android

Espero que este post sirva de ayuda a los que se enfrentan por primera vez a esta funcionalidad o a los veteranos que quieren mejorar los enlaces dinámicos de sus apps con los nuevos servicios de Firebase, sin perderse excesivamente en los tutoriales difusos que ofrece la plataforma.

Referencias

• Firebase Dynamic Links
• Recibir Dynamic Links
• Crear Dynamic Links: Definición de deeplink