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
- Otwórz Xcode.
- Kliknij Create a new Xcode project (Utwórz nowy projekt Xcode).
- Wybierz Single View Application (Aplikacja pojedynczego widoku).
- Kliknij Dalej.
- Nazwij projekt i wybierz dla niego dodatkowe opcje. Nazwa projektu i aplikacji będzie taka sama jak nazwa usługi.
- Kliknij Dalej.
- Wybierz lokalizację projektu (katalog).
- Kliknij Utwórz.
2. Instalowanie zależności Menedżera tagów Google
- Zamknij Xcode.
- Aby zainstalować w terminalu Cocoapods, uruchom to polecenie:
$ sudo gem install cocoapods
- Przejdź do katalogu projektu.
- Uruchom to polecenie, aby utworzyć plik o nazwie
Podfile
:$ pod init
- W
Podfile
usuń znacznik komentarza z elementuuse_frameworks!
i dodajpod 'GoogleTagManager'
do celu: - 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 aplikacjiGtmSwiftTutorial
.
# Uncomment this line if you're using Swift use_frameworks! target 'GtmSwiftTutorial' do pod 'GoogleTagManager' end
3. Dodaj nagłówek łączący dla bibliotek Objective-C
Aby utworzyć plik nagłówka połączeń:
- Otwórz Xcode.
- Kliknij Plik > Nowy > Plik.
- W sekcji iOS > Źródło wybierz Plik nagłówka.
- Kliknij Dalej.
- Wpisz nazwę pliku nagłówka
BridgingHeader.h
.
- Kliknij Utwórz.
- 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:
- Kliknij projekt w Xcode.
- W obszarze edytora kliknij Ustawienia kompilacji.
- Kliknij Wszystkie i Połączone, a potem wyszukaj połączenia.
- 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:
- Zaloguj się na konto Menedżera tagów Google.
- Wybierz kontener mobilny.
- Kliknij Wersje na pasku menu.
- Kliknij Działania > Pobierz przy wybranej wersji kontenera.
GTM-PT3L9Z
.
Aby dodać domyślny plik binarny kontenera do projektu:
- Otwórz Xcode.
- Kliknij ikonę Findera na Docku.
- Kliknij folder
Downoloads
. - 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ą
- W Xcode otwórz plik
AppDelegate.swift
. - 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. - Dodaj tę funkcję u dołu definicji klasy
AppDelegate
:func containerAvailable(container: TAGContainer!) { container.refresh() }
- 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:
- Utwórz zmienną do przechowywania identyfikatora śledzenia.
- Utwórz zmienną warstwy danych o nazwie screenName.
- Utwórz tag Menedżera tagów Google o nazwie Wyświetlenie ekranu.
- Dodaj kod śledzenia ekranu.
a. Tworzenie zmiennej do przechowywania identyfikatora śledzenia
- Zaloguj się na konto Menedżera tagów Google.
- Wybierz kontener mobilny.
- Na pasku nawigacyjnym po lewej stronie kliknij Zmienne.
- W sekcji Zmienne zdefiniowane przez użytkownika kliknij Nowa.
- Kliknij Zmienna bez nazwy, by wpisać nazwę zmiennej Identyfikator śledzenia.
- Jako typ zmiennej wybierz Stała.
- Wpisz identyfikator śledzenia (w formacie
UA-XXXXXXXX-X
, gdzieX
to cyfra) jako wartość zmiennej.Użyj uprawnieniaUA-47605289-5
(do usunięcia). - Kliknij Utwórz zmienną.
b. Tworzenie zmiennej warstwy danych o nazwie screenName
- Zaloguj się na konto Menedżera tagów Google.
- Wybierz kontener mobilny.
- Na pasku nawigacyjnym po lewej stronie kliknij Zmienne.
- W sekcji Zmienne zdefiniowane przez użytkownika kliknij Nowa.
- Kliknij Zmienna bez nazwy, aby wpisać tytuł Nazwa ekranu.
- Jako typ zmiennej wybierz Zmienna warstwy danych.
- W polu Nazwa zmiennej warstwy danych wpisz screenName.
- Kliknij Ustaw wartość domyślną.
- Wpisz wartość domyślną unknown screen (Nieznany ekran).
- Kliknij Utwórz zmienną.
c. Tworzenie tagu Menedżera tagów Google o nazwie Wyświetlenie ekranu
- Zaloguj się na konto Menedżera tagów Google.
- Wybierz kontener mobilny.
- Na pasku nawigacyjnym po lewej stronie kliknij Tagi.
- Kliknij Nowa.
- Kliknij Tag bez nazwy, aby wpisać nazwę tagu Wyświetlenie ekranu.
- Wybierz usługę Google Analytics.
- Na liście kliknij Identyfikator śledzenia.
- Jako Typ śledzenia wybierz Widok aplikacji.
- Kliknij Więcej ustawień.
- Kliknij Pola do ustawienia.
- Kliknij + Dodaj pole.
- Wybierz nazwę pola screenName i jego wartość Screen Name (Nazwa ekranu).
- Kliknij Dalej.
- W sekcji Warunki uruchamiania wybierz Dowolne zdarzenie.
- Kliknij Utwórz tag.
d. Dodaj kod śledzenia ekranu
- Otwórz plik
ViewController.swift
w Xcode. - Zdefiniuj zmienną o nazwie
dataLayer
w klasieViewController
:var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
- W funkcji
viewDidLoad()
przekaż zdarzenieOpenScreen
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:
- Utwórz zmienną warstwy danych o nazwie eventAction.
- Utwórz niestandardową zmienną zdarzenia o nazwie Zdarzenie.
- Utwórz tag Menedżera tagów Google o nazwie Przycisk naciśnięty.
- Utwórz przycisk i dodaj kod śledzący jego naciśnięcie.
a. Tworzenie zmiennej warstwy danych o nazwie eventAction
- Zaloguj się na konto Menedżera tagów Google.
- Wybierz kontener mobilny.
- Na pasku nawigacyjnym po lewej stronie kliknij Zmienne.
- W sekcji Zmienne zdefiniowane przez użytkownika kliknij Nowa.
- Kliknij Zmienna bez nazwy, by wpisać tytuł Akcja zdarzenia.
- Jako typ zmiennej wybierz Zmienna warstwy danych.
- W polu Nazwa zmiennej warstwy danych wpisz eventAction.
- Kliknij Ustaw wartość domyślną.
- Wpisz wartość domyślną nieznane zdarzenie.
- Kliknij Utwórz zmienną.
b. Tworzenie niestandardowej zmiennej zdarzenia o nazwie Zdarzenie
- Zaloguj się na konto Menedżera tagów Google.
- Wybierz kontener mobilny.
- Na pasku nawigacyjnym po lewej stronie kliknij Zmienne.
- W sekcji Zmienne zdefiniowane przez użytkownika kliknij Nowa.
- Kliknij Zmienna bez nazwy, by wpisać nazwę zmiennej Zdarzenie.
- Jako typ zmiennej wybierz Zdarzenie niestandardowe.
- Kliknij Utwórz zmienną.
c. Tworzenie tagu Menedżera tagów Google o nazwie „Przycisk naciśnięty”
- Zaloguj się na konto Menedżera tagów Google.
- Wybierz kontener mobilny.
- Na pasku nawigacyjnym po lewej stronie kliknij Tagi.
- Kliknij Nowa.
- Kliknij Tag bez nazwy, aby wpisać nazwę tagu Przycisk naciśnięty.
- Wybierz usługę Google Analytics.
- Na liście kliknij Identyfikator śledzenia.
- Jako Typ śledzenia wybierz Zdarzenie.
- Wybierz kategorię Zdarzenie.
- Wybierz Akcja zdarzenia.
- Kliknij Dalej.
- W sekcji Warunki uruchamiania wybierz Dowolne zdarzenie.
- Kliknij Utwórz tag.
d. Utwórz przycisk i dodaj kod do śledzenia naciśnięcia przycisku.
- Otwórz projekt Xcode.
- Otwórz pokój
Main.storyboard
. - Kliknij prawy górny przycisk na pasku narzędzi Xcode, aby otworzyć obszar narzędziowy (prawy pasek boczny).
- U dołu obszaru użytkowego
kliknij przycisk Pokaż bibliotekę obiektów (niebieski przycisk):
- W polu wyszukiwania wpisz button.
- Przeciągnij przycisk Button na scenorys i upuść go w lewym górnym rogu.
- Kliknij przycisk edytora Asystenta na pasku narzędzi Xcode.
- Przytrzymując klawisz Ctrl, przeciągnij przycisk i upuść go na dole definicji klasy
ViewController
.
- 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.
- W funkcji
buttonPressed
dodaj ten kod, aby przekazać zdarzenieButtonPressed
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ę: