Android v4: Cómo empezar

Nota: En esta guía, se describe la implementación anterior de la etiqueta de Google en aplicaciones para Android. Los usuarios nuevos deben utilizar Tag Manager y Firebase para implementar Google Tag Manager en sus aplicaciones de Android.

Introducción

Google Tag Manager permite que los desarrolladores cambien los valores de configuración en sus aplicaciones para dispositivos móviles con la interfaz de Google Tag Manager sin tener que volver a compilar y volver a enviar los objetos binarios de la aplicación a los mercados de aplicaciones.

Esto es útil para administrar cualquier valor o marca de configuración en tu aplicación que puedas necesitar a los cambios en el futuro, como

• Diversas opciones de configuración de la IU y cadenas de la pantalla
• Tamaños, ubicaciones o tipos de anuncios que se publican en tu aplicación
• Varios parámetros de configuración de juegos

Los valores de configuración también se pueden evaluar en el tiempo de ejecución usando reglas, lo que permite parámetros de configuración como los siguientes:

• Cómo usar el tamaño de la pantalla para determinar el tamaño del banner de anuncio
• Cómo usar el idioma y la ubicación para configurar los elementos de la IU

Google TagManager también permite la implementación dinámica de etiquetas y píxeles de seguimiento en aplicaciones. Los desarrolladores pueden enviar eventos importantes a una capa de datos y decidir, más tarde, cuáles los píxeles o las etiquetas de seguimiento deben activarse.

Antes de comenzar

Completa los siguientes pasos antes de comenzar esta guía de introducción:

• Instala el SDK de Android.
• Descarga el SDK de Servicios de Google Play.
• Crea una cuenta de Google Tag Manager.
• Configura un contenedor de Google Tag Manager

Una vez que hayas completado estos pasos, el resto de la guía te indicará cómo configurar y utilizar Google Tag Manager en tu aplicación para Android.

Comenzar

Después de seguir esta guía de introducción, comprenderás cómo hacer lo siguiente:

• Agrega Google Tag Manager a tu proyecto
• Inicializa Tag Manager en tu aplicación
• Obtén valores de configuración de un contenedor de Tag Manager
• Envía valores y eventos a dataLayer
• Cómo obtener una vista previa de tu contenedor, depurarlo y publicarlo

En esta guía, se usan fragmentos de código de Cute Animals aplicación de ejemplo que se incluye en el SDK de Servicios de Google Play. La fuente completa para este proyecto está disponible en: <android-sdk-directory>/extras/google/google_play_services/tagmanager/cuteanimals.

1. Cómo agregar Google Tag Manager a tu proyecto

Para agregar Google Tag Manager a tu proyecto, haz lo siguiente:

1. Configura el SDK de Servicios de Google Play.
2. Si usas un IDE distinto de Android Studio, agrega los siguientes permisos a la Archivo AndroidManifest.xml:

   <!-- For TagManager SDK -->
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

3. Para habilitar InstallReferrerReceiver para llamar al receptor de Google Analytics Para configurar los datos de la campaña, agrega lo siguiente al Archivo AndroidManifest.xml:

   <!-- Used for install referrer tracking-->
   <service android:name="com.google.android.gms.tagmanager.InstallReferrerService" />
   <receiver
     android:name="com.google.android.gms.tagmanager.InstallReferrerReceiver"
     android:exported="true">
     <intent-filter>
       <action android:name="com.android.vending.INSTALL_REFERRER" />
     </intent-filter>
   </receiver>

2. Cómo agregar un archivo de contenedor predeterminado a tu proyecto

Nota: Si todavía no tienes configuraste tu contenedor en la interfaz web de Google Tag Manager vuelve a este paso una vez que lo hayas hecho.

Google Tag Manager usa un contenedor predeterminado en la primera ejecución de tu aplicación. Predeterminado contenedor dejará de usarse tan pronto como la aplicación pueda recuperar un contenedor nuevo a través del en cada red.

Para descargar y agregar un objeto binario de contenedor predeterminado a tu aplicación, haz lo siguiente:

1. Accede a la interfaz web de Google Tag Manager.
2. Selecciona la Versión del contenedor que deseas descargar.
3. Haz clic en el botón Descargar para recuperar el objeto binario del contenedor.
4. Agrega el archivo binario del contenedor descargado a tu proyecto como recurso sin procesar.
   1. Si la subcarpeta raw en <project-root>/res/ no existe, créalo.
   2. Cambia el nombre del archivo binario del contenedor si es necesario. Consta de solo letras minúsculas, dígitos y guiones bajos.
   3. Copia el archivo binario del contenedor en la carpeta. <project-root>/res/raw

