Guide de démarrage pour Swift

Ce guide explique comment créer et implémenter une application iOS en Swift pour suivre les événements d'ouverture d'écran et de pression sur un bouton avec Google Tag Manager (GTM).

1. Créer un projet

  1. Ouvrez Xcode. créez un projet
  2. Cliquez sur Créer un projet Xcode.
  3. Sélectionnez Application à vue unique. sélectionner une application à affichage unique
  4. Cliquez sur Suivant.
  5. Nommez votre projet et choisissez des options supplémentaires. Le nom de votre projet et celui de votre application seront identiques au nom du produit.
    Saisissez le nom du produit et d'autres options
  6. Cliquez sur Suivant.
  7. Sélectionnez un emplacement de projet (répertoire).
  8. Cliquez sur Créer.

2. Installer les dépendances de Google Tag Manager

  1. Quittez Xcode.
  2. Dans un terminal, exécutez la commande suivante pour installer CocoaPods : 
    $ sudo gem install cocoapods
  3. Accédez au répertoire de votre projet.
  4. Exécutez la commande suivante pour créer un fichier nommé Podfile : 
    $ pod init
  5. Dans Podfile, annulez la mise en commentaire de use_frameworks! et ajoutez pod 'GoogleTagManager' à la cible:
    6. # Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end
  6. Exécutez la commande suivante pour télécharger et installer les dépendances de Google Tag Manager (GTM) dans votre projet : 
    $ pod install

    Cette commande crée également l'espace de travail GtmSwiftTutorial.xcworkspace. À partir de maintenant, utilisez cet espace de travail pour développer l'application GtmSwiftTutorial.

3. Ajouter un en-tête de pontage pour les bibliothèques Objective-C

Pour créer un fichier d'en-tête de pontage :

  1. Ouvrez Xcode.
  2. Cliquez sur File > New > File (Fichier > Nouveau > Fichier).
  3. Sous iOS > Source, sélectionnez Header File (Fichier d'en-tête).
  4. Cliquez sur Suivant.
  5. Saisissez le nom du fichier d'en-tête BridgingHeader.h.
    Créer un fichier d'en-tête de pont
  6. Cliquez sur Créer.
  7. Ajoutez ces instructions import au fichier d'en-tête : 
    #ifndef BridgingHeader_h
#define BridgingHeader_h

#import <GoogleTagManager/TAGManager.h>
#import <GoogleTagManager/TAGContainer.h>
#import <GoogleTagManager/TAGContainerOpener.h>
#import <GoogleTagManager/TAGDataLayer.h>
#import <GoogleTagManager/TAGLogger.h>

#endif /* BridgingHeader_h */

Pour ajouter un en-tête de pontage Objective-C aux paramètres de compilation:

  1. Dans Xcode, cliquez sur votre projet.
  2. Cliquez sur Build Settings (Paramètres de compilation) dans la zone de l'éditeur.
    Cliquez sur &quot;Build Settings&quot; (Paramètres de compilation).
  3. Sélectionnez Tout et Combiné, puis recherchez pontage.
    Pontage de recherche
  4. Dans la colonne de droite de la ligne contenant En-tête de pontage Objective-C, saisissez BridgingHeader.h.
    Ajouter BridgingHeader.h comme en-tête de pontage Objective-C

4. Ajouter un conteneur par défaut à votre projet

Avant d'ajouter un conteneur par défaut à votre projet, téléchargez un binaire de conteneur mobile:

  1. Connectez-vous à votre compte Google Tag Manager.
  2. Sélectionnez un conteneur mobile.
  3. Cliquez sur Versions dans la barre de menu.
  4. Cliquez sur Actions > Télécharger sur la version du conteneur sélectionnée.
    5. Le nom du fichier téléchargé correspond à l'ID du conteneur (par exemple, GTM-PT3L9Z).

Pour ajouter un binaire de conteneur par défaut à votre projet:

  1. Ouvrez Xcode.
  2. Cliquez sur l'icône Finder (Finder) dans le Dock.
  3. Cliquez sur le dossier Downoloads.
  4. Faites glisser le fichier binaire du conteneur dans le dossier Downloads, puis déposez-le dans le dossier racine de votre projet Xcode.
  1. Dans Xcode, ouvrez le fichier AppDelegate.swift.
  2. Demandez à la classe AppDelegate d'étendre la classe TAGContainerOpenerNotifier : 
    import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier {
  // ...
}

    Après avoir étendu la classe, l'erreur Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier' s'affiche. L'étape suivante permettra de corriger cette erreur.

  3. Ajoutez la fonction suivante en bas de la définition de la classe AppDelegate : 
    func containerAvailable(container: TAGContainer!) {
  container.refresh()
}
  4. Dans la fonction application, ajoutez le code suivant avant l'instruction return true : 
    let GTM = TAGManager.instance()
GTM.logger.setLogLevel(kTAGLoggerLogLevelVerbose)

TAGContainerOpener.openContainerWithId("GTM-PT3L9Z",  // change the container ID "GTM-PT3L9Z" to yours
    tagManager: GTM, openType: kTAGOpenTypePreferFresh,
    timeout: nil,
    notifier: self)

6. Suivre l'événement d'ouverture de l'écran

Pour suivre un événement d'ouverture d'écran:

  1. Créez une variable pour stocker l'ID de suivi.
  2. Créez une variable de couche de données nommée screenName.
  3. Créez une balise GTM intitulée Vue d'écran.
  4. Ajoutez le code de suivi de l'écran.

a. Créer une variable pour stocker l'ID de suivi

  1. Connectez-vous à votre compte Google Tag Manager.
  2. Sélectionnez un conteneur mobile.
  3. Dans la barre de navigation de gauche, cliquez sur Variables.
  4. Sous Variables définies par l'utilisateur, cliquez sur Nouvelle.
  5. Cliquez sur Variable sans titre pour saisir le nom de la variable ID de suivi.
  6. Choisissez Constante comme type de variable.
  7. Saisissez l'ID de suivi (au format UA-XXXXXXXX-X, où X correspond à un chiffre) comme valeur de la variable.
    Utilisez UA-47605289-5 (à supprimer).
  8. Cliquez sur Créer une variable.

b. Créez une variable de couche de données nommée "screenName".

  1. Connectez-vous à votre compte Google Tag Manager.
  2. Sélectionnez un conteneur mobile.
  3. Dans la barre de navigation de gauche, cliquez sur Variables.
  4. Sous Variables définies par l'utilisateur, cliquez sur Nouvelle.
  5. Cliquez sur Variable sans titre pour saisir le titre Nom à l'écran.
  6. Choisissez Variable de couche de données comme type de variable.
  7. Dans le champ Nom de la variable de couche de données, saisissez screenName.
  8. Cliquez sur Définir la valeur par défaut.
  9. Saisissez la valeur par défaut écran inconnu.
  10. Cliquez sur Créer une variable.

c. Créer une balise GTM intitulée "Vue de l'écran"

  1. Connectez-vous à votre compte Google Tag Manager.
  2. Sélectionnez un conteneur pour mobile.
  3. Dans la barre de navigation de gauche, cliquez sur Balises.
  4. Cliquez sur Nouveau.
  5. Cliquez sur Balise sans titre pour saisir le nom de la balise. Vue d'écran
  6. Sélectionnez le produit Google Analytics.
  7. Sélectionnez ID de suivi dans la liste.
  8. Sélectionnez App View (Vue de l'application) comme type de suivi.
  9. Cliquez sur Plus de paramètres.
  10. Cliquez sur Champs à définir.
  11. Cliquez sur + Ajouter un champ.
  12. Sélectionnez le nom du champ screenName et sa valeur Screen Name (Nom de l'écran).
  13. Cliquez sur Continuer.
  14. Sous Déclencher, sélectionnez Tout événement.
  15. Cliquez sur Créer une balise.

d. Ajouter le code de suivi de l'écran

  1. Ouvrez le fichier ViewController.swift dans Xcode.
  2. Définissez une variable nommée dataLayer dans la classe ViewController :
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
  3. Dans la fonction viewDidLoad(), transmettez l'événement OpenScreen à la couche de données :
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])

La définition de la classe ViewController se présente comme suit:

import UIKit

class ViewController: UIViewController {
  var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer

  override func viewDidLoad() {
    super.viewDidLoad()
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that cant be recreated
  }
}

7. Suivre l'événement de pression sur un bouton

Pour suivre un événement d'appui sur un bouton:

  1. Créez une variable de couche de données nommée eventAction.
  2. Créez une variable d'événement personnalisée nommée Event.
  3. Créez une balise GTM intitulée Bouton enfoncé.
  4. Créez un bouton et ajoutez du code pour suivre le fait qu'il est enfoncé.

a. Créez une variable de couche de données nommée "eventAction".

  1. Connectez-vous à votre compte Google Tag Manager.
  2. Sélectionnez un conteneur mobile.
  3. Dans la barre de navigation de gauche, cliquez sur Variables.
  4. Sous Variables définies par l'utilisateur, cliquez sur Nouvelle.
  5. Cliquez sur Variable sans titre pour saisir le titre Action d'événement.
  6. Sélectionnez le type de variable Variable de couche de données.
  7. Saisissez eventAction comme Nom de la variable de couche de données.
  8. Cliquez sur Définir la valeur par défaut.
  9. Saisissez la valeur par défaut événement inconnu.
  10. Cliquez sur Créer une variable.

b. Créez une variable d'événement personnalisée appelée "Événement".

  1. Connectez-vous à votre compte Google Tag Manager.
  2. Sélectionnez un conteneur pour mobile.
  3. Dans la barre de navigation de gauche, cliquez sur Variables.
  4. Sous Variables définies par l'utilisateur, cliquez sur Nouvelle.
  5. Cliquez sur Variable sans titre pour saisir le nom de la variable Événement.
  6. Sélectionnez le type de variable Événement personnalisé.
  7. Cliquez sur Créer une variable.

c. Créer une balise GTM intitulée "Bouton enfoncé"

  1. Connectez-vous à votre compte Google Tag Manager.
  2. Sélectionnez un conteneur mobile.
  3. Dans la barre de navigation de gauche, cliquez sur Balises.
  4. Cliquez sur Nouveau.
  5. Cliquez sur Balise sans titre pour saisir le nom de la balise Bouton enfoncé.
  6. Sélectionnez le produit Google Analytics.
  7. Sélectionnez ID de suivi dans la liste.
  8. Sélectionnez Événement comme Type de suivi.
  9. Sélectionnez la catégorie Événement.
  10. Sélectionnez Action de l'événement.
  11. Cliquez sur Continuer.
  12. Sous Déclencher, sélectionnez Tout événement.
  13. Cliquez sur Créer une balise.

d. Créer un bouton et ajouter du code pour suivre le clic sur le bouton

  1. Ouvrez votre projet Xcode.
  2. Ouvrez Main.storyboard.
  3. Cliquez sur le bouton en haut à droite de la barre d'outils Xcode pour ouvrir la zone d'utilitaire (barre latérale droite). Storyboard et zone d&#39;utilité
  4. En bas de la zone d'utilitaire,
    Bouton bleu pour ouvrir la bibliothèque d&#39;objets

    Cliquez sur le bouton Afficher la bibliothèque d'assets (bouton bleu):

    Fenêtre pop-up de la bibliothèque d&#39;objets
  5. Saisissez button dans le champ de recherche.
    bouton dans la bibliothèque d&#39;objets
  6. Faites glisser Bouton vers le storyboard et déposez-le en haut à gauche.
    Glisser-déposer le bouton sur le storyboard
  7. Cliquez sur le bouton de l'éditeur de l'assistant Bouton de l&#39;éditeur Assistant dans la barre d'outils Xcode.
  8. Tout en maintenant la touche Ctrl enfoncée, faites glisser le bouton et déposez-le en bas de la définition de classe ViewController.
    Glissez-déposez le bouton dans la définition de la classe ViewController.
  9. Dans la boîte de dialogue, sélectionnez la connexion Action, saisissez le nom de la fonction buttonPressed, puis cliquez sur Connecter.
    Créer du code pour gérer l&#39;événement de pression sur le bouton

    Cela ajoute la fonction suivante à la fin de la définition de la classe ViewController:

    @IBAction func buttonPressed(sender: AnyObject) {
}

    La fonction est exécutée chaque fois que vous appuyez sur le bouton.

  10. Dans la fonction buttonPressed, ajoutez le code suivant pour transmettre l'événement ButtonPressed à la couche "Jour" : 
    @IBAction func buttonPressed(sender: AnyObject) {
  dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
}

8. Compiler et exécuter votre application

Dans Xcode, cliquez sur Product > Run (Produit > Exécuter). Xcode compile et exécute l'application:

Capture d&#39;écran de l&#39;application lancée