Saltar al contenido

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

Deep Linking Ionic

¿Pensando en meter enlaces profundos en tu app mediante Deep Linking Ionic? O, quizás, ya sabes cómo se hace pero te falta saber cómo funciona un método o variable del componente para ponerlo a tu gusto ¿verdad?

Si has respondido que si, que estás intentando indexar tu app en Google y no hay manera de implementarlo bien, déjame decirque no eres el único ni serás el último que pase por aquí a ver cómo se hace esto.

Es más, hasta los que somo más expertos tenemos que hacer uso de estos artículos cuando hacemos alguna implementación nueva de algo que no hayamos usado antes, o que hace mucho que no usamos.

Mi nombre es Aitor Sánchez, soy desarrollador de apps móviles desde 2014, y en este artículo te mostraré cómo puedes utilizar Deep Linking Ionic para indexar aplicaciones en Google de manera sencilla y con un ejemplo.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Pero ¿qué es, concretamente, el Depp Linking?

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.

 

Cómo instalar Deep Linking en Ionic

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/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.

...
import {DeepLinks} from "@awesome-cordova-plugins/deeplinks/ngx"

...

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 "@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 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.

 

Más tutoriales de Ionic

 

Y el videotutorial del componente, cómo siempre

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.