Uso de AppsFlyer con TWA

Los eventos in-app se envían mediante el SDK de AppsFlyer desde actividades de la aplicación nativa. Dado que la TWA está basada en la web y no es una actividad nativa, no puedes enviar eventos in-app utilizando el SDK de AppsFlyer. Puedes utilizar eventos in-app de servidor a servidor como alternativa. Sigue las instrucciones a continuación para enviar eventos de servidor a servidor con TWA.

Requisitos previos

Antes de que puedas comenzar a enviar eventos desde TWA a AppsFlyer, haz lo siguiente:

1. Agrega el siguiente repositorio al archivo gradle a nivel de proyecto:
   

   maven { url "https://jitpack.io"}

2. Agrega las siguientes bibliotecas:
   • Para bibliotecas de android.support:
     • Agrega lo siguiente en tu build.gradle:
       implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:91b4a1270b'
     • Importa las siguientes bibliotecas:

       import android.support.customtabs.CustomTabsClient;
       import android.support.customtabs.CustomTabsIntent;
       import android.support.customtabs.CustomTabsServiceConnection;
       import android.support.customtabs.CustomTabsSession;
       import android.support.customtabs.trusted.TrustedWebActivityIntentBuilder;
       import static android.support.customtabs.TrustedWebUtils.EXTRA_LAUNCH_AS_TRUSTED_WEB_ACTIVITY

   • Para bibliotecas de androidX:
     • Agrega lo siguiente en tu build.gradle:
       

       implementation 'com.github.GoogleChrome:android-browser-helper:ff8dfc4ed3'

     • Importa las siguientes bibliotecas:

       import androidx.browser.customtabs.CustomTabsClient;
       import androidx.browser.customtabs.CustomTabsIntent;
       import androidx.browser.customtabs.CustomTabsServiceConnection;
       import androidx.browser.customtabs.CustomTabsSession;
       import androidx.browser.trusted.TrustedWebActivityIntentBuilder;
       

Obtención del ID de AppsFlyer

Para enviar eventos de servidor a servidor, necesitas el ID de AppsFlyer. Puedes obtener el ID de AppsFlyer desde el SDK de AppsFlyer para Android. 

Primero, asegúrate de integrar el SDK de AppsFlyer para Android. Luego puedes obtener el ID de AppsFlyer usando la siguiente API del SDK:

String appsflyerId = AppsFlyerLib.getInstance().getAppsFlyerUID(this);

Envío del ID de AppsFlyer a TWA

Puedes enviar el ID de AppsFlyer de dos maneras:

private void launchTwa(String cuid, String af_id) {

    CustomTabsServiceConnection customTabsServiceonnection = new CustomTabsServiceConnection() {

        @Override
        public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
            Log.d(LOG_TAG, "onCustomTabsServiceConnected");

            // Setting up CustomTabsSession that is used to build an intent
            mClient = client;
            CustomTabsSession session = mClient.newSession(null);

            // Creating the intent to launch TWA using URL with query params that can be read by the Web App
            TrustedWebActivityIntentBuilder twaIntentBuilder = new TrustedWebActivityIntentBuilder(Uri.parse(defaultUri + "?cuid=" + cuid + "&appsflyer_id=" + af_id));
            Intent twaIntent = twaIntentBuilder.build(session);

            startActivity(twaIntent);
        }

        @Override
        public void onServiceDisconnected(ComponentName name) {
            Log.d(LOG_TAG, "onCustomTabsServiceDisconnected");
        }
    };

    CustomTabsClient.bindCustomTabsService(getApplicationContext(), "com.android.chrome", customTabsServiceonnection);
}

let url = new URL(document.location.href);
    let appsflyerID;
url.searchParams.forEach((value, key) => {
    if(key === 'appsflyer_id') {
    	appsflyerID = value;
    }
})

