Cette page a été traduite par l'API Cloud Translation.

Android v4 – Premiers pas

Introduction

Google Tag Manager permet aux développeurs de modifier les valeurs de configuration dans leur application mobile via l'interface Google Tag Manager, sans avoir à recompiler et renvoyer les binaires de l'application aux places de marché d'applications.

Cela est utile pour gérer les valeurs ou les options de configuration de votre application dont vous pourriez avoir besoin. à l'avenir, y compris:

Différents paramètres d'interface utilisateur et chaînes d'affichage
Tailles, emplacements ou types des annonces diffusées dans votre application
Divers paramètres de jeu

Les valeurs de configuration peuvent également être évaluées au moment de l'exécution à l'aide de règles, ce qui permet d'activer de configuration, par exemple:

Utiliser la taille de l'écran pour déterminer la taille de la bannière publicitaire
Utiliser la langue et la zone géographique pour configurer les éléments de l'interface utilisateur

Google TagManager permet également d'implémenter dynamiquement des pixels et balises de suivi dans applications. Les développeurs peuvent transmettre des événements importants dans une couche de données et décider plus tard lesquels des balises ou des pixels de suivi doivent être déclenchés.

Avant de commencer

Avant de commencer à utiliser ce guide de démarrage, procédez comme suit:

Installez le SDK Android.
Téléchargez le SDK des services Google Play.
Créer un compte Google Tag Manager
Configurer un conteneur Google Tag Manager

Une fois ces étapes terminées, le reste de ce guide vous expliquera comment configurer et utiliser Google Tag Manager dans votre application Android.

Premiers pas

Après avoir suivi ce guide de démarrage, vous saurez:

Ajouter Google Tag Manager à votre projet
Initialiser Tag Manager dans votre application
Obtenir les valeurs de configuration d'un conteneur Tag Manager
Transférer des valeurs et des événements dans le dataLayer
Prévisualiser, déboguer et publier votre conteneur

Ce guide utilise des extraits de code de Cute Animals exemple d'application incluse dans SDK des services Google Play : La source complète de ce projet est disponible dans: <android-sdk-directory>/extras/google/google_play_services/tagmanager/cuteanimals.

1. Ajouter Google Tag Manager à votre projet

Pour ajouter Google Tag Manager à votre projet:

<ph type="x-smartling-placeholder"></ph> Configurez le SDK des services Google Play.

Si vous utilisez un IDE autre que Android Studio, ajoutez les autorisations suivantes au Fichier AndroidManifest.xml:

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

Pour activer InstallReferrerReceiver pour appeler le récepteur Google Analytics pour définir les données de la campagne, ajoutez le code suivant au Fichier 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. Ajouter un fichier de conteneur par défaut à votre projet

Google Tag Manager utilise un conteneur par défaut lors de la première exécution de votre application. La valeur par défaut ne sera plus utilisé dès que l'application pourra récupérer un nouveau conteneur réseau.

Pour télécharger et ajouter un binaire de conteneur par défaut à votre application:

Connectez-vous à l'interface Web de Google Tag Manager.
Sélectionnez la version du conteneur que vous souhaitez télécharger.
Cliquez sur le bouton Télécharger pour récupérer le binaire du conteneur.
Ajoutez à votre projet le fichier binaire du conteneur téléchargé en tant que ressource brute.
1. Si le sous-dossier raw sous <project-root>/res/ n'existe pas. Créez-le.
2. Renommez le fichier binaire du conteneur si nécessaire. Il se compose uniquement lettres minuscules, chiffres et traits de soulignement.
3. Copiez le fichier binaire du conteneur dans le dossier <project-root>/res/raw

Bien que l'utilisation du fichier binaire soit recommandée, si votre conteneur ne contient pas de règles ni de balises, vous pouvez choisir d'utiliser un simple fichier JSON à la place.

3. Initialiser Google Tag Manager

Pour initialiser Google Tag Manager dans votre application:

Obtenez le singleton TagManager:

TagManager tagManager = TagManager.getInstance(this);

Utilisez le singleton TagManager pour envoyer une requête de chargement d'un conteneur, en spécifiant une ID de conteneur Google Tag Manager ainsi que votre conteneur par défaut . L'ID de conteneur doit être en majuscules et correspondre exactement à l'ID de conteneur dans la balise Google Interface Web du gestionnaire. L'appel à loadContainerPreferNonDefault() n'est pas bloquant et renvoie un <ph type="x-smartling-placeholder"></ph> PendingResult:
```
PendingResult<ContainerHolder> pending =
        tagManager.loadContainerPreferNonDefault(CONTAINER_ID,
        R.raw.defaultcontainer_binary);
```

Utilisez un ResultCallback pour renvoyer ContainerHolder Une fois le chargement terminé ou si le délai a expiré:

// 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);

Créer un Singleton ContainerHolder

Vous ne devez gérer qu'une seule instance de ContainerHolder par exécution de votre application. C'est pourquoi l'exemple ci-dessus utilise une classe utilitaire ContainerHolderSingleton. pour gérer l'accès à l'instance ContainerHolder. Voici ce que cela La classe ContainerHolderSingleton ressemble à ceci:

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;
    }
}

Afficher un extrait de code à partir de l'exemple d'application

L'extrait suivant montre le modèle complet implémenté dans la méthode onCreate() d'un exemple de Activity:

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. Obtenir des valeurs de configuration à partir du conteneur

