Aitor Sánchez - Blog - Oct. 30, 2023, 1:34 p.m.
¿Pensando en meter enlaces profundos en tu app mediante Deep Linking Ionic? O, quizás, estás intentando indexar tu app en Google y no hay manera de implementarlo bien ¿verdad? déjame decirque no eres el único ni serás el último que pase por aquí a ver cómo se hace esto.
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a utilizar Deep Linking Ionic para indexar aplicaciones en Google de manera sencilla y con un ejemplo.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Básicamente se trata de un mecanismos que, por un lado, nos permite indexar enlaces a nuestra aplicación en los principales buscadores (necesita configuración desde webmaster tools).
Y, por otro lado, nos permite conocer desde código si nuestra app se ha abierto desde un enlace de este tipo. De que enlace en cuestión se trata y enviar parámetros a la app a través de la URL para que dicha aplicación se ejecute, de manera diferente si queremos, despendiendo del enlace.
Algo similar a como funciona la web en la actualidad.
Bueno, esto no es una sorpresa, pero para quien no lo sepa aún, necesitamos instalar el plugin Ionic Deeplinks dentro de nuestra aplicación. Para hacerlo tenemos que ejecutar los siguiente dos comandos:
ionic cordova plugin add ionic-plugin-deeplinks
npm install @awesome-cordova-plugins/deeplinksLa 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.
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.
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.
...
import {DeepLinks} from "@awesome-cordova-plugins/deeplinks/ngx"
...
providers: [
....,
Deeplinks,
....
]
...
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 "@awesome-cordova-plugins/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 DeepLinks. 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.
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.
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.
Mira, si tu mejoras el logo de tu aplicación vas a notar un aumento en la cantidad de descargas que recibe y en el dinero que la app genera. Esto es así... Mejor logo, más descargas. Bien, pues para que aún lo mejores más, hemos hecho esta aplicación. Con ella puedes evaluar, optimizar y mejorar tu logo cual Da Vinci y su última cena. No te espoileo más, entra al enlace.
Y ahora solo queda despedirme, un saludo y nos vemos en el siguiente artículo. Hasta entonces, ¡que vaya bien!