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 de l'écran et d'appui sur un bouton avec la balise Google responsable commercial.

1. Créer un projet

  1. Ouvrez Xcode. créez 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 à affichage unique
  4. Cliquez sur Suivant.
  5. Attribuez un nom à votre projet et choisissez des options supplémentaires. Le nom de votre projet et sera identique 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 des 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 Google Tag Manager (GTM) les dépendances à votre projet: 
    $ pod install

    Cette commande crée également l'espace de travail GtmSwiftTutorial.xcworkspace. Utilisez désormais 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 Fichier > Nouveau > Fichier.
  3. Sous iOS > Source, sélectionnez 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 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 pont 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;Paramètres de compilation&quot;.
  3. Sélectionnez All (Tous) et Combined (Combinée), puis recherchez bridging (passerelle).
    Recherche de ponts
  4. Dans la colonne de droite de la ligne contenant En-tête de pont Objective-C, saisissez BridgingHeader.h.
    Ajouter BridgingHeader.h comme en-tête de pont 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 pour mobile.
  3. Cliquez sur Versions dans la barre de menu.
  4. Cliquez sur Actions > Télécharger sur le conteneur sélectionné version.
    5. Le nom du fichier téléchargé est l'ID du conteneur, 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 du 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 prolongé le cours, vous obtiendrez 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 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 Screen View (Vue 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 à Google Tag Manager. Google Cloud.
  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 à Google Tag Manager. Google Cloud.
  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 écran inconnu.
  10. Cliquez sur Créer une variable.

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

  1. Connectez-vous à Google Tag Manager. Google Cloud.
  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. Affichage 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 du champ screenName et sa valeur Nom de l'écran.
  13. Cliquez sur Continuer.
  14. Sous Déclenchement, sélectionnez Tout événement.
  15. Cliquez sur Créer une balise.

d. Ajouter un 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(), transférez 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 d'appui sur le 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 activé.
  4. Créez un bouton et ajoutez du code pour vérifier que l'utilisateur a appuyé dessus.

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

  1. Connectez-vous à Google Tag Manager. Google Cloud.
  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. Action d'événement.
  6. Sélectionnez le type de variable Variable de couche de données.
  7. Saisissez eventAction 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 Événement inconnu.
  10. Cliquez sur Créer une variable.

b. Créer une variable d'événement personnalisée nommée "Event"

  1. Connectez-vous à Google Tag Manager. Google Cloud.
  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 activé"

  1. Connectez-vous à Google Tag Manager. Google Cloud.
  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. 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 d'événement.
  11. Cliquez sur Continuer.
  12. Sous Déclenchement, sélectionnez Tout événement.
  13. Cliquez sur Créer une balise.

d. Créez un bouton et ajoutez du code pour savoir si un utilisateur a appuyé dessus.

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

    Cliquez sur le bouton Afficher la bibliothèque d'objets (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, puis déposez-le en haut dans l'angle gauche.
    Glisser-déposer le bouton sur le storyboard
  7. Cliquer sur le bouton "Éditeur de l'Assistant" Bouton de l&#39;éditeur de l&#39;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, puis saisissez le nom de la fonction. buttonPressed et cliquer sur Connecter.
    Créer du code pour gérer l&#39;événement d&#39;appui sur un bouton

    La fonction suivante est alors ajoutée à la fin du Définition de la 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 Transférez l'événement ButtonPressed vers le calque "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 > Exécuter. Xcode va compiler et exécuter l'application:

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