Convierte a los usuarios de tu app web móvil en usuarios de tu app nativa

Imaginemos que te tomas la molestia de crear un sitio web móvil excelente, además de una aplicación nativa hermosa, pero después descubres que el porcentaje de conversiones es mejor en la aplicación nativa que en la Web. En este caso, podría ser provechoso para tu negocio que los usuarios del sitio web móvil descarguen la aplicación. Si bien puede parecer un desafío que los usuarios pasen de una plataforma a otra, Dynamic Links te facilita la tarea. Con muy poco código, puedes agregar la posibilidad de que un usuario haga clic en un vínculo de tu Web móvil y se lo dirija a la página correspondiente de la app, incluso si antes tiene que ir a la App Store o a Google Play Store para instalarla.

Ventajas clave

• Convierte a los usuarios de la Web móvil en usuarios de la app nativa con una transición lo más cómoda posible.
• Los usuarios pueden abrir la app con el mismo contenido que estaban viendo en tu sitio.
• Requiere muy poca integración.

Aquí te explicaremos cómo comenzar a usar Dynamic Links.

Antes de comenzar

Haz que el contenido de la app sea compatible con los vínculos directos

La clave para convertir a los usuarios de la Web móvil en usuarios de la aplicación nativa es asegurarte de que vean el mismo contenido de la Web cuando abran la app. Por eso, antes de enviar a los usuarios de la Web móvil a la app, es necesario que esta pueda recibir vínculos directos al contenido.

Es probable que ya hayas realizado esta tarea si implementaste vínculos universales en iOS o Android App Links. En caso de que no lo hayas hecho, agrega a la app la lógica necesaria para recibir una URL del sitio web y mostrarle al usuario el contenido correspondiente.

Configura Firebase y el SDK de Dynamic Links

Configura un proyecto nuevo de Firebase y, luego, instala el SDK de Dynamic Links en la app (iOS, Android, C++ y Unity). Con el SDK de Dynamic Links instalado, Firebase podrá pasar datos acerca del Dynamic Link una vez que el usuario instale la app. Si no tienes el SDK, no hay manera de mostrarle el contenido del vínculo al usuario si tiene que instalar la aplicación como paso intermedio.

Agrega vínculos para “Abrir en la app” a las páginas web

Ahora es momento de configurar los vínculos que llevarán a los usuarios del sitio web a tu app nativa. No te preocupes si los usuarios todavía no han instalado la app, ya que se instalará con Dynamic Links.

Genera un Dynamic Link en cada página del sitio web. Como el contenido es compatible con los vínculos directos, el parámetro link puede ser simplemente la URL de la página en la que se encuentra.

Este es un ejemplo de un vínculo de este tipo:

<a href="https://example.page.link/?link=https://www.example.com/content?item%3D1234&apn=com.example.android&ibi=com.example.ios">Open this page in our app!</a>

Cuando los usuarios abren este vínculo en el dispositivo, si no está instalada la app que se especifica en el parámetro apn (en Android) o en el parámetro ibi (en iOS), se conduce a los usuarios a Play Store o la App Store para que completen la instalación. Luego, se abre la app y se le pasa la URL especificada en el parámetro link.

Abre el contenido del vínculo en la aplicación

Para continuar, debes recibir el vínculo que se pasó a la aplicación y abrir el contenido correspondiente, lo cual es fácil gracias al SDK de Dynamic Links.

iOS

Para recibir un Dynamic Link en iOS, debes implementar el método application:continueUserActivity:restorationHandler:. En el controlador de restablecimientos, puedes llamar a handleUniversalLink:completion: para obtener el Dynamic Link. Si se transfirió un vínculo dinámico a tu app, puedes obtenerlo de la propiedad url de FIRDynamicLink. Por ejemplo:

[[FIRDynamicLinks dynamicLinks]
    handleUniversalLink:userActivity.webpageURL
             completion:^(FIRDynamicLink * _Nullable dynamicLink,
                          NSError * _Nullable error) {
      NSString *link = dynamicLink.url;
    }];

FIRDynamicLinks.dynamicLinks()?.handleUniversalLink(userActivity.webpageURL!) { (dynamiclink, error) in
    let link = dynamiclink.url
}

Además, debes llamar a dynamicLinkFromCustomSchemeURL: en el método application:openURL:options: para recibir Dynamic Links que se pasaron a tu app como URLs de esquemas personalizados. Por ejemplo:

FIRDynamicLink *dynamicLink = [[FIRDynamicLinks dynamicLinks] dynamicLinkFromCustomSchemeURL:url];
if (dynamicLink) {
  NSString *link = dynamicLink.url;
  // ...
  return YES;
}

let dynamicLink = FIRDynamicLinks.dynamicLinks()?.dynamicLinkFromCustomSchemeURL(url)
if let dynamicLink = dynamicLink {
  let link = dynamiclink.url
  // ...
  return true
}

Ahora que tienes el valor del parámetro link, puedes mostrarle el contenido del vínculo al usuario.

Android

En Android, debes usar el método getDynamicLink() para obtener datos del Dynamic Link:

Firebase.dynamicLinks
        .getDynamicLink(intent)
        .addOnCompleteListener { task ->
            if (!task.isSuccessful) {
                // Handle error
                // ...
            }

            val invite = FirebaseAppInvite.getInvitation(task.result)
            if (invite != null) {
                // Handle invite
                // ...
            }
        }
MainActivity.kt

FirebaseDynamicLinks.getInstance()
        .getDynamicLink(getIntent())
        .addOnCompleteListener(new OnCompleteListener<PendingDynamicLinkData>() {
            @Override
            public void onComplete(@NonNull Task<PendingDynamicLinkData> task) {
                if (!task.isSuccessful()) {
                    // Handle error
                    // ...
                }

                FirebaseAppInvite invite = FirebaseAppInvite.getInvitation(task.getResult());
                if (invite != null) {
                    // Handle invite
                    // ...
                }
            }
        });
MainActivity.java

Ahora que tienes el valor del parámetro link, puedes mostrarle el contenido del vínculo al usuario.