Aunque se recomienda usar el archivo binario, si tu contenedor no contiene reglas ni etiquetas, puedes optar por usar un archivo JSON simple en su lugar.

3. Cómo inicializar Google Tag Manager

Para inicializar Google Tag Manager en tu aplicación, sigue estos pasos:

1. Obtén el singleton TagManager:

   TagManager tagManager = TagManager.getInstance(this);

2. Usa el singleton TagManager para realizar una solicitud de carga de un contenedor y especifica un ID del contenedor de Google Tag Manager y tu contenedor predeterminado . El ID del contenedor debe estar en mayúsculas y coincidir exactamente con el ID del contenedor en la etiqueta de Google. Interfaz web de administrador. La llamada a loadContainerPreferNonDefault() no genera bloqueos. y devuelve un PendingResult:

   PendingResult<ContainerHolder> pending =
           tagManager.loadContainerPreferNonDefault(CONTAINER_ID,
           R.raw.defaultcontainer_binary);

3. Usar un ResultCallback para mostrar ContainerHolder una vez que se terminó de cargar o se agotó el tiempo de espera:

   // The onResult method will be called as soon as one of the following happens:
   //     1. a saved container is loaded
   //     2. if there is no saved container, a network container is loaded
   //     3. the 2-second timeout occurs
   pending.setResultCallback(new ResultCallback<ContainerHolder>() {
       @Override
       public void onResult(ContainerHolder containerHolder) {
           ContainerHolderSingleton.setContainerHolder(containerHolder);
           Container container = containerHolder.getContainer();
           if (!containerHolder.getStatus().isSuccess()) {
               Log.e("CuteAnimals", "failure loading container");
               displayErrorToUser(R.string.load_error);
               return;
           }
           ContainerLoadedCallback.registerCallbacksForContainer(container);
           containerHolder.setContainerAvailableListener(new ContainerLoadedCallback());
           startMainActivity();
       }
   }, TIMEOUT_FOR_CONTAINER_OPEN_MILLISECONDS, TimeUnit.MILLISECONDS);

   Nota: De forma predeterminada, un contenedor se vuelve apto para actualizarse. a través de la red cada 12 horas. Obtén más información para actualizar un contenedor de forma manual.

   Cómo crear un singleton de ContainerHolder

   Solo debes mantener una instancia de ContainerHolder por ejecución de tu y mantener la integridad de su aplicación. Por eso, el ejemplo anterior usa una clase de utilidad ContainerHolderSingleton. para administrar el acceso a la instancia ContainerHolder. Esto es lo que La clase ContainerHolderSingleton tiene el siguiente aspecto:

   package com.google.android.tagmanager.examples.cuteanimals;
   
   import com.google.android.gms.tagmanager.ContainerHolder;
   
   /**
    * Singleton to hold the GTM Container (since it should be only created once
    * per run of the app).
    */
   public class ContainerHolderSingleton {
       private static ContainerHolder containerHolder;
   
       /**
        * Utility class; don't instantiate.
        */
       private ContainerHolderSingleton() {
       }
   
       public static ContainerHolder getContainerHolder() {
           return containerHolder;
       }
   
       public static void setContainerHolder(ContainerHolder c) {
           containerHolder = c;
       }
   }

Cómo ver un fragmento de código de la aplicación de ejemplo

El siguiente fragmento muestra el patrón completo implementado en el método onCreate() de una Activity de muestra:

package com.google.android.tagmanager.examples.cuteanimals;

import java.util.concurrent.TimeUnit;
import java.util.Map;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;

import com.google.android.gms.common.api.PendingResult;
import com.google.android.gms.common.api.ResultCallback;
import com.google.android.gms.tagmanager.Container;
import com.google.android.gms.tagmanager.Container.FunctionCallMacroCallback;
import com.google.android.gms.tagmanager.Container.FunctionCallTagCallback;
import com.google.android.gms.tagmanager.ContainerHolder;
import com.google.android.gms.tagmanager.TagManager;

/**
 * Displays simple splash screen while GTM container is loading. Once the container is loaded,
 * launches the {@link MainActivity}.
 */
