Saltar al contenido

Ionic Deep Linking o como indexar páginas de nuestra aplicación

Deep Linking Ionic

En el artículo de hoy vamos a hablar de una de las funcionalidades que están marcando la diferencia en el desarrollo profesional. No todas las aplicaciones, sobre todo las amateurs, aun que cada vez más, la utilizan, pero es una parte importante que debemos conocer. Se trata del Deep Linking, o enlaces profundos, y sirve, básicamente, para abrir una página concreta de nuestra aplicación desde un navegador directamente. Y nosotros vamos a ver cómo se usan en Ionic Framework ahora mismo. Vamos al lío.

Eyyyy Hola guapa lectora, majo lector, ¿cómo vamos en esta noche de lunes? Espero que genial por que hoy vengo con algo interesante de narices. Algo que marca la diferencia, sobre todo en proyectos que tienen una web grande. Hablamos del DeepLinkg, el sistema que nos permite abrir en nuestra app una página concreta de nuestra web. Todos sabemos que el internet en la actualidad es móvil, ¿verdad? Bueno, a excepción de los que nos dedicamos a esto, que nos pasamos el día trabajando. 🙂

Si has llegado aquí, pero aún no sabes bien que es esto del Deep Linking. Estoy seguro al 100% de que cuando navegas desde el móvil, en determinadas webs, sobre todo de autoridad, aparece en la parte superior, o inferior, de la pantalla un banner en el que pone, por ejemplo: «Mira este contenido en nuestra app». Pues bien, si le pulsas, y si tienes la app instalada, directamente se abrirá esa página en la app. Aumentando así mucho el engagement, la permanencia y la calidad de cliente que nos acaba de visitar. Visto el ejemplo, vamos a ello.

 

Cómo instalar Deep Linking en Ionic

Bueno, esto no es una sorpresa, pero para quien no lo sepa aún, necesitamos instalar el módulo dentro de nuestra instalación de Ionic Framework. Para hacerlo tenemos que ejecutar los siguiente dos comandos:

ionic cordova plugin add ionic-plugin-deeplinks
npm install @ionic-native/deeplinks

La primera línea instalará el plugin que permitirá la comunicacion con la parte nativa del sistema donde se esté ejecutando. La segunda instalará el código TS necesario para poder comunicarnos con el plugin desde nuestro código.

Y listo, ya tenemos todo a punto para poder poner en marcha toda la maquinaria.

Plataformas soportadas para Deep Linking

Continuamos hablando de las plataformas que soporta Ionic para este complemento. Como era de esperar, y refiriéndose solo a la plataforma móvil, lo tenemos en Android e iOS. Pero también, y sobre todo con el crecimiento de la PWA, también lo tenemos en browser.

Preparación del sistema

Ahora vamos a ver como podemos comenzar a usar el módulo en nuestro proyecto. Aunque la configuración sea básica, es necesaria. Tendremos que incluir el componente en nuestros providers, ya sean de la clase base «AppModule» o de un componente aislado para que no lo cargue todo el tiempo.

providers: [
    ....,
    Deeplinks,
    ....
]

 

Como usar Deep Linking para Ionic con ejemplos

Ahora vamos a lo que nos interesa de verdad, los ejemplos / example de como podemos usarlo y haces push de ellos. Pero antes de continuar, veamos un poco de código:

import { Deeplinks } from '@ionic-native/deeplinks/ngx';

constructor(private deeplinks: Deeplinks) { }

this.deeplinks.route({
     '/about-us': AboutPage,
     '/universal-links-test': AboutPage,
     '/products/:productId': ProductPage
   }).subscribe(match => {
     // match.$route - the route we matched, which is the matched entry from the arguments to route()
     // match.$args - the args passed in the link
     // match.$link - the full link data
     console.log('Successfully matched route', match);
   }, nomatch => {
     // nomatch.$link - the full link data
     console.error('Got a deeplink that didn\'t match', nomatch);
   });

 

Sencillo, ¿verdad? En primer lugar, tenemos que inyectar en el constructor de nuestra clase una instancia de DeppLinks. La clase que usaremos para dar vida a nuestro monstruito.

Posteriormente, como vemos en el código, tenemos que crear las rutas para nuestra app. Por regla general, y si la app es muy grande, como un medio de comunicación, no sería lógico cargar una por una. Para ello nos traeríamos las rutas con un servicio web y se rellenarían con un for.