Une fois le conteneur chargé, vous pouvez récupérer les valeurs de configuration à l'aide de l'une des méthodes Container.get<type>(). Les valeurs de configuration sont définies Variables de collecte de valeurs de Google Tag Manager. Par exemple, la méthode suivante récupère la dernière couleur que nous avons décidé d'utiliser pour un élément d'interface utilisateur et la renvoie sous la forme un nombre entier:

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

Ce code effectue deux opérations pour récupérer le nom de la couleur à partir du conteneur:

Récupère les Container à partir de ContainerHolder à l'aide de <ph type="x-smartling-placeholder"></ph> ContainerHolder.getContainer()
Récupère la valeur de la couleur à l'aide de <ph type="x-smartling-placeholder"></ph> Container.getString(key), où vous avez défini la clé et la valeur dans l'interface Web de Google Tag Manager.

5. Transmettre des événements et des valeurs à la couche de données

Google Tag Manager fournit également un dataLayer, dans lequel vous pouvez transmettre des informations. sur votre application, qui peut être lue dans d'autres parties de votre application ou utilisée pour déclencher des balises que vous avez configuré dans l'interface Web de Google Tag Manager.

Transmettre des valeurs à la couche de données

dataLayer fournit une couche de persistance que vous pouvez utiliser pour stocker des paires clé-valeur que vous pourriez utiliser dans d'autres parties de votre application, ou en tant qu'entrées des balises Google Tag Manager.

Pour transmettre une valeur à dataLayer, procédez comme suit:

Télécharger le <ph type="x-smartling-placeholder"></ph> Singleton DataLayer:
```
DataLayer dataLayer = TagManager.getInstance(context).getDataLayer();
```

Transférez l'événement à l'aide de . DataLayer.push():

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

Pour obtenir une valeur à partir de dataLayer, utilisez <ph type="x-smartling-placeholder"></ph> DataLayer.get(key)

Transmettre des événements à la couche de données

Le transfert d'événements vers dataLayer vous permet de séparer le code de votre application les balises que vous souhaitez peut-être déclencher en réponse à ces événements.

Par exemple, au lieu de coder en dur les appels de suivi des vues d'écran dans votre application, Vous pouvez transmettre les événements de l'écran au dataLayer et définir vos balises de suivi via la propriété Interface Web Google Tag Manager Vous avez ainsi la possibilité de modifier cette balise ou d'ajouter des tags supplémentaires qui répondent aux événements d'écran, sans mettre à jour le code de votre application.

Pour transmettre un événement à dataLayer, procédez comme suit:

Télécharger le <ph type="x-smartling-placeholder"></ph> Singleton DataLayer:
```
DataLayer dataLayer = TagManager.getInstance(context).getDataLayer();
```
Transférez l'événement à l'aide de . DataLayer.pushEvent():
```
dataLayer.pushEvent("openScreen", DataLayer.mapOf("screenName", screenName));
```
<ph type="x-smartling-placeholder"></ph> DataLayer.mapOf() est une méthode utilitaire qui vous permet de générer facilement une carte qui mettent à jour l'élément dataLayer en même temps que l'événement.

Afficher un extrait de code à partir de l'exemple d'application

La classe utilitaire suivante montre comment transmettre des événements, tels que des informations sur les écrans. d'ouverture et de fermeture dans votre application, sur le 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. Prévisualisation, débogage et publication

Avant de publier une version de votre conteneur, prévisualisez-la pour vérifier qu'elle fonctionne comme prévu. Google Tag Manager vous permet de prévisualiser les versions de votre conteneur en générant des liens et des codes QR dans l'interface Web, puis en les utilisant pour ouvrir votre application. Vous pouvez également activer un mode de journalisation détaillée pour déboguer tout comportement inattendu.

Prévisualisation…

Pour prévisualiser une version de votre conteneur, procédez comme suit:

Ajout de l'aperçu Activity à votre fichier 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>

Veillez à modifier cette ligne de façon à inclure le nom du package de votre application:

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

Générer un lien d'aperçu dans l'interface Web de Google Tag Manager <ph type="x-smartling-placeholder">
1. Se connecter à Google Tag Manager
2. Sélectionnez la version du conteneur à prévisualiser
3. Cliquez sur le bouton Prévisualiser
4. Saisissez le nom de package de votre application, puis cliquez sur Générer un lien de début d'aperçu.
Utilisez le lien ou le code QR généré pour lancer votre application
Vous pouvez quitter le mode Aperçu en suivant un lien généré par Générer un lien d'aperçu final. dans l'interface Web.

Débogage

Si vous devez résoudre des problèmes liés à l'implémentation de votre conteneur, activez la journalisation détaillée en appelant <ph type="x-smartling-placeholder"></ph> 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);

Publication

Après avoir prévisualisé votre conteneur et vérifié qu'il fonctionne comme prévu, vous pouvez publiez votre conteneur. Votre les valeurs de configuration du conteneur, les balises et les événements seront activés pour les utilisateurs la prochaine fois que les conteneurs sont actualisés. Apprenez-en plus sur l'actualisation des conteneurs.

Configuration avancée

Les sections suivantes décrivent les options de configuration avancées que vous souhaitez utiliser pour personnaliser davantage votre l'implémentation de Google Tag Manager.

Actualiser le conteneur

Par défaut, votre conteneur peut être actualisé toutes les 12 heures. Actualiser manuellement conteneur, utilisez ContainerHolder.refresh():

ContainerHolderSingleton.getContainerHolder().refresh();

Il s'agit d'un appel asynchrone qui ne s'affiche pas immédiatement. Pour réduire le trafic réseau, refresh() peut n'est appelé qu'une fois toutes les 15 minutes, sinon il s'agit d'une no-op.

Afficher un extrait de code à partir de l'exemple d'application

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();
}