private void launchTwa(String cuid, String af_id) { 
        CustomTabsServiceConnection customTabsServiceonnection = new CustomTabsServiceConnection() {

        @Override
        public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
            Log.d(LOG_TAG, "onCustomTabsServiceConnected");

            // Setting up CustomTabsSession that is used to build an intent
            mClient = client;
            CustomTabsSession session = mClient.newSession(null);

            // Creating the intent to launch TWA using URL with query params that can be read by the Web App
            TrustedWebActivityIntentBuilder twaIntentBuilder = new TrustedWebActivityIntentBuilder(Uri.parse(defaultUri);
            Intent twaIntent = twaIntentBuilder.build(session);

            // Passing additional custom headers to the intent so they can be read by the Web App
            Bundle customHeaders = new Bundle();
            customHeaders.putString("twa_params", "cuid=" + cuid + "&=appsflyer_id" + af_id");
            twaIntent.putExtra(Browser.EXTRA_HEADERS, customHeaders);
            startActivity(twaIntent);
        }

        @Override
        public void onServiceDisconnected(ComponentName name) {
            Log.d(LOG_TAG, "onCustomTabsServiceDisconnected");
        }
    };

    CustomTabsClient.bindCustomTabsService(getApplicationContext(), "com.android.chrome", customTabsServiceonnection);
}

// get the conversion data cookie 
// function taken from https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

// get the cookie
var conversionData = JSON.parse(getCookie('appsflyer_id'));
console.log(appsflyer_id);

Envío del evento in-app

Para enviar eventos in-app, debes enviar los datos del evento a tu servidor y hacer que tu servidor envíe el evento a AppsFlyer. Existen algunos otros requisitos previos para enviar eventos in-app:

• Clave de desarrollador del SDK: ¡Importante! La clave de desarrollador del SDK es un valor confidencial y no debería estar presente en la TWA. Si vas a utilizar TWA y a enviar eventos in-app de servidor a servidor, almacena siempre la clave de desarrollador del SDK de forma segura en el lado del servidor.
• ID de aplicación: el ID de la aplicación tal como aparece en Android Manifest.xml.

Una vez que tengas estos tres parámetros (ID de AppsFlyer, clave de desarrollador del SDK, ID de la aplicación), podrá enviar el evento in-app. Siempre que tenga lugar un evento en la actividad web, debes enviar una solicitud a tu servidor web para manejar este evento. El servidor web obtiene los datos relacionados con el evento, lo compone y lo envía a AppsFlyer.

Consulta aquí para ver ejemplos de cómo enviar eventos in-app de servidor a servidor.

El SDK de AppsFlyer te proporciona datos de conversión a través de dos API:

• Obtener datos de conversión: se llama cuando la aplicación se inicia por primera vez después de una instalación y para inicios posteriores de la aplicación.
• Atribución de apertura de la aplicación: se llama cuando la aplicación tiene un enlace profundo para usar OneLink.

Puedes utilizar datos de conversión para personalizar el contenido web.

Envío de datos de conversión a TWA

Una vez que obtengas los datos de conversión de cualquiera de los métodos enumerados anteriormente, puedes enviarlos a tu servidor web. Para hacerlo, usa encabezados personalizados:

private void launchTwa(Map<String, String> conversionData, String cuid, String af_id) { 
        CustomTabsServiceConnection customTabsServiceonnection = new CustomTabsServiceConnection() {

        @Override
        public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
            Log.d(LOG_TAG, "onCustomTabsServiceConnected");

            // Setting up CustomTabsSession that is used to build an intent
            mClient = client;
            CustomTabsSession session = mClient.newSession(null);

            // Creating the intent to launch TWA using URL with query params that can be read by the Web App
            TrustedWebActivityIntentBuilder twaIntentBuilder = new TrustedWebActivityIntentBuilder(Uri.parse(defaultUri);
            Intent twaIntent = twaIntentBuilder.build(session);

            // Passing additional custom headers to the intent so they can be read by the Web App
            Bundle customHeaders = new Bundle();
            customHeaders.putString("twa_params", "cuid=" + cuid + "&=" + af_id");
            customHeaders.putString("conversion_data", conversionData);
            twaIntent.putExtra(Browser.EXTRA_HEADERS, customHeaders);
            startActivity(twaIntent);
        }

        @Override
        public void onServiceDisconnected(ComponentName name) {
            Log.d(LOG_TAG, "onCustomTabsServiceDisconnected");
        }
    };

    CustomTabsClient.bindCustomTabsService(getApplicationContext(), "com.android.chrome", customTabsServiceonnection);
}

Obtención de datos de conversión del lado del cliente

JavaScript no proporciona una API que permita a los desarrolladores acceder a los encabezados. Por lo tanto, el servidor debe enviar los datos de conversión a la actividad web como una cookie. El servidor obtiene los encabezados personalizados que contienen los datos de conversión, analiza los datos y los envía a la página web como una cookie.

Cuando se carga la página, se debe configurar un fragmento de JavaScript para recuperar la cookie de datos de conversión y personalizar el contenido en consecuencia. Por ejemplo, si un usuario instala la aplicación desde una campaña de ofertas de vuelos, puedes completar la actividad web con contenido relevante para las ofertas que promociona la campaña.

// get the conversion data cookie 
// function taken from https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

// get the cookie
var conversionData = JSON.parse(getCookie('conversion_data'));
console.log(conversionData);
/*
conversion data example:
{ 
        campaign: "CAMPAIGN_NAME", // "None" if not specified on the link
        media_source: "MEDIA_SOURCE", //"None" if not specified on the link     
        cost_cents_USD : "0",
        is_first_launch: true,
        install_time: "2018-12-30 23:59:39.330",
        orig_cost: "0.0",
        af_click_lookback: "7d",
        click_time: "2018-12-30 23:59:09",
        cost_cents_USD: "0",
        af_status: "Non-organic"
}
*/

Para obtener más información sobre los casos de uso de datos de conversión, consulta aquí.

Al igual que con cualquier otra aplicación de Android, puedes integrar el SDK de AppsFlyer con la aplicación para medir las instalaciones y obtener datos de conversión.

Para medir las instalaciones, todo lo que necesitas hacer es integrar el SDK siguiendo las instrucciones aquí. 

Puedes personalizar el contenido web según la campaña que solicita al usuario que instale tu aplicación. Por ejemplo, si un usuario instala una aplicación de una campaña que le ofrece un 20 % de descuento en productos de tu tienda web. Puedes obtener los datos de conversión y aplicar el descuento tan pronto como la aplicación abra la actividad web.

Para obtener información sobre el uso de datos de conversión para personalizar el contenido web, sigue las instrucciones aquí.

La PWA hace uso de las TWA, que son esencialmente actividades web. Dado que la TWA está basada en la web y no es una actividad nativa, no puedes enviar eventos in-app utilizando el SDK de AppsFlyer. Como alternativa, puedes utilizar eventos in-app de servidor a servidor.

Sigue las instrucciones aquí para aprender cómo enviar eventos in-app para PWA.