Startleitfaden für Swift

In diesem Leitfaden wird beschrieben, wie Sie eine iOS-App in Swift erstellen und implementieren, um mit Google Tag Manager (GTM) Ereignisse zu erfassen, die sich beim Öffnen des Bildschirms und Betätigen der Schaltflächen befinden.

1. Ein neues Projekt erstellen

1. Öffnen Sie Xcode.
2. Klicken Sie auf Neues Xcode-Projekt erstellen.
3. Wählen Sie Single View Application (Anwendung mit Einzelansicht) aus.
4. Klicken Sie auf Weiter.
5. Benennen Sie Ihr Projekt und wählen Sie weitere Optionen dafür aus. Der Projektname und der Anwendungsname sind mit dem Produktnamen identisch.
   
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. Beenden 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 den Kommentar von 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 Google Tag Manager-Abhängigkeiten (GTM) herunterzuladen und in Ihrem Projekt zu installieren:

   $ pod install
   

   Mit diesem Befehl wird auch der Arbeitsbereich GtmSwiftTutorial.xcworkspace erstellt. Hier kannst du ab sofort die GtmSwiftTutorial App 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 File > New > File (Datei > Neu > Datei).
3. Wählen Sie unter iOS > Quelle die Option Header-Datei aus.
4. Klicken Sie auf Weiter.
5. Geben Sie den Dateinamen BridgingHeader.h ein.
   
6. Klicken Sie auf Erstellen.
7. Fügen Sie der Headerdatei diese 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 Build-Einstellungen einen Objective-C-Bridging-Header hinzu:

1. Klicken Sie in Xcode auf Ihr Projekt.
2. Klicken Sie im Editorbereich auf Build Settings (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 Objective-C Bridging Header den Wert BridgingHeader.h ein.
   

4. Standardcontainer zum Projekt hinzufügen

Laden Sie vor dem Hinzufügen eines Standardcontainers zu Ihrem Projekt eine Binärdatei für einen mobilen Container herunter:

1. Melde dich in deinem 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 für die ausgewählte Containerversion auf Aktionen > Herunterladen.
Der Name der heruntergeladenen Datei ist die Container-ID, z. B. GTM-PT3L9Z.

So fügen Sie Ihrem Projekt eine Standard-Container-Binärdatei hinzu:

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

5. Google Tag Manager mit Ihrer App verknüpfen

1. Öffnen Sie die Datei AppDelegate.swift in Xcode.
2. Lassen Sie die Klasse AppDelegate 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'. Der Fehler lässt sich mit den folgenden Schritten beheben.

3. Fügen Sie am Ende der Klassendefinition AppDelegate die folgende Funktion hinzu:

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

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

   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 vom Typ „Bildschirm geöffnet“ erfassen

So erfassen Sie ein Ereignis vom Typ „Bildschirm geöffnet“:

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 Titel Bildschirmansicht.
4. Bildschirm-Tracking-Code hinzufügen

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 und geben Sie den Variablennamen Tracking-ID ein.
6. Wählen Sie als Variablentyp Konstante aus.
7. Geben Sie die Tracking-ID im Format UA-XXXXXXXX-X, wobei X eine Zahl ist, als Wert der Variablen ein.
   UA-47605289-5 verwenden (zum Löschen).
8. Klicken Sie auf Variable erstellen.

b. Datenschichtvariable mit dem Namen „screenName“ 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 und geben Sie den Titel Bildschirmname ein.
6. Wählen Sie als Variablentyp Datenschichtvariable aus.
7. Geben Sie als Name der Datenschichtvariablen screenName ein.
8. Klicken Sie auf Standardwert festlegen.
9. Geben Sie den Standardwert unbekannter Bildschirm ein.
10. Klicken Sie auf Variable erstellen.

c. GTM-Tag mit dem Titel „Bildschirmansicht“ 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 Bildschirmansicht einzugeben.
6. Wählen Sie das Produkt Google Analytics aus.
7. Wählen Sie in der Liste die Option Tracking-ID aus.
8. Wählen Sie App-Datenansicht als Tracking-Typ 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.

Im Screenshot sehen Sie, wie Sie das GTM-Tag Bildschirmansicht erstellen.

d. Bildschirm-Tracking-Code hinzufügen

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

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

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

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

Die Definition der ViewController-Klasse 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 „Tracking-Schaltfläche gedrückt“

So erfassen Sie ein Ereignis beim Betätigen einer Schaltfläche:

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 Taste 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. Datenschichtvariable mit dem Namen „eventAction“ 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 und geben Sie den Titel Ereignisaktion ein.
6. Wählen Sie als Variablentyp Datenschichtvariable aus.
7. Geben Sie als Name der Datenschichtvariablen eventAction ein.
8. Klicken Sie auf Standardwert festlegen.
9. Geben Sie den Standardwert unbekanntes Ereignis ein.
10. Klicken Sie auf Variable erstellen.

b. Erstellen Sie eine benutzerdefinierte Ereignisvariable mit dem Namen „Ereignis“

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 und geben Sie den Variablennamen Ereignis ein.
6. Wählen Sie als Variablentyp Benutzerdefiniertes Ereignis aus.
7. Klicken Sie auf Variable erstellen.

c. GTM-Tag mit dem Titel „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 Taste gedrückt einzugeben.
6. Wählen Sie das Produkt Google Analytics aus.
7. Wählen Sie in der Liste die Option Tracking-ID aus.
8. Wählen Sie Ereignis als Tracking-Typ 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.

Im Screenshot sehen Sie, wie Sie das GTM-Tag Taste gedrückt erstellen.

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 auf die Schaltfläche ganz oben rechts in der Xcode-Symbolleiste, um den Dienstprogrammbereich (rechte Seitenleiste) zu öffnen.
4. Unten im Versorgungsbereich
   

   Klicken Sie auf die blaue Schaltfläche Objektbibliothek anzeigen:

   
5. Geben Sie in das Suchfeld die Schaltfläche ein.
   
6. Ziehen Sie Schaltfläche in das Storyboard und legen Sie es oben links ab.
   
7. Klicken Sie in der Xcode-Symbolleiste auf die Schaltfläche für den Assistant-Editor .
8. Halten Sie die Strg-Taste gedrückt, ziehen Sie die Schaltfläche per Drag-and-drop an das Ende der ViewController-Klassendefinition.
   
9. Wählen Sie im Dialogfeld die Verbindung Action (Aktion) aus, geben Sie den Funktionsnamen buttonPressed ein und klicken Sie auf Connect (Verbinden).
   

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

   @IBAction func buttonPressed(sender: AnyObject) {
   }
   

   Die Funktion wird jedes Mal ausgeführt, wenn die Schaltfläche gedrückt wird.

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

    @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 die Anwendung und führt sie aus: