El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Enlaces dinámicos de Firebase

Siguiente ►
►

Introducción a los Enlaces Dinámicos de Firebase

Los Enlaces Dinámicos de Firebase son URLs inteligentes que permiten redirigir a los usuarios a contenido específico dentro de tu aplicación, independientemente de si la aplicación está instalada o no. Estos enlaces pueden mejorar significativamente la experiencia del usuario y aumentar la retención y el compromiso.

Características Clave de los Enlaces Dinámicos

  • Redirección Condicional: Los enlaces dinámicos pueden redirigir a los usuarios a diferentes destinos según la plataforma (iOS, Android, web).
  • Persistencia de Datos: Los datos pueden ser persistentes a través de la instalación de la aplicación, permitiendo que los usuarios sean llevados directamente al contenido relevante después de instalar la aplicación.
  • Compatibilidad con Campañas: Los enlaces dinámicos pueden ser utilizados en campañas de marketing para rastrear la efectividad y el comportamiento del usuario.

Creación de Enlaces Dinámicos

Paso 1: Configuración Inicial

  1. Accede a la consola de Firebase y selecciona tu proyecto.
  2. Navega a la sección de Enlaces Dinámicos en el menú de la izquierda.
  3. Haz clic en "Empezar" para configurar tu dominio de enlaces dinámicos. Si ya tienes un dominio, puedes usarlo; de lo contrario, Firebase te proporcionará uno.

Paso 2: Crear un Enlace Dinámico

  1. Haz clic en "Nuevo enlace dinámico".
  2. Configura el enlace:
    • URL corta: Define la URL corta que los usuarios verán.
    • URL larga: Configura la URL larga con los parámetros necesarios.

Ejemplo de URL Larga

https://example.page.link/?link=https://www.example.com/&apn=com.example.android&ibi=com.example.ios
  • link: La URL a la que se redirigirá al usuario.
  • apn: El nombre del paquete de la aplicación Android.
  • ibi: El identificador del paquete de la aplicación iOS.

Paso 3: Configuración de Redirección

  • Redirección para Android: Configura el nombre del paquete y la URL de fallback si la aplicación no está instalada.
  • Redirección para iOS: Configura el identificador del paquete y la URL de fallback si la aplicación no está instalada.
  • Redirección para Web: Configura la URL de destino para usuarios que abren el enlace en un navegador web.

Implementación en la Aplicación

Android

  1. Agregar dependencias en el archivo build.gradle:
dependencies {
    implementation 'com.google.firebase:firebase-dynamic-links:19.1.0'
}
  1. Configurar el Intent Filter en el archivo AndroidManifest.xml:
<activity android:name=".MainActivity">
    <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="example.page.link"/>
    </intent-filter>
</activity>
  1. Manejar el enlace dinámico en la actividad principal:
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FirebaseDynamicLinks.getInstance()
        .getDynamicLink(getIntent())
        .addOnSuccessListener(this, new OnSuccessListener<PendingDynamicLinkData>() {
            @Override
            public void onSuccess(PendingDynamicLinkData pendingDynamicLinkData) {
                Uri deepLink = null;
                if (pendingDynamicLinkData != null) {
                    deepLink = pendingDynamicLinkData.getLink();
                }

                if (deepLink != null) {
                    // Manejar el enlace profundo aquí
                }
            }
        })
        .addOnFailureListener(this, new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                Log.w(TAG, "getDynamicLink:onFailure", e);
            }
        });
}

iOS

  1. Agregar dependencias en el archivo Podfile:
pod 'Firebase/DynamicLinks'
  1. Configurar el URL Scheme en el archivo Info.plist:
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.example.ios</string>
        </array>
    </dict>
</array>
  1. Manejar el enlace dinámico en el archivo AppDelegate.swift:
import Firebase

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    if let incomingURL = userActivity.webpageURL {
        let linkHandled = DynamicLinks.dynamicLinks().handleUniversalLink(incomingURL) { (dynamiclink, error) in
            guard error == nil else {
                print("Error handling dynamic link: \(error!.localizedDescription)")
                return
            }
            if let dynamicLink = dynamiclink, let url = dynamicLink.url {
                // Manejar el enlace profundo aquí
            }
        }
        return linkHandled
    }
    return false
}

Ejercicios Prácticos

Ejercicio 1: Crear un Enlace Dinámico

  1. Objetivo: Crear un enlace dinámico que redirija a los usuarios a una página específica de tu aplicación.
  2. Instrucciones:
    • Configura un nuevo enlace dinámico en la consola de Firebase.
    • Define la URL de destino y las redirecciones para Android e iOS.
    • Implementa el manejo del enlace en tu aplicación.

Ejercicio 2: Personalizar la Experiencia del Usuario

  1. Objetivo: Personalizar la experiencia del usuario según el contenido del enlace dinámico.
  2. Instrucciones:
    • Modifica el código de manejo de enlaces para extraer parámetros específicos de la URL.
    • Usa estos parámetros para mostrar contenido personalizado en la aplicación.

Soluciones