public class SplashScreenActivity extends Activity {
    private static final long TIMEOUT_FOR_CONTAINER_OPEN_MILLISECONDS = 2000;
    private static final String CONTAINER_ID = "GTM-XXXX";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splashscreen);

        TagManager tagManager = TagManager.getInstance(this);

        // Modify the log level of the logger to print out not only
        // warning and error messages, but also verbose, debug, info messages.
        tagManager.setVerboseLoggingEnabled(true);

        PendingResult<ContainerHolder> pending =
                tagManager.loadContainerPreferNonDefault(CONTAINER_ID,
                R.raw.defaultcontainer_binary);

        // The onResult method will be called as soon as one of the following happens:
        //     1. a saved container is loaded
        //     2. if there is no saved container, a network container is loaded
        //     3. the 2-second timeout occurs
        pending.setResultCallback(new ResultCallback<ContainerHolder>() {
            @Override
            public void onResult(ContainerHolder containerHolder) {
                ContainerHolderSingleton.setContainerHolder(containerHolder);
                Container container = containerHolder.getContainer();
                if (!containerHolder.getStatus().isSuccess()) {
                    Log.e("CuteAnimals", "failure loading container");
                    displayErrorToUser(R.string.load_error);
                    return;
                }
                ContainerLoadedCallback.registerCallbacksForContainer(container);
                containerHolder.setContainerAvailableListener(new ContainerLoadedCallback());
                startMainActivity();
            }
        }, TIMEOUT_FOR_CONTAINER_OPEN_MILLISECONDS, TimeUnit.MILLISECONDS);
  // Rest of the Activity definition.
}

4. Obtener valores de configuración del contenedor

Una vez cargado el contenedor, puedes recuperar los valores de configuración usando cualquiera de los Container.get<type>(). Los valores de configuración se definen Variables de recopilación de valores de Google Tag Manager. Por ejemplo, el siguiente método recupera el último color que decidimos usar para un elemento de la IU y lo muestra como un número entero:

/**
 * Returns an integer representing a color.
 */
private int getColor(String key) {
    return colorFromColorName(containerHolder.getContainer().getString(key));
}

Este código realiza dos acciones para recuperar el nombre del color del contenedor:

1. Obtiene el Container del ContainerHolder con ContainerHolder.getContainer()
2. Obtiene el valor del color con Container.getString(key), donde tienes definió la clave y el valor en la interfaz web de Google Tag Manager.

5. Cómo enviar eventos y valores a dataLayer

Google Tag Manager también proporciona un elemento dataLayer, al que puedes enviar información. sobre tu aplicación que se puede leer en otras partes de ella o usarse para activar etiquetas que configuraste en la interfaz web de Google Tag Manager.

Cómo enviar valores a dataLayer

dataLayer proporciona una capa de persistencia que puedes usar. para almacenar pares clave-valor que tal vez quieras usar en otras partes de tu aplicación. como entradas a las etiquetas de Google Tag Manager.

Para enviar un valor a dataLayer, sigue este patrón:

1. Obtén la singleton DataLayer:

   DataLayer dataLayer = TagManager.getInstance(context).getDataLayer();

2. Envía el evento mediante . DataLayer.push()

   // Put the image_name into the data layer for future use.
   TagManager.getInstance(this).getDataLayer().push(IMAGE_NAME_KEY, imageName);

Para obtener un valor de dataLayer, usa DataLayer.get(key)

Cómo enviar eventos a dataLayer

Enviar eventos a dataLayer te permite separar el código de tu aplicación de etiquetas que tal vez quiera activar en respuesta a esos eventos.

Por ejemplo, en vez de codificar de forma fija las llamadas de seguimiento de las vistas de pantalla de Google Analytics en tu aplicación, puedes enviar eventos de pantalla al dataLayer y definir tus etiquetas de seguimiento mediante el Interfaz web de Google Tag Manager. Esto te da la flexibilidad de modificar esa etiqueta o agregar etiquetas adicionales que responden a los eventos de pantalla sin actualizar el código de la aplicación.

Para enviar un evento a dataLayer, sigue este patrón:

1. Obtén la singleton DataLayer:

   DataLayer dataLayer = TagManager.getInstance(context).getDataLayer();

2. Envía el evento mediante . DataLayer.pushEvent()

   dataLayer.pushEvent("openScreen", DataLayer.mapOf("screenName", screenName));

   DataLayer.mapOf() es un método de utilidad que puedes usar para generar fácilmente un mapa de Son pares clave-valor que actualizarán el objeto dataLayer al mismo tiempo que se envíe el evento.

Cómo ver un fragmento de código de la aplicación de ejemplo

La siguiente clase de utilidad demuestra cómo enviar eventos, como información sobre pantallas. abrir y cerrar en tu app, en el dataLayer:

package com.google.android.tagmanager.examples.cuteanimals;

import android.content.Context;

import com.google.android.gms.tagmanager.DataLayer;
import com.google.android.gms.tagmanager.TagManager;

/**
 * Utility class.
 */
public class Utils {
    private Utils() {
        // private constructor.
    }

    /**
     * Push an "openScreen" event with the given screen name. Tags that match that event will fire.
     */
    public static void pushOpenScreenEvent(Context context, String screenName) {
        DataLayer dataLayer = TagManager.getInstance(context).getDataLayer();
        dataLayer.pushEvent("openScreen", DataLayer.mapOf("screenName", screenName));
    }

    /**
     * Push a "closeScreen" event with the given screen name. Tags that match that event will fire.
     */
    public static void pushCloseScreenEvent(Context context, String screenName) {
        DataLayer dataLayer = TagManager.getInstance(context).getDataLayer();
        dataLayer.pushEvent("closeScreen", DataLayer.mapOf("screenName", screenName));
    }
}

6. Cómo obtener una vista previa, depurar y publicar

Antes de publicar una versión del contenedor, te recomendamos obtener una vista previa para asegurarte de que funciona según lo previsto. Google Tag Manager te permite obtener una vista previa de las versiones de tus contenedores generando vínculos y códigos QR en la interfaz web, y usándolos para abrir tu aplicación. También puedes habilitar un modo de registro detallado para depurar cualquier comportamiento inesperado.

Obteniendo vista previa

Para obtener una vista previa de la versión de tu contenedor, sigue estos pasos:

1. Agregando esta vista previa Activity a tu archivo AndroidManifest:

   <!--  Add preview activity. -->
   <activity
       android:name="com.google.android.gms.tagmanager.PreviewActivity"
       android:label="@string/app_name"
       android:noHistory="true">  <!-- optional, removes the previewActivity from the activity stack. -->
       <intent-filter>
         <data android:scheme="tagmanager.c.com.google.android.tagmanager.examples.cuteanimals" />
         <action android:name="android.intent.action.VIEW" />
         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE"/>
       </intent-filter>
   </activity>

   Asegúrate de modificar esta línea para incluir el nombre del paquete de tu aplicación:

   <data android:scheme="tagmanager.c.com.google.android.tagmanager.examples.cuteanimals" />

2. Genera un vínculo de vista previa en la interfaz web de Google Tag Manager
   1. Accede a Google Tag Manager
   2. Selecciona la Versión del contenedor para obtener una vista previa
   3. Haz clic en el botón Vista previa.
   4. Ingresa el nombre del paquete de tu aplicación y haz clic en Generate start preview link.
3. Usa el vínculo generado o el código QR para iniciar la aplicación
4. Puedes salir del modo de vista previa siguiendo el vínculo que genera el vínculo Generate end preview. en la interfaz web.

Depuración

Si necesitas solucionar problemas con la implementación del contenedor, habilita el registro detallado llamando TagManager.setVerboseLoggingEnabled(true)

// Modify the log level of the logger to print out not only
// warning and error messages, but also verbose, debug, info messages.
tagManager.setVerboseLoggingEnabled(true);

Publicación

Después de obtener una vista previa del contenedor y verificar que funcione según lo previsto, puedes publicar tu contenedor. Tu los valores de configuración, las etiquetas y los eventos de los contenedores estarán disponibles para los usuarios la próxima vez que se actualicen los contenedores. Obtén más información sobre cómo actualizar contenedores.

Configuración avanzada

En las siguientes secciones, se describen las opciones de configuración avanzada que deseas usar para personalizar aún más tu Implementación de Google Tag Manager

Cómo actualizar el contenedor

De forma predeterminada, tu contenedor se vuelve apto para actualizarse cada 12 horas. Cómo actualizar manualmente el contenedor, usa ContainerHolder.refresh()

ContainerHolderSingleton.getContainerHolder().refresh();

Esta es una llamada asíncrona que no se mostrará de inmediato. Para reducir el tráfico de red, refresh() puede solo se llamará una vez cada 15 minutos; de lo contrario, será una no-op.

Nota: En este fragmento, se usa la Clase de utilidad ContainerHolderSingleton descrita en el ejemplo de inicialización arriba.

Cómo ver un fragmento de código de la aplicación de ejemplo

public void refreshButtonClicked(@SuppressWarnings("unused") View view) {
    Log.i(TAG, "refreshButtonClicked");
    ContainerHolderSingleton.getContainerHolder().refresh();

    // Push the "refresh" event to trigger firing an analytics tag.
    TagManager.getInstance(this).getDataLayer().push("event", "refresh");
    // Push the "custom tag" event to trigger firing a custom function call tag.
    TagManager.getInstance(this).getDataLayer().push("event", "custom_tag");
    updateCategories();
}