Je voulais écrire sur Google Tag Manager depuis application mobile depuis un long moment. Enfin, j’ai d’excellents cas d’utilisation à partager, ainsi que des exemples utiles pour la mise en œuvre de GTM pour iOS. C’est vrai, c’est un iOS guide, et, pour être plus précis, orienté vers une réussite Rapide la mise en oeuvre.
Si vous ne le saviez pas, Swift est un langage de programmation relativement nouveau, développé par Apple pour la programmation iOS et OS X. Il a de belles synergies avec les implémentations Objective-C existantes, ce qui signifie que vous pouvez soit migrer progressivement vers Swift, soit simplement commencer à écrire de nouvelles applications instantanément.
Dans cet article, nous allons parcourir une implémentation Swift simple de Google Tag Manager et de Google Analytics. Je passerai très brièvement en revue le SDK GTM dans le chapitre Commentaires, mais il s’agit d’un article pratique, pas d’un pourquoi-je-devrais-je écrire. Je vais développer ce thème du GTM mobile dans de futurs textes, donc cela se démarquera comme un point de départ pour comprendre comment le SDK fonctionne avec votre application.
Un grand merci à mon collègue, Sampsa Kuronen, pour m’avoir exposé aux arts sombres de Xcode et Swift.
Commencer
Ce guide est écrit en partant du principe que vous utilisez la dernière version de Xcode comme IDE de votre choix. Ce n’est pas le meilleur IDE (de loin), mais il a été créé avec la programmation iOS et OS X à l’esprit, ce qui signifie qu’il y a certains avantages à l’utiliser.
Une autre hypothèse, assez évidente, est que vous avez accès à la source de votre projet. Vous serez ajout de nouveaux fichiers, importation d’en-têtes et modification du code source du projet. C’est une bonne idée de faire exécuter tout ce que vous faites par votre équipe, car vous ne voulez pas fusionner du code source non vérifié dans votre projet.
Voici quelque chose que vous ne réalisez peut-être pas encore pleinement :
GTM pour les applications mobiles ce n’est pas la même chose comme GTM pour le web !
Le niveau de liberté dont vous disposez lorsque vous travaillez avec ce dernier n’existe tout simplement pas dans le monde des applications mobiles. Nous travaillons avec projets et applicationsvous devez donc avoir une solide compréhension de la manière de développer des logiciels de manière appropriée et cohérente, en respectant tous les modèles de conception que vous avez trouvés efficaces.
1. Configuration de Google Tag Manager
Pour faire avancer les choses, configurons d’abord Google Tag Manager. Dans ce didacticiel, nous allons créer une simple balise de vue d’écran pour tester l’implémentation. Dans les chapitres suivants, nous passerons également en revue la charge utile de l’événement, mais c’est à vous de créer le tag correspondant.
Dans GTM, créez un nouveau conteneur sous un compte. Choisir iOS comme type de conteneur et donnez-lui un nom descriptif.
Ensuite, vous serez dirigé vers la vue d’ensemble du conteneur et vous verrez une petite fenêtre contextuelle indiquant que votre conteneur est prêt à être utilisé. Vous pouvez fermer cela.
Comme vous pouvez le voir, cela ressemble à peu près à GTM pour le Web.
Ensuite, allez à Mots cléset cliquez Nouveau.
Waouh, c’est beaucoup moins Tags que dans GTM pour le web. Espérons que nous en aurons plus bientôt ! Notez également qu’il n’y a pas Balise HTML personnalisée. C’est parfaitement logique, puisque vous ne travaillez pas avec HTML, mais j’ai pensé que je devrais quand même le signaler.
Nous allons créer un simple Google Analytics Tag , qui envoie un Affichage de l’application (également connu sous le nom de vue d’écran) à Google Analytics lors de la première Voir des chargements de l’application (ne vous inquiétez pas, tout sera clair bientôt). Alors, créez la balise Google Analytics et ajoutez le ID de suivi.
Sois sûr que Affichage de l’application est sélectionné comme type de piste, et développez Plus de réglages -> Champs à définir.
Cliquez sur + Add Fieldet ajouter Nom d’écran comme nom de champ. Dans Valeur, cliquez sur le bouton “Variable” et choisissez Nouvelle variable….
Nous devons créer une variable, qui récupère le nom d’écran souhaité à partir de la couche de données (Nom d’écran est à une application ce que Page est à un site Web). Donc, après avoir émerveillé la liste des variables qui est complètement différente de GTM pour le Web, choisissez Variable de couche de données.
Donnez-lui un nom descriptif, par exemple DLV – nom d’écranet définissez le champ Nom de la variable sur Nom d’écran. Enregistrez la nouvelle variable.
Ensuite, dans l’écran Tag, cliquez sur Continuez et procéder à la Tirer sur étape.
Dans cette étape, cliquez sur Personnalisé, car vous souhaitez créer un nouveau déclencheur pour la balise. Ainsi, dans la fenêtre contextuelle qui apparaît, cliquez sur Nouveau.
Donnez au déclencheur un nom descriptif, par exemple Événement – screenViewet définissez la condition comme dans la capture d’écran ci-dessous.
Enregistrez le déclencheur, puis cliquez sur “Créer une balise” pour créer la balise.
Ouf, presque fini ici ! Nous n’utiliserons qu’une seule balise, car il s’agit d’un guide de configuration simple.
Ensuite, allez à la Versions page de votre conteneur GTM, puis cliquez sur ouvrir le Actions menu pour la seule version de conteneur que vous verrez (le brouillon initial). Cliquez sur Publier et suivez les invites pour publier votre conteneur.
Là, GTM est presque prêt, avide de traiter les commandes de couche de données que vous envoyez depuis votre application.
Encore une chose à faire. Vous devrez télécharger la version du conteneur binaire, car GTM pour les applications est un peu différent dans la façon dont il traite les conteneurs. Fondamentalement, vous ne pouvez pas être sûr que l’application aura accès à un conteneur téléchargé sur le réseau, vous voudrez donc toujours fournir un fichier binaire de conteneur local pour l’application également. En savoir plus à ce sujet au chapitre 5.1.
Alors, cliquez sur ouvrir le Actions menus pour le Habitent version du conteneur, puis choisissez Télécharger. Assurez-vous de le télécharger à un endroit où vous pouvez facilement le trouver.
C’est ça! Nous en avons terminé avec la configuration GTM. Il ne reste plus qu’à mettre à niveau votre application pour utiliser le SDK Google Tag Manager (et Google Analytics) !
Félicitez-vous avec une barre d’alimentation et du café.
J’attendrai. Peut-être prendre un café moi-même et danser en silence sur votre profond succès dans la mise en place de GTM !
(2. Créez un nouvel espace de travail Xcode)
Je ne m’attarderai pas ici, car je suppose en fait que vous avez déjà un projet Xcode et un espace de travail avec lequel travailler. Si vous avez besoin de quelque chose pour commencer, jetez un œil à ce tutoriel de Ray Wenderlich. Si vous portez une attention particulière aux captures d’écran de l’article que vous lisez en ce moment, vous remarquerez peut-être que j’utilise en fait le calculateur de pointe de Ray comme base pour cet article.
Si vous n’avez qu’une configuration de projet et aucun espace de travail, continuez à lire. Lorsque vous ajoutez les dépendances requises à votre projet à l’aide de Cocoapods (voir ci-dessous), un espace de travail est automatiquement généré pour vous.
3. Téléchargez les SDK à l’aide de Cocoapods
Pour que Google Tag Manager fonctionne avec votre application, vous devez télécharger les SDK pour Google Tag Manager et Google Analytics. Pour ce faire, nous utiliserons Cocoapods, qui est un gestionnaire de dépendances open source pour vos projets iOS et OS X. Comme vous l’avez peut-être deviné, les SDK Google Analytics et Google Tag Manager sont également distribués sous forme de pods.
Après avoir installé Cocoapods (si vous avez besoin d’aide, consultez par exemple ce guide), vous devez vous rendre dans le répertoire racine de votre espace de travail (celui avec vos fichiers .xcodeproj et .xcworkspace), et taper :
pod init
Cette commande initialise un simple Podfile pour votre projet.
Ouvrez Podfile avec votre éditeur préféré.
Entre les lignes target 'YourProject' do et endvous devez ajouter les références de pod que vous souhaitez télécharger et installer pour votre projet. Ajoutez donc la construction suivante dans le fichier :
target 'YourProject' do pod 'GoogleTagManager' pod 'Google/Analytics' endUne fois que vous avez fait cela, vous pouvez exécuter la commande pod install, qui installera et importera automatiquement tous les fichiers dans votre projet Xcode. Propre, hein ?
Maintenant que vous avez installé les pods, la prochaine chose que vous devez faire est de les importer dans votre projet.
Ce n’est pas tout à fait simple, car le code source de Google Tag Manager est en Objective-C, ce qui signifie que vous ne pouvez pas simplement l’importer directement dans votre projet Swift. Au lieu de cela, vous devez utiliser quelque chose appelé un En-tête de pont.
4. Créer et modifier le fichier d’en-tête de pontage
UN en-tête de pontage est essentiel pour créer des projets où la base de code comprend du code de plusieurs langages – Objective-C et Swift dans ce cas. Fondamentalement, vous utilisez un fichier d’en-tête de pont pour exposer les structures Objective-C dans vos fichiers Swift, afin que vous puissiez, par exemple, travailler avec le SDK GTM (qui est Objective-C au moment de la rédaction) sans avoir à vous soucier des conflits et les conflits qui surviennent lorsque l’on travaille dans plusieurs langues.
Tout d’abord, si vous avez correctement installé les Pods, vous devriez les voir dans votre Navigateur de projet.
Maintenant, pour créer le fichier d’en-tête de pontage, accédez à Dossier -> Nouveau -> Dossier. Sous iOS / Sourcetu trouveras En tête de fichieralors sélectionnez-le et cliquez sur Suivant.
Donnez un nom au fichier : yourProjectName-Bridging-Header.h, et enregistrez-le à la racine de votre projet. N’oubliez pas de choisir une cible pour le fichier, afin que le fichier d’en-tête soit correctement associé à votre projet.
Vous devriez voir le fichier ouvert dans votre éditeur. Ajoutez les instructions d’importation suivantes au fichier, puis enregistrez-le :
#import "TAGManager.h" #import "TAGContainer.h" #import "TAGContainerOpener.h" #import "TAGDataLayer.h" #import "TAGLogger.h" #import <Google/Analytics.h>Ces en-têtes incluent tous les en-têtes Google Tag Manager nécessaires, ainsi que tous les en-têtes du SDK Google Analytics.
Enfin, vous devez inclure le fichier d’en-tête de pontage dans vos paramètres de construction.
Cliquez sur votre projet (le nœud de niveau racine) dans votre navigateur de projet. Dans l’écran des paramètres qui s’ouvre, choisissez la balise intitulée Paramètres de constructionet faites défiler jusqu’à Compilateur Swift – Génération de code.
Modifiez le champ à côté de En-tête de pont Objective-Cet tapez le nom de fichier du fichier d’en-tête de pontage que vous venez de créer.
Maintenant, construisez votre projet et assurez-vous que tout se passe bien.
Ensuite, configurez Google Tag Manager dans le projet !
5. Chargez Google Tag Manager dans le projet
Mon Dieu, que de chemin parcouru !
Si vous regardez comment le guide du développeur démarre, vous remarquerez les capacités plutôt limitées de Google Tag Manager pour mobile. Pour l’instant, du moins. Fondamentalement, vous pouvez envoyer des appels Google Analytics et exécuter des fonctions personnalisées. Vous pouvez également modifier les valeurs de configuration.
Dans ce didacticiel, nous nous concentrerons sur le premier cas d’utilisation, nous allons donc configurer une interface simple pour suivre les vues d’écran et les événements vers Google Analytics.
5.1. Ajouter un conteneur binaire au projet
Avant de faire quoi que ce soit, cependant, nous devrons ajouter le binaire de la version du conteneur au projet. C’est assez important, car même si GTM peut charger un conteneur “nouveau” sur le réseau, certaines des interactions sur le site peuvent en fait devoir être suivies. avant l’opération asynchrone de chargement du conteneur est terminée. Dans ce cas, GTM peut se rabattre sur le fichier binaire du conteneur local, également appelé le défaut récipient.
REMARQUE! Cela signifie également que vous devez essayer de maintenir le binaire du projet aussi à jour que possible, afin que les lots qui utilisent le binaire soient aussi similaires que possible à ceux qui utilisent le nouveau conteneur. Prenez donc l’habitude qu’à chaque fois que vous publiez une nouvelle version de conteneur, vous téléchargiez la version binaire et l’ajoutiez au projet (supprimez d’abord l’ancien binaire).
Nous couvrirons tout cela très bientôt, ne vous inquiétez pas.
Dans Xcode, faites simplement glisser et déposez le fichier binaire du conteneur dans votre projet. Une fenêtre devrait s’ouvrir, dans laquelle vous devez vous assurer que vous ajoutez le fichier à votre cible (cochez donc la case correspondante).
Si vous n’avez pas de Fichiers de support groupe sous votre projet, c’est le bon moment pour en créer un. Cliquez avec le bouton droit sur le fichier binaire du conteneur et choisissez Nouveau groupe à partir de la sélection. Nommez le groupe Fichiers de support. Votre navigateur devrait ressembler à ceci :
Si vous avez déjà un groupe Supporting Files, déplacez simplement le fichier binaire dans ce dossier.
Ensuite, code source et autres.
5.2. Modifier AppDelegate
Les AppDelegate.swift Le fichier est l’endroit où vous contrôlez les états de votre application. Par exemple, lorsque l’application se charge, AppDelegate, eh bien, délégués opérations à différentes parties de votre application. De même, lorsque votre téléphone sonne et interrompt l’application, vous contrôlez ce processus via AppDelegate.
Étant donné que Google Tag Manager est quelque chose que vous souhaitez charger lors du chargement de l’application, vous devrez apporter des modifications à AppDelegate.swift. Alors, ouvrez le fichier dans votre éditeur.
On veut modifier la fonction qui est appelée une fois l’application chargée. Justement, il y en a un qui ressemble à ça :
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { // Override point for customization after application launch. // ... return true }C’est le rappel dans lequel nous allons ouvrir le conteneur. Ici, « ouvrir le conteneur » signifie que nous le rendrons disponible pour envoyer des appels à l’aide des interfaces disponibles. De plus, disposer d’un conteneur est un pré-requis pour interagir avec le TAGDataLayer interface. Il s’agit encore une fois d’une légère différence par rapport à la façon dont les choses fonctionnent avec GTM pour le Web, où vous pouvez créer un dataLayer objet avant le début du chargement du conteneur.
Ajoutez les lignes suivantes dans la fonction :
let tagManager = TAGManager.instance() TAGContainerOpener.openContainerWithId( "GTM-XXXXXX", tagManager: tagManager, openType: kTAGOpenTypePreferFresh, timeout: nil, notifier: self) // if DEBUG tagManager.logger.setLogLevel(kTAGLoggerLogLevelVerbose)Ligne par ligne, voici ce qui se passe. Tout d’abord, vous initialisez une variable immuable nommée tagManager en tant qu’instance singleton de TAGManager classer.
Ensuite, vous utilisez le TAGContainerOpener interface pour signaler que vous souhaitez récupérer un conteneur avec lequel travailler. N’oubliez pas de changer le “GTM-XXXXXX” quel que soit l’ID de conteneur que vous utilisez.
Ce bit suivant est un peu plus compliqué.
Lorsque vous téléchargez le fichier binaire du conteneur dans les fichiers de support de votre projet, cela s’appelle un conteneur par défaut. C’est ce que GTM utilise jusqu’à ce qu’un conteneur sauvegardé soit trouvé, ou si ce conteneur sauvegardé n’est pas frais (> 12 heures), un nouveau conteneur frais est chargé sur le réseau. C’est pourquoi il est impératif que le binaire enregistré soit utilisable. La première vue d’écran de l’application pourrait bien être prête à être envoyée avant le chargement d’un conteneur autre que celui par défaut, ce qui signifie que vous souhaitez que le conteneur par défaut soit aussi précis que possible.
Lors du choix de la openType valeur, je vous suggère d’utiliser soit kTAGOpenTypePreferNonDefault ou alors kTAGOpenTypePreferFresh.
kTAGOpenTypePreferNonDefault tente de charger un conteneur enregistré (c’est-à-dire un conteneur qui a été précédemment chargé sur le réseau), qu’il soit obsolète ou non. Stale signifie qu’il a plus de 12 heures. Cela signifie que vous aurez un conteneur avec lequel travailler plus tôt. Si le conteneur est obsolète, Google Tag Manager lance une requête asynchrone pour un nouveau conteneur sur le réseau.
kTAGOpenTypePreferFresh ne charge un conteneur enregistré que s’il est frais. Si ce n’est pas le cas, il charge un nouveau conteneur frais sur le réseau.
Les deux reviennent au conteneur par défaut si un conteneur enregistré n’a pas pu être chargé ou s’il y a eu une erreur de réseau.
Ensuite, vous pouvez activer la journalisation. j’ai commenté si DEBUG car il peut être judicieux de se connecter de manière détaillée uniquement si vous déboguez l’application, car cela produit un parcelle de la sortie de la console, ce qui est une surcharge inutile dans l’application en direct.
Vous avez peut-être remarqué que j’ai sauté le notifier: self paire clé-valeur dans le TAGContainerOpener appel. C’est parce que cela demande un peu plus d’attention.
Les notifier Le paramètre est essentiellement un paramètre, où j’ordonne à GTM d’informer mon application lorsqu’un conteneur devient disponible. Une fois qu’un conteneur est disponible, nos méthodes et fonctions peuvent créer une instance du AppDelegate classe pour accéder au conteneur chargé. Vous pouvez utiliser container pour mettre à jour les valeurs de configuration de votre application via GTM, par exemple.
Parce que tu invoques self comme valeur de paramètre, cela signifie que la classe dans laquelle vous vous trouvez actuellement (AppDelegate) doit mettre en œuvre le TAGContainerNotifier protocole, comme self est lié à une instance de la classe courante.
Faites défiler jusqu’au début de AppDelegate et remplacez la déclaration de classe par :
class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier { ... var container: TAGContainer?En d’autres termes, vous ajoutez le TAGContainerOpenerNotifier à la ligne de déclaration, et au début de la classe (donc ne pas dans un func), vous créez une nouvelle variable containerqui fait référence à un TAGContainer optionnel.
Phew! Presque là.
À la fin du cours, après tous les autres func déclarations, ajoutez-en une nouvelle :
func containerAvailable(container: TAGContainer) -> Void { dispatch_async(dispatch_get_main_queue(), { self.container = container; }); }Et maintenant, les choses devraient commencer à s’aligner dans votre esprit.
containerAvailable est le rappel qui TAGContainerOpener invoque une fois qu’un conteneur devient disponible. Le conteneur est passé en paramètre à cette fonction.
Ensuite, nous initialisons self.container avec le conteneur récupéré. De cette façon, votre application peut utiliser le conteneur chargé via une instance de AppDelegate classer.
Au fait, voici une astuce astucieuse. Si tu veux toujours charger un nouveau conteneur sur le réseau, vous pouvez ajouter la ligne suivante au dispatch_async rappeler:
container.refresh()Cela force un nouveau chargement de conteneur sur le réseau.
La façon dont vous voulez charger le conteneur dépend entièrement de vous. Certaines méthodes, telles que container.refresh()imposent plus de requêtes réseau que d’autres, il s’agit donc toujours d’un compromis entre fraîcheur, disponibilité et charge réseau.
Une grande partie du processus de chargement des conteneurs est expliquée ici, même si je dois dire que ce n’est pas du tout clairement documenté (et c’est en Objective-C).
Maintenant, construisez le projet et assurez-vous qu’aucune erreur ne s’affiche. Vous pouvez exécuter le projet et vous devriez déjà voir une journalisation détaillée :
Vous êtes prêt à pousser des éléments vers la couche de données pour déclencher vos balises. Impressionnant!
6. Poussez des éléments vers la couche de données
C’est là que Google Tag Manager pour les applications est très similaire à GTM pour le Web. En invoquant le push méthode de l’instance de couche de données, GTM réagira au dictionnaire que vous poussez et déclenchera toutes les balises pertinentes.
Pour l’essayer, ouvrez un fichier de contrôleur de vue dans votre projet. S’il s’agit d’une configuration de projet par défaut, il devrait y en avoir une nommée ViewController.swift.
Maintenant, pour envoyer la vue d’écran, il est logique de ne l’envoyer qu’une fois la vue chargée. Alors, trouvez la méthode avec la signature suivante, ou créez-en une si elle n’existe pas :
override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) }Créons une instance de dataLayer et poussez-y la charge utile. Modifiez donc la fonction pour qu’elle ressemble à ceci :
override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) let dataLayer = TAGManager.instance().dataLayer dataLayer.push(["event" : "screenView", "screenName" : "Home"]) }Vous créez d’abord une variable immuable dataLayerqui est une référence pointant vers dataLayer l’interface d’un TAGManager exemple.
Ensuite, vous faites le dataLayer.push(), en envoyant un dictionnaire avec des paires clé-valeur. Comme avec GTM pour le Web, le 'event' est ce qui fait fonctionner les choses, et les autres variables peuvent (et seront) utilisées si c’est ainsi que vous avez configuré les balises.
Puisque nous avons déjà un Tag qui utilise le 'screenName' variable, ce code devrait fonctionner, en envoyant une vue d’écran avec Domicile comme nom d’écran.
Allez-y, créez le projet et exécutez votre application. Vous devriez voir quelque chose comme ceci dans le débogueur :
Comme vous pouvez le voir, le &CD; (pour le nom d’écran) et &t; les paramètres sont là, ce qui signifie que la charge utile est OK. Ensuite, il y a la requête GET au point de terminaison Google Analytics, signalant que la charge utile a été envoyée.
Et c’est tout! Vous avez entre les mains une installation fonctionnelle de Google Tag Manager.
BONUS : interface simple pour interagir avec la couche de données
Puisqu’on veut être un peu plus ambitieux, on peut effectivement créer une interface (ou un module) pour interagir…