Solución al Ejercicio 1

  1. Configuración del Enlace Dinámico:

    • URL corta: https://example.page.link/welcome
    • URL larga: https://example.page.link/?link=https://www.example.com/welcome&apn=com.example.android&ibi=com.example.ios

  2. Implementación en Android:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FirebaseDynamicLinks.getInstance()
        .getDynamicLink(getIntent())
        .addOnSuccessListener(this, new OnSuccessListener<PendingDynamicLinkData>() {
            @Override
            public void onSuccess(PendingDynamicLinkData pendingDynamicLinkData) {
                Uri deepLink = null;
                if (pendingDynamicLinkData != null) {
                    deepLink = pendingDynamicLinkData.getLink();
                }

                if (deepLink != null) {
                    // Redirigir al usuario a la página de bienvenida
                    Intent intent = new Intent(MainActivity.this, WelcomeActivity.class);
                    startActivity(intent);
                }
            }
        })
        .addOnFailureListener(this, new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                Log.w(TAG, "getDynamicLink:onFailure", e);
            }
        });
}
  1. Implementación en iOS:
import Firebase

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    if let incomingURL = userActivity.webpageURL {
        let linkHandled = DynamicLinks.dynamicLinks().handleUniversalLink(incomingURL) { (dynamiclink, error) in
            guard error == nil else {
                print("Error handling dynamic link: \(error!.localizedDescription)")
                return
            }
            if let dynamicLink = dynamiclink, let url = dynamicLink.url {
                // Redirigir al usuario a la página de bienvenida
                let storyboard = UIStoryboard(name: "Main", bundle: nil)
                let welcomeVC = storyboard.instantiateViewController(withIdentifier: "WelcomeViewController")
                self.window?.rootViewController?.present(welcomeVC, animated: true, completion: nil)
            }
        }
        return linkHandled
    }
    return false
}

Solución al Ejercicio 2

  1. Modificación del Código de Manejo de Enlaces:
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FirebaseDynamicLinks.getInstance()
        .getDynamicLink(getIntent())
        .addOnSuccessListener(this, new OnSuccessListener<PendingDynamicLinkData>() {
            @Override
            public void onSuccess(PendingDynamicLinkData pendingDynamicLinkData) {
                Uri deepLink = null;
                if (pendingDynamicLinkData != null) {
                    deepLink = pendingDynamicLinkData.getLink();
                }

                if (deepLink != null) {
                    // Extraer parámetros específicos
                    String contentId = deepLink.getQueryParameter("contentId");
                    if (contentId != null) {
                        // Mostrar contenido personalizado
                        Intent intent = new Intent(MainActivity.this, ContentActivity.class);
                        intent.putExtra("contentId", contentId);
                        startActivity(intent);
                    }
                }
            }
        })
        .addOnFailureListener(this, new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                Log.w(TAG, "getDynamicLink:onFailure", e);
            }
        });
}
  1. Modificación en iOS:
import Firebase

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    if let incomingURL = userActivity.webpageURL {
        let linkHandled = DynamicLinks.dynamicLinks().handleUniversalLink(incomingURL) { (dynamiclink, error) in
            guard error == nil else {
                print("Error handling dynamic link: \(error!.localizedDescription)")
                return
            }
            if let dynamicLink = dynamiclink, let url = dynamicLink.url {
                // Extraer parámetros específicos
                let components = URLComponents(url: url, resolvingAgainstBaseURL: false)
                let contentId = components?.queryItems?.first(where: { $0.name == "contentId" })?.value
                if let contentId = contentId {
                    // Mostrar contenido personalizado
                    let storyboard = UIStoryboard(name: "Main", bundle: nil)
                    let contentVC = storyboard.instantiateViewController(withIdentifier: "ContentViewController") as! ContentViewController
                    contentVC.contentId = contentId
                    self.window?.rootViewController?.present(contentVC, animated: true, completion: nil)
                }
            }
        }
        return linkHandled
    }
    return false
}

Conclusión

Los Enlaces Dinámicos de Firebase son una herramienta poderosa para mejorar la experiencia del usuario y aumentar la retención en tu aplicación. Al aprender a crear y manejar estos enlaces, puedes dirigir a los usuarios a contenido específico y personalizado, incluso si no tienen la aplicación instalada inicialmente. Con la práctica y la implementación de los ejercicios proporcionados, estarás bien encaminado para aprovechar al máximo esta funcionalidad en tus proyectos.

◄ Anterior
◄
Siguiente ►
►

Curso de Firebase

Módulo 1: Introducción a Firebase

Módulo 2: Autenticación de Firebase

Módulo 3: Base de datos en tiempo real de Firebase

Módulo 4: Cloud Firestore

Módulo 5: Almacenamiento de Firebase

Módulo 6: Mensajería en la nube de Firebase

Módulo 7: Análisis de Firebase

Módulo 8: Funciones de Firebase

Módulo 9: Monitoreo de rendimiento de Firebase

Módulo 10: Laboratorio de pruebas de Firebase

Módulo 11: Temas avanzados de Firebase

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados