Swift – przewodnik dla początkujących

Z tego przewodnika dowiesz się, jak w Menedżerze tagów Google utworzyć i wdrożyć w Swift aplikację na iOS, aby śledzić zdarzenia otwarcia ekranu i kliknięcia przycisku.

1. Tworzenie nowego projektu

1. Otwórz Xcode.
2. Kliknij Create a new Xcode project (Utwórz nowy projekt Xcode).
3. Wybierz Single View Application (Aplikacja pojedynczego widoku).
4. Kliknij Dalej.
5. Nazwij projekt i wybierz dla niego dodatkowe opcje. Nazwa projektu i aplikacji będzie taka sama jak nazwa usługi.
   
6. Kliknij Dalej.
7. Wybierz lokalizację projektu (katalog).
8. Kliknij Utwórz.

2. Instalowanie zależności Menedżera tagów Google

1. Zamknij Xcode.
2. Aby zainstalować w terminalu Cocoapods, uruchom to polecenie:

   $ sudo gem install cocoapods
   

3. Przejdź do katalogu projektu.
4. Uruchom to polecenie, aby utworzyć plik o nazwie Podfile:

   $ pod init
   

5. W Podfile usuń znacznik komentarza z elementu use_frameworks! i dodaj pod 'GoogleTagManager' do celu:

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

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end

6. Aby pobrać i zainstalować zależności Menedżera tagów Google w projekcie, uruchom to polecenie:

   $ pod install
   

   To polecenie powoduje też utworzenie obszaru roboczego GtmSwiftTutorial.xcworkspace. Od teraz możesz korzystać z tego miejsca do pracy przy tworzeniu aplikacji GtmSwiftTutorial.

3. Dodaj nagłówek łączący dla bibliotek Objective-C

Aby utworzyć plik nagłówka połączeń:

1. Otwórz Xcode.
2. Kliknij Plik > Nowy > Plik.
3. W sekcji iOS > Źródło wybierz Plik nagłówka.
4. Kliknij Dalej.
5. Wpisz nazwę pliku nagłówka BridgingHeader.h.
   
6. Kliknij Utwórz.
7. Dodaj do pliku nagłówka te instrukcje import:

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

Aby dodać nagłówek połączenia Objective-C w ustawieniach kompilacji:

1. Kliknij projekt w Xcode.
2. W obszarze edytora kliknij Ustawienia kompilacji.
   
3. Kliknij Wszystkie i Połączone, a potem wyszukaj połączenia.
   
4. W prawej kolumnie wiersza zawierającego nagłówek mostu celu-C wpisz BridgingHeader.h.
   

4. Dodaj do projektu domyślny kontener

Zanim dodasz do projektu domyślny kontener, pobierz plik binarny kontenera mobilnego:

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. Kliknij Wersje na pasku menu.
4. Kliknij Działania > Pobierz przy wybranej wersji kontenera.
Nazwa pobranego pliku to identyfikator kontenera, np. GTM-PT3L9Z.

Aby dodać domyślny plik binarny kontenera do projektu:

1. Otwórz Xcode.
2. Kliknij ikonę Findera na Docku.
3. Kliknij folder Downoloads.
4. Przeciągnij plik binarny kontenera do folderu Downloads i upuść go w folderze głównym projektu Xcode.

5. Łączenie Menedżera tagów Google z aplikacją

1. W Xcode otwórz plik AppDelegate.swift.
2. Poproś, aby klasa AppDelegate rozszerzyła klasę TAGContainerOpenerNotifier:

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

   Po rozszerzeniu zajęć pojawi się błąd Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'. Aby naprawić ten błąd, wykonaj te czynności.

3. Dodaj tę funkcję u dołu definicji klasy AppDelegate:

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

4. W funkcji application dodaj ten kod przed instrukcją 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. Śledzenie zdarzenia otwarcia ekranu

Aby śledzić zdarzenie otwarcia ekranu:

1. Utwórz zmienną do przechowywania identyfikatora śledzenia.
2. Utwórz zmienną warstwy danych o nazwie screenName.
3. Utwórz tag Menedżera tagów Google o nazwie Wyświetlenie ekranu.
4. Dodaj kod śledzenia ekranu.

a. Tworzenie zmiennej do przechowywania identyfikatora śledzenia

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. Na pasku nawigacyjnym po lewej stronie kliknij Zmienne.
4. W sekcji Zmienne zdefiniowane przez użytkownika kliknij Nowa.
5. Kliknij Zmienna bez nazwy, by wpisać nazwę zmiennej Identyfikator śledzenia.
6. Jako typ zmiennej wybierz Stała.
7. Wpisz identyfikator śledzenia (w formacie UA-XXXXXXXX-X, gdzie X to cyfra) jako wartość zmiennej.
   Użyj uprawnienia UA-47605289-5 (do usunięcia).
8. Kliknij Utwórz zmienną.

b. Tworzenie zmiennej warstwy danych o nazwie screenName

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. Na pasku nawigacyjnym po lewej stronie kliknij Zmienne.
4. W sekcji Zmienne zdefiniowane przez użytkownika kliknij Nowa.
5. Kliknij Zmienna bez nazwy, aby wpisać tytuł Nazwa ekranu.
6. Jako typ zmiennej wybierz Zmienna warstwy danych.
7. W polu Nazwa zmiennej warstwy danych wpisz screenName.
8. Kliknij Ustaw wartość domyślną.
9. Wpisz wartość domyślną unknown screen (Nieznany ekran).
10. Kliknij Utwórz zmienną.

c. Tworzenie tagu Menedżera tagów Google o nazwie Wyświetlenie ekranu

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. Na pasku nawigacyjnym po lewej stronie kliknij Tagi.
4. Kliknij Nowa.
5. Kliknij Tag bez nazwy, aby wpisać nazwę tagu Wyświetlenie ekranu.
6. Wybierz usługę Google Analytics.
7. Na liście kliknij Identyfikator śledzenia.
8. Jako Typ śledzenia wybierz Widok aplikacji.
9. Kliknij Więcej ustawień.
10. Kliknij Pola do ustawienia.
11. Kliknij + Dodaj pole.
12. Wybierz nazwę pola screenName i jego wartość Screen Name (Nazwa ekranu).
13. Kliknij Dalej.
14. W sekcji Warunki uruchamiania wybierz Dowolne zdarzenie.
15. Kliknij Utwórz tag.

Zobacz zrzut ekranu przedstawiający tworzenie tagu Menedżera tagów Google Wyświetlenie ekranu.

d. Dodaj kod śledzenia ekranu

1. Otwórz plik ViewController.swift w Xcode.
2. Zdefiniuj zmienną o nazwie dataLayer w klasie ViewController:

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

3. W funkcji viewDidLoad() przekaż zdarzenie OpenScreen do warstwy danych:

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

Definicja klasy ViewController wygląda tak:

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. Zdarzenie naciśnięcia przycisku śledzenia

Aby śledzić zdarzenie naciśnięcia przycisku:

1. Utwórz zmienną warstwy danych o nazwie eventAction.
2. Utwórz niestandardową zmienną zdarzenia o nazwie Zdarzenie.
3. Utwórz tag Menedżera tagów Google o nazwie Przycisk naciśnięty.
4. Utwórz przycisk i dodaj kod śledzący jego naciśnięcie.

a. Tworzenie zmiennej warstwy danych o nazwie eventAction

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. Na pasku nawigacyjnym po lewej stronie kliknij Zmienne.
4. W sekcji Zmienne zdefiniowane przez użytkownika kliknij Nowa.
5. Kliknij Zmienna bez nazwy, by wpisać tytuł Akcja zdarzenia.
6. Jako typ zmiennej wybierz Zmienna warstwy danych.
7. W polu Nazwa zmiennej warstwy danych wpisz eventAction.
8. Kliknij Ustaw wartość domyślną.
9. Wpisz wartość domyślną nieznane zdarzenie.
10. Kliknij Utwórz zmienną.

b. Tworzenie niestandardowej zmiennej zdarzenia o nazwie Zdarzenie

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. Na pasku nawigacyjnym po lewej stronie kliknij Zmienne.
4. W sekcji Zmienne zdefiniowane przez użytkownika kliknij Nowa.
5. Kliknij Zmienna bez nazwy, by wpisać nazwę zmiennej Zdarzenie.
6. Jako typ zmiennej wybierz Zdarzenie niestandardowe.
7. Kliknij Utwórz zmienną.

c. Tworzenie tagu Menedżera tagów Google o nazwie „Przycisk naciśnięty”

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. Na pasku nawigacyjnym po lewej stronie kliknij Tagi.
4. Kliknij Nowa.
5. Kliknij Tag bez nazwy, aby wpisać nazwę tagu Przycisk naciśnięty.
6. Wybierz usługę Google Analytics.
7. Na liście kliknij Identyfikator śledzenia.
8. Jako Typ śledzenia wybierz Zdarzenie.
9. Wybierz kategorię Zdarzenie.
10. Wybierz Akcja zdarzenia.
11. Kliknij Dalej.
12. W sekcji Warunki uruchamiania wybierz Dowolne zdarzenie.
13. Kliknij Utwórz tag.

Zobacz zrzut ekranu przedstawiający tworzenie tagu Menedżera tagów Google ButtonPressed.

d. Utwórz przycisk i dodaj kod do śledzenia naciśnięcia przycisku.

1. Otwórz projekt Xcode.
2. Otwórz pokój Main.storyboard.
3. Kliknij prawy górny przycisk na pasku narzędzi Xcode, aby otworzyć obszar narzędziowy (prawy pasek boczny).
4. U dołu obszaru użytkowego
   

   kliknij przycisk Pokaż bibliotekę obiektów (niebieski przycisk):

   
5. W polu wyszukiwania wpisz button.
   
6. Przeciągnij przycisk Button na scenorys i upuść go w lewym górnym rogu.
   
7. Kliknij przycisk edytora Asystenta na pasku narzędzi Xcode.
8. Przytrzymując klawisz Ctrl, przeciągnij przycisk i upuść go na dole definicji klasy ViewController.
   
9. W oknie wybierz Action (Działanie), wpisz nazwę funkcji buttonPressed i kliknij Connect (Połącz).
   

   Spowoduje to dodanie tej funkcji na końcu definicji klasy ViewController:

   @IBAction func buttonPressed(sender: AnyObject) {
   }
   

   Funkcja jest wykonywana po każdym naciśnięciu przycisku.

10. W funkcji buttonPressed dodaj ten kod, aby przekazać zdarzenie ButtonPressed do warstwy dnia:

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

8. Tworzenie i uruchamianie aplikacji

W Xcode kliknij Product > Run (Produkt > Uruchom). Xcode skompiluje i uruchomi aplikację: