Swift – przewodnik dla początkujących

Z tego przewodnika dowiesz się, jak utworzyć i wdrożyć aplikację na iOS w Swift, aby śledzić zdarzenia otwarcia ekranu i wcisnięcia przycisku za pomocą Menedżera tagów Google (GTM).

1. Utwórz nowy projekt

1. Otwórz Xcode.
2. Kliknij Utwórz nowy projekt Xcode.
3. Wybierz Single View Application (Aplikacja z widokiem pojedynczym).
4. Kliknij Dalej.
5. Nadaj projektowi nazwę i wybierz dodatkowe opcje. Nazwa projektu i nazwa aplikacji będą takie same jak nazwa usługi.
   
6. Kliknij Dalej.
7. Wybierz lokalizację (katalog) projektu.
8. Kliknij Utwórz.

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

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

   $ sudo gem install cocoapods
   

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

   $ pod init
   

5. W pliku Podfile usuń komentarz z wiersza use_frameworks! i dodaj do celu wiersz pod 'GoogleTagManager':

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

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end

6. Aby pobrać i zainstalować w projekcie zależności Menedżera tagów Google (GTM), uruchom podane niżej polecenie:

   $ pod install
   

   To polecenie tworzy też obszar roboczy GtmSwiftTutorial.xcworkspace. Od teraz możesz korzystać z tego obszaru roboczego do tworzenia aplikacji GtmSwiftTutorial.

3. Dodawanie nagłówka pośredniczącego w przypadku bibliotek Objective-C

Aby utworzyć plik nagłówka pośredniczącego:

1. Otwórz Xcode.
2. Kliknij Plik > Nowy > Plik.
3. W sekcji iOS > Źródło kliknij 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. W Xcode kliknij projekt.
2. W obszarze edycji kliknij Ustawienia kompilacji.
   
3. Wybierz Wszystkie i Połączone, a następnie wyszukaj łączenie.
   
4. W prawej kolumnie wiersza zawierającego Objective-C Bridging Header wpisz BridgingHeader.h.
   

4. Dodawanie do projektu domyślnego kontenera

Zanim dodasz do projektu domyślny kontener, pobierz binarne pliki kontenera mobilnego:

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

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

1. Otwórz Xcode.
2. W Docku kliknij ikonę Finder.
3. Kliknij folder Downoloads.
4. Przeciągnij plik binarny kontenera z folderu Downloads i upuść go do folderu głównego projektu Xcode.

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

1. W Xcode otwórz plik AppDelegate.swift.
2. Zrób tak, aby zajęcia AppDelegate rozszerzały zajęcia TAGContainerOpenerNotifier:

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

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

3. Dodaj tę funkcję na dole 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. Śledź zdarzenie 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. Utwórz zmienną do przechowywania identyfikatora śledzenia

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. W panelu 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. Jako wartość zmiennej wpisz identyfikator śledzenia (w formie UA-XXXXXXXX-X, gdzie X to cyfra).
   Użyj elementu UA-47605289-5 (ma zostać usunięty).
8. Kliknij Utwórz zmienną.

b. Utwórz zmienną warstwy danych o nazwie screenName.

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. W panelu 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.
10. Kliknij Utwórz zmienną.

c. Utwórz tag GTM o nazwie Wyświetlanie na ekranie.

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 tytułu, aby wpisać nazwę tagu. Widok ekranu.
6. Wybierz usługę Google Analytics.
7. Z listy wybierz 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ść Nazwa ekranu.
13. Kliknij Dalej.
14. W sekcji Warunki uruchamiania wybierz Dowolne zdarzenie.
15. Kliknij Utwórz tag.

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

d. Dodawanie kodu ś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. Śledź zdarzenie naciśnięcia przycisku

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

1. Utwórz zmienną warstwy danych o nazwie eventAction.
2. Utwórz zmienną zdarzenia niestandardowego o nazwie Zdarzenie.
3. Utwórz tag GTM o nazwie Przycisk został naciśnięty.
4. Utwórz przycisk i dodaj kod, który będzie śledzić jego naciśnięcie.

a. Utwórz zmienną warstwy danych o nazwie eventAction

1. Zaloguj się na konto Menedżera tagów Google.
2. Wybierz kontener mobilny.
3. W panelu 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. Utwórz zmienną zdarzenia niestandardowego o nazwie „Zdarzenie”

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

c. Utwórz tag GTM o nazwie Button Pressed (Kliknięcie przycisku).

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 tytułu, aby wpisać nazwę tagu Przycisk został naciśnięty.
6. Wybierz usługę Google Analytics.
7. Z listy wybierz 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.

Zrzut ekranu pokazujący tworzenie tagu GTM Button Pressed

d. Utwórz przycisk i dodaj kod, aby śledzić, czy został on kliknięty

1. Otwórz projekt Xcode.
2. Otwórz pokój Main.storyboard.
3. Kliknij przycisk w prawym górnym rogu paska narzędzi Xcode, aby otworzyć obszar narzędzi (pasek boczny po prawej stronie).
4. U dołu obszaru narzędzi:
   

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

   
5. W polu wyszukiwania wpisz button.
   
6. Przeciągnij element Przycisk na storyboard i upuść go w lewym górnym rogu.
   
7. Na pasku narzędzi Xcode kliknij przycisk Edytor asystenta.
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 Połącz.
   

   W definicji klasy ViewController zostanie dodana ta funkcja:

   @IBAction func buttonPressed(sender: AnyObject) {
   }
   

   Funkcja jest wykonywana za każdym razem, gdy naciśniesz przycisk.

10. W funkcji buttonPressed dodaj ten kod, aby przesłać 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 Produkt > Uruchom. Xcode skompiluje i uruchomi aplikację: