Guide de démarrage pour Swift

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

1. Créer un projet

  1. Ouvrez Xcode. créer un projet
  2. Cliquez sur Create a new Xcode project (Créer un projet Xcode).
  3. Sélectionnez Single View Application (Application Single View). sélectionner une application de vue unique
  4. Cliquez sur Suivant.
  5. Attribuez un nom à 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 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 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 Goal-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 Fichier d'en-tête.
  4. Cliquez sur Suivant.
  5. Saisissez le nom de fichier d'en-tête BridgingHeader.h.
    Créer un fichier d'en-tête de pontage
  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 Objectif-C dans les 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 bridging.
    Rechercher un pontage
  4. Dans la colonne de droite de la ligne contenant Objectif-C Bridging Header, saisissez BridgingHeader.h.
    Ajout de BridgingHeader.h en tant qu&#39;en-tête de pontage Objectif-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 pour 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é est l'ID du conteneur, par exemple GTM-PT3L9Z.

Pour ajouter un binaire de conteneur par défaut à votre projet, procédez comme suit:

  1. Ouvrez Xcode.
  2. Cliquez sur l'icône Finder du 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, vous obtenez l'erreur Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'. L'étape suivante permet de résoudre cette erreur.

  3. Ajoutez la fonction suivante en bas de la définition de 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 de l'é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 Google Tag Manager intitulée Affichage de l'écran.
  4. Ajouter un code de suivi d'é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 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 ID de suivi.
  6. Sélectionnez le type de variable Constante.
  7. Saisissez l'ID de suivi (au format UA-XXXXXXXX-X, où X est un chiffre) comme valeur de la variable.
    Utilisez UA-47605289-5 (à supprimer).
  8. Cliquez sur Créer une variable.

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

  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 titre Nom de l'écran.
  6. Sélectionnez le type de variable Variable de couche de données.
  7. Saisissez screenName dans le champ 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 unknown screen (Écran inconnu).
  10. Cliquez sur Créer une variable.

c. Créer une balise GTM intitulée "Screen View"

  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 New (Nouveau).
  5. Cliquez sur Balise sans titre pour saisir le nom de balise Vue de l'é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 de champ screenName et sa valeur Screen Name.
  13. Cliquez sur Continuer.
  14. Sous Déclenchement, sélectionnez N'importe quel é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. Événement de pression sur le bouton "Suivre"

Pour suivre un événement de pression 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 Button Pressed (Bouton pressé).
  4. Créez un bouton et ajoutez du code pour savoir si vous avez appuyé dessus.

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 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 et saisissez le titre Action d'événement.
  6. Sélectionnez le type de variable Variable de couche de données.
  7. Dans le champ Nom de la variable de couche de données, saisissez eventAction.
  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 nommée "Event".

  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 variable Événement.
  6. Sélectionnez le type de variable Événement personnalisé.
  7. Cliquez sur Créer une variable.

c. Créez une balise GTM intitulée "Button Pressed" (Bouton pressé)

  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 New (Nouveau).
  5. Cliquez sur Balise sans titre pour saisir le nom de balise Bouton pressé.
  6. Sélectionnez le produit Google Analytics.
  7. Sélectionnez ID de suivi dans la liste.
  8. Dans Type de suivi, sélectionnez Événement.
  9. Sélectionnez la catégorie Événement.
  10. Sélectionnez Action d'événement.
  11. Cliquez sur Continuer.
  12. Sous Déclenchement, sélectionnez N'importe quel événement.
  13. Cliquez sur Créer une balise.

d. Créez un bouton et ajoutez du code pour savoir si vous avez appuyé sur le bouton

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

    cliquez sur le bouton bleu Afficher la bibliothèque d'objets :

    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 Button (Bouton) dans le storyboard et déposez-le dans l'angle supérieur gauche.
    Glissez-déposez le bouton dans le storyboard
  7. Cliquez sur le bouton de l'éditeur de l'Assistant Bouton &quot;Éditeur de l&#39;Assistant&quot; 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 Connect (Connecter).
    Créer le code pour gérer l&#39;événement d&#39;appui sur un bouton

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

    @IBAction func buttonPressed(sender: AnyObject) {
}

    La fonction est exécutée chaque fois que l'utilisateur appuie sur le bouton.

  10. Dans la fonction buttonPressed, ajoutez le code suivant pour transmettre l'événement ButtonPressed à la couche de 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 crée et exécute l'application:

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