Pero vamos, que el ejemplo deja muy claro como se tiene que utilizar, no hay más que explicar. Después de ejecutar esto, y siempre y cuando esté todo configurado en la consola de desarrollador de Google para que pille bien las URL, que si no sabes como se hace lo explicaré en otro artículo, todo estaría a punto.

Ahora solo quedaría esperar a que Google emparejase las URL de nuestra web con nuestra app y a funcionar. Por otro lado, y a parte de lo de Google, cuando uses un navegador en el que un enlace de tu web hace match con el link profundo de la app, el dispositivo preguntará si se quiere abrir con esta. Interesante, ¿no es cierto?

Por si el primero no te ha quedado del todo claro, aquí va otro ejemplo:

this.deeplinks.routeWithNavController(this.navController, {
  '/about-us': AboutPage,
  '/products/:productId': ProductPage
}).subscribe(match => {
    // match.$route - the route we matched, which is the matched entry from the arguments to route()
    // match.$args - the args passed in the link
    // match.$link - the full link data
    console.log('Successfully matched route', match);
  }, nomatch => {
    // nomatch.$link - the full link data
    console.error('Got a deeplink that didn\'t match', nomatch);
  });

Por cierto, cómo habrás visto, para usar este componente necesitas una web. Para tener una, cómo sabrás, hace falta un hosting. Yo me cambié hace unas semanas con los chicos de Raiola Networks y estoy encantadísimo. He mejorado rendimientos más de un 30% al mismo precio. Cómo consejo te invito a que los pruebes y juzgues por ti mismo. Seguro que te ayudan igual que a mi. Aquí tienes en enlace con más detalles.

 

¿Ionic deep linking not working? ¿cómo? Es por esto:

Bueno, esto es un poquito inhusual. Algunos me habéis preguntado por que no os funciona bien el componente. Y no es por que no os funcione bien, es por que tenemos que dar un paso previo antes de usarlo. El código que más se asemeja a lo que deberíamos de hacer es el siguiente:

if (platform.is('cordova')) {
    this.deeplinks.routeWithNavController(this.nav, {
        '/event/:year/:month/:eventItem/:title': 'ScheduleDetails',
        '/email/verify/': 'Login',
        '/password/reset/:token': 'ChangePassword',
        '/prd/:id': 'ProductDetailsPage',
        '/rcm/:id': 'RecommendationDetailsPage'
    }).subscribe((match) => {
        // console.log('success' + JSON.stringify(match));
    }, (noMatch) => {
        // alert('error' + JSON.stringify(noMatch));
        // console.log('error' + JSON.stringify(noMatch));
    });
}

¿Ves la diferencia? Si no la ves te la digo yo ya. Tenemos que evaluar previamente si la plataforma donde se está ejecutando está usando cordova. Por lo que si estamos probando en le navegador no va a funcionar nunca. Y solo funcionará cuando todo esté en el dispositivo móvil. Con lo que «cannot get» (no se ha podido obtener) también se resuelve con este ejemplo.

Si aún así después de probar esto no te ha funcionado, déjame en los comentarios tu problema e intentamos revisarlo más en profundidad.

 

¿Se pueden desactivar (disable) los Deep Links?

Esta pregunta la he encontrado en varios foros, y varios de mis clientes me han preguntado por esto. He tenido que investigar un poco por que no sabía si se podía o no. Pero después de investigar y de hacer unas cuantas pruebas he llegado a la conclusión, cómo muchos otros usuarios de Ionic, de que no se puede. La única manera de hacerlo es eliminar el deep link desde el código de nuestra app. Una ves hecho esto, y al pasar un tiempo, será desvinculado de su respectiva URL.

Nota: Si usas algún sistema de adquisición de pago externo a Google, cómo por ejemplo Facebook Ads, para llevar instlaciones a la app, y quieres hacerlo a través de un deeplink tienes que diferirlo (defered) para que funcione correctamente.

 

Cómo de costumbre, el videotutorial del componente para los más vaguetes 🙂

 

Ahora solo queda despedirse e informarte de que estaré más activo por la web a partir de ahora. Quiero comenzar a levantar proyectos rápidamente y para poder hacerlo, primero hay que terminarlos, como es el caso de este.

Solo agregar antes de irme, que si no se has pasado por el círculo, lo hagas en este enlace. Se trata de una comunidad online que estoy montando alrededor de esta genial disciplina que es la programación. En él tiene todos los detalles 🙂

Un saludo y nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.