Startleitfaden für Swift

In diesem Leitfaden wird beschrieben, wie Sie eine iOS-App in Swift erstellen und implementieren, um Ereignisse für das Öffnen eines Bildschirms und das Drücken von Schaltflächen mit Google Tag Manager (GTM) zu erfassen.

1. Erstellen Sie ein neues Projekt

1. Öffnen Sie Xcode.
2. Klicken Sie auf Create a new Xcode project (Neues Xcode-Projekt erstellen).
3. Wählen Sie Single View Application aus.
4. Klicken Sie auf Weiter.
5. Benennen Sie Ihr Projekt und wählen Sie weitere Optionen dafür aus. Der Projektname und der App-Name müssen mit dem Produktnamen übereinstimmen.
   
6. Klicken Sie auf Weiter.
7. Wählen Sie einen Projektspeicherort (Verzeichnis) aus.
8. Klicken Sie auf Erstellen.

2. Google Tag Manager-Abhängigkeiten installieren

1. Schließen Sie Xcode.
2. Führen Sie in einem Terminal den folgenden Befehl aus, um CocoaPods zu installieren:

   $ sudo gem install cocoapods
   

3. Wechseln Sie in Ihr Projektverzeichnis.
4. Führen Sie den folgenden Befehl aus, um eine Datei mit dem Namen Podfile zu erstellen:

   $ pod init
   

5. Entfernen Sie in Podfile das Kommentarzeichen bei use_frameworks! und fügen Sie dem Ziel pod 'GoogleTagManager' hinzu:

# Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end

6. Führen Sie den folgenden Befehl aus, um die Abhängigkeiten von Google Tag Manager (GTM) für Ihr Projekt herunterzuladen und zu installieren:

   $ pod install
   

   Mit diesem Befehl wird auch der Arbeitsbereich GtmSwiftTutorial.xcworkspace erstellt. Verwenden Sie diesen Arbeitsbereich ab sofort, um die GtmSwiftTutorial-App zu entwickeln.

3. Bridging-Header für Objective-C-Bibliotheken hinzufügen

So erstellen Sie eine Bridging-Header-Datei:

1. Öffnen Sie Xcode.
2. Klicken Sie auf Datei > Neu > Datei.
3. Wählen Sie unter iOS > Quelle die Option Header-Datei aus.
4. Klicken Sie auf Weiter.
5. Geben Sie den Namen der Kopfdatei BridgingHeader.h ein.
   
6. Klicken Sie auf Erstellen.
7. Fügen Sie der Headerdatei die folgenden import-Anweisungen hinzu:

   #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 */
   

So fügen Sie den Objective-C-Bridging-Header zu den Build-Einstellungen hinzu:

1. Klicken Sie in Xcode auf Ihr Projekt.
2. Klicken Sie im Editorbereich auf Build-Einstellungen.
   
3. Wählen Sie Alle und Kombiniert aus und suchen Sie nach bridging.
   
4. Geben Sie in der rechten Spalte der Zeile mit dem Objective-C-Bridging-Header BridgingHeader.h ein.
   

4. Dem Projekt einen Standardcontainer hinzufügen

Bevor Sie Ihrem Projekt einen Standardcontainer hinzufügen, laden Sie eine Binärdatei für einen mobilen Container herunter:

1. Melden Sie sich in Ihrem Google Tag Manager-Konto an.
2. Wählen Sie einen mobilen Container aus.
3. Klicken Sie in der Menüleiste auf Versionen.
4. Klicken Sie bei der ausgewählten Containerversion auf Aktionen > Herunterladen.
Der Name der heruntergeladenen Datei ist die Container-ID, z. B. GTM-PT3L9Z.

So fügen Sie Ihrem Projekt ein Standardcontainer-Binary hinzu:

1. Öffnen Sie Xcode.
2. Klicken Sie im Dock auf das Symbol Finder.
3. Klicken Sie auf den Ordner Downoloads.
4. Ziehen Sie die Binärdatei des Containers in den Ordner Downloads und legen Sie sie im Stammordner Ihres Xcode-Projekts ab.

5. Google Tag Manager mit Ihrer App verknüpfen

1. Öffnen Sie in Xcode die Datei AppDelegate.swift.
2. Die Klasse AppDelegate soll die Klasse TAGContainerOpenerNotifier erweitern:

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

   Nachdem Sie die Klasse erweitert haben, erhalten Sie den Fehler Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'. Mit dem folgenden Schritt können Sie diesen Fehler beheben.

3. Fügen Sie unten in der Klassendefinition AppDelegate die folgende Funktion hinzu:

   func containerAvailable(container: TAGContainer!) {
     container.refresh()
   }
   

4. Fügen Sie in der Funktion application vor der Anweisung return true den folgenden Code hinzu:

   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. Ereignis „Bildschirmöffnung“ verfolgen

So erfassen Sie ein Ereignis, bei dem ein Bildschirm geöffnet wird:

1. Erstellen Sie eine Variable, um die Tracking-ID zu speichern.
2. Erstellen Sie eine Datenschichtvariable mit dem Namen screenName.
3. Erstellen Sie ein GTM-Tag mit dem Namen Bildschirmaufruf.
4. Fügen Sie Code zum Tracking des Bildschirms hinzu.

a. Variable zum Speichern der Tracking-ID erstellen

1. Melden Sie sich in Ihrem Google Tag Manager-Konto an.
2. Wählen Sie einen mobilen Container aus.
3. Klicken Sie in der linken Navigationsleiste auf Variablen.
4. Klicken Sie unter Benutzerdefinierte Variablen auf Neu.
5. Klicken Sie auf Unbenannte Variable, um den Variablennamen Tracking-ID einzugeben.
6. Wählen Sie als Variablentyp Konstante aus.
7. Geben Sie die Tracking-ID (im Format UA-XXXXXXXX-X, wobei X eine Ziffer ist) als Wert der Variablen ein.
   Verwenden Sie UA-47605289-5 (wird gelöscht).
8. Klicken Sie auf Variable erstellen.

b. Erstellen Sie eine Datenschichtvariable mit dem Namen „screenName“.

1. Melden Sie sich in Ihrem Google Tag Manager-Konto an.
2. Wählen Sie einen mobilen Container aus.
3. Klicken Sie in der linken Navigationsleiste auf Variablen.
4. Klicken Sie unter Benutzerdefinierte Variablen auf Neu.
5. Klicken Sie auf Unbenannte Variable, um den Titel Nutzername einzugeben.
6. Wählen Sie als Variablentyp Datenschichtvariable aus.
7. Geben Sie screenName als Name der Datenschichtvariablen ein.
8. Klicken Sie auf Standardwert festlegen.
9. Geben Sie den Standardwert unknown screen ein.
10. Klicken Sie auf Variable erstellen.

c. GTM-Tag mit dem Namen „Bildschirmaufruf“ erstellen

1. Melden Sie sich in Ihrem Google Tag Manager-Konto an.
2. Wählen Sie einen mobilen Container aus.
3. Klicken Sie in der linken Navigationsleiste auf Tags.
4. Klicken Sie auf Neu.
5. Klicken Sie auf Unbenanntes Tag, um den Tag-Namen einzugeben Screen View.
6. Wählen Sie das Produkt Google Analytics aus.
7. Wählen Sie in der Liste Tracking-ID aus.
8. Wählen Sie als Tracking-Typ App-Ansicht aus.
9. Klicken Sie auf Weitere Einstellungen.
10. Klicken Sie auf Festzulegende Felder.
11. Klicken Sie auf + Feld hinzufügen.
12. Wählen Sie den Feldnamen screenName und den Wert Bildschirmname aus.
13. Klicken Sie auf Weiter.
14. Wählen Sie unter Auslösen bei die Option Beliebiges Ereignis aus.
15. Klicken Sie auf Tag erstellen.

Siehe den Screenshot zum Erstellen des GTM-Tags für Bildschirmaufrufe.

d. Code für das Bildschirm-Tracking hinzufügen

1. Öffnen Sie die Datei ViewController.swift in Xcode.
2. Definieren Sie eine Variable mit dem Namen dataLayer innerhalb der Klasse ViewController:

   var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
   

3. Übertragen Sie in der viewDidLoad()-Funktion das Ereignis OpenScreen in die Datenschicht:

   dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
   

Die Definition der Klasse ViewController sieht so aus:

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. Ereignis „Schaltfläche gedrückt“ erfassen

So erfassen Sie ein Ereignis, bei dem eine Schaltfläche gedrückt wird:

1. Erstellen Sie eine Datenschichtvariable mit dem Namen eventAction.
2. Erstellen Sie eine benutzerdefinierte Ereignisvariable mit dem Namen Ereignis.
3. Erstellen Sie ein GTM-Tag mit dem Titel Schaltfläche gedrückt.
4. Erstellen Sie eine Schaltfläche und fügen Sie Code hinzu, um zu erfassen, dass die Schaltfläche gedrückt wird.

a. Erstellen Sie die Datenschichtvariable „eventAction“.

1. Melden Sie sich in Ihrem Google Tag Manager-Konto an.
2. Wählen Sie einen mobilen Container aus.
3. Klicken Sie in der linken Navigationsleiste auf Variablen.
4. Klicken Sie unter Benutzerdefinierte Variablen auf Neu.
5. Klicken Sie auf Unbenannte Variable, um den Titel Ereignisaktion einzugeben.
6. Wählen Sie als Variablentyp Datenschichtvariable aus.
7. Geben Sie unter Name der Datenschichtvariablen den Wert eventAction ein.
8. Klicken Sie auf Standardwert festlegen.
9. Geben Sie den Standardwert unbekanntes Ereignis ein.
10. Klicken Sie auf Variable erstellen.

b. Benutzerdefinierte Ereignisvariable namens „Ereignis“ erstellen

1. Melden Sie sich in Ihrem Google Tag Manager-Konto an.
2. Wählen Sie einen mobilen Container aus.
3. Klicken Sie in der linken Navigationsleiste auf Variablen.
4. Klicken Sie unter Benutzerdefinierte Variablen auf Neu.
5. Klicken Sie auf Unbenannte Variable, um den Variablennamen Ereignis einzugeben.
6. Wählen Sie als Variablentyp Benutzerdefiniertes Ereignis aus.
7. Klicken Sie auf Variable erstellen.

c. GTM-Tag mit dem Namen „Schaltfläche gedrückt“ erstellen

1. Melden Sie sich in Ihrem Google Tag Manager-Konto an.
2. Wählen Sie einen mobilen Container aus.
3. Klicken Sie in der linken Navigationsleiste auf Tags.
4. Klicken Sie auf Neu.
5. Klicken Sie auf Unbenanntes Tag, um den Tag-Namen einzugeben Schaltfläche drücken.
6. Wählen Sie das Produkt Google Analytics aus.
7. Wählen Sie in der Liste Tracking-ID aus.
8. Wählen Sie als Tracking-Typ Ereignis aus.
9. Wählen Sie die Kategorie Ereignis aus.
10. Wählen Sie Ereignisaktion aus.
11. Klicken Sie auf Weiter.
12. Wählen Sie unter Auslösen bei die Option Beliebiges Ereignis aus.
13. Klicken Sie auf Tag erstellen.

Screenshot zum Erstellen des GTM-Tags Schaltfläche gedrückt

d. Schaltfläche erstellen und Code hinzufügen, um zu erfassen, ob die Schaltfläche gedrückt wird

1. Öffnen Sie Ihr Xcode-Projekt.
2. Öffnen Sie Main.storyboard.
3. Klicken Sie in der Xcode-Symbolleiste auf die Schaltfläche ganz rechts oben, um den Dienstprogrammbereich (rechte Seitenleiste) zu öffnen.
4. Unten im Versorgungsbereich:
   

   Klicken Sie auf die blaue Schaltfläche Objektbibliothek anzeigen:

   
5. Geben Sie Schaltfläche in das Suchfeld ein.
   
6. Ziehen Sie Schaltfläche in das Storyboard und legen Sie sie links oben ab.
   
7. Klicken Sie in der Xcode-Symbolleiste auf die Schaltfläche für den Assistant-Editor .
8. Ziehen Sie die Schaltfläche bei gedrückter Strg-Taste an den unteren Rand der ViewController-Klassendefinition.
   
9. Wählen Sie im Dialogfeld die Option Action connection aus, geben Sie den Funktionsnamen buttonPressed ein und klicken Sie auf Connect.
   

   Dadurch wird am Ende der ViewController-Klassendefinition die folgende Funktion hinzugefügt:

   @IBAction func buttonPressed(sender: AnyObject) {
   }
   

   Die Funktion wird jedes Mal ausgeführt, wenn die Taste gedrückt wird.

10. Fügen Sie in der Funktion buttonPressed den folgenden Code hinzu, um das Ereignis ButtonPressed in die Tagesebene zu schieben:

    @IBAction func buttonPressed(sender: AnyObject) {
      dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
    }
    

8. App erstellen und ausführen

Klicken Sie in Xcode auf Product > Run (Produkt > Ausführen). Xcode erstellt und führt die App aus: