Руководство по началу работы со Swift

В этом руководстве описывается, как создать и реализовать приложение iOS на Swift для отслеживания событий открытия экрана и нажатия кнопок с помощью Диспетчера тегов Google (GTM).

1. Создайте новый проект

  1. Откройте Хкод. создать новый проект
  2. Нажмите «Создать новый проект Xcode» .
  3. Выберите Приложение единого просмотра . выберите приложение с одним представлением
  4. Нажмите Далее .
  5. Назовите свой проект и выберите для него дополнительные параметры. Название вашего проекта и имя приложения будут такими же, как название продукта.
    Введите название продукта и другие параметры
  6. Нажмите Далее .
  7. Выберите местоположение проекта (каталог).
  8. Нажмите Создать .

2. Установите зависимости Диспетчера тегов Google.

  1. Закройте Xcode.
  2. В терминале выполните следующую команду для установки Cocoapods :
    $ sudo gem install cocoapods
    
  3. Перейдите в каталог вашего проекта.
  4. Выполните следующую команду, чтобы создать файл с именем Podfile :
    $ pod init
    
  5. В Podfile раскомментируйте use_frameworks! и добавьте pod 'GoogleTagManager' к цели:
  6. # Uncomment this line if you're using Swift
    use_frameworks!
    
    target 'GtmSwiftTutorial' do
      pod 'GoogleTagManager'
    end
    
  7. Выполните следующую команду, чтобы загрузить и установить зависимости Диспетчера тегов Google (GTM) в ваш проект:
    $ pod install
    

    Эта команда также создает рабочее пространство GtmSwiftTutorial.xcworkspace . С этого момента используйте это рабочее пространство для разработки приложения GtmSwiftTutorial .

3. Добавьте заголовок моста для библиотек Objective-C.

Чтобы создать файл заголовка моста :

  1. Откройте Хкод.
  2. Нажмите Файл > Создать > Файл .
  3. В разделе «iOS» > «Источник» выберите «Файл заголовка» .
  4. Нажмите Далее .
  5. Введите имя файла заголовка BridgingHeader.h .
    Создать заголовочный файл моста
  6. Нажмите Создать .
  7. Добавьте эти операторы 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 */
    

Чтобы добавить заголовок моста Objective-C в настройках сборки :

  1. В Xcode щелкните свой проект.
  2. Нажмите «Настройки сборки» в области редактора.
    Нажмите «Настройки сборки».
  3. Выберите «Все» и «Объединено» и найдите мост .
    Поиск мостов
  4. В правом столбце строки, содержащей заголовок моста Objective-C , введите BridgingHeader.h .
    Добавьте BridgingHeader.h в качестве заголовка моста Objective-C.

4. Добавьте в свой проект контейнер по умолчанию.

Прежде чем добавлять в проект контейнер по умолчанию, загрузите двоичный файл мобильного контейнера:

  1. Войдите в свою учетную запись Диспетчера тегов Google .
  2. Выберите мобильный контейнер.
  3. Нажмите «Версии» в строке меню.
  4. Нажмите Действия > Загрузить в выбранной версии контейнера.
  5. Имя скачанного файла — это идентификатор контейнера, например, GTM-PT3L9Z .

Чтобы добавить в проект двоичный файл контейнера по умолчанию:

  1. Откройте Хкод.
  2. Нажмите значок Finder в Dock.
  3. Щелкните папку Downoloads .
  4. Перетащите двоичный файл контейнера в папку Downloads и поместите его в корневую папку вашего проекта Xcode.
  1. В Xcode откройте файл AppDelegate.swift .
  2. Пусть класс AppDelegate расширит класс TAGContainerOpenerNotifier :
    import UIKit
    
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier {
      // ...
    }
    

    После расширения класса вы получите ошибку Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier' . Следующий шаг исправит эту ошибку.

  3. Добавьте следующую функцию в конец определения класса AppDelegate :
    func containerAvailable(container: TAGContainer!) {
      container.refresh()
    }
    
  4. В функции application добавьте следующий код перед оператором 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. Отслеживать событие открытия экрана

Чтобы отслеживать событие открытия экрана:

  1. Создайте переменную для хранения идентификатора отслеживания.
  2. Создайте переменную уровня данных с именем screenName .
  3. Создайте тег GTM под названием «Просмотр экрана» .
  4. Добавьте код отслеживания экрана.

а. Создайте переменную для хранения идентификатора отслеживания.

  1. Войдите в свою учетную запись Диспетчера тегов Google .
  2. Выберите мобильный контейнер.
  3. На левой панели навигации нажмите Переменные .
  4. В разделе «Пользовательские переменные» нажмите «Создать» .
  5. Нажмите «Переменная без названия» , чтобы ввести имя переменной. Идентификатор отслеживания .
  6. Выберите Константу в качестве типа переменной.
  7. Введите идентификатор отслеживания (в формате UA-XXXXXXXX-X , где X — цифра) в качестве значения переменной.
    Используйте UA-47605289-5 (подлежит удалению).
  8. Нажмите Создать переменную .

б. Создайте переменную уровня данных с именем screenName.

  1. Войдите в свою учетную запись Диспетчера тегов Google .
  2. Выберите мобильный контейнер.
  3. На левой панели навигации нажмите Переменные .
  4. В разделе «Пользовательские переменные» нажмите «Создать» .
  5. Нажмите «Переменная без названия» , чтобы ввести название экрана .
  6. Выберите «Переменная уровня данных» в качестве типа переменной.
  7. Введите screenName в качестве имени переменной уровня данных .
  8. Нажмите «Установить значение по умолчанию» .
  9. Введите значение по умолчанию, неизвестный экран .
  10. Нажмите Создать переменную .

в. Создайте тег GTM под названием «Просмотр экрана».

  1. Войдите в свою учетную запись Диспетчера тегов Google .
  2. Выберите мобильный контейнер.
  3. На левой панели навигации нажмите Теги .
  4. Нажмите Создать .
  5. Нажмите «Тег без названия» , чтобы ввести имя тега « Просмотр экрана» .
  6. Выберите продукт Google Analytics .
  7. Выберите идентификатор отслеживания из списка.
  8. Выберите «Просмотр приложения» в качестве типа отслеживания .
  9. Нажмите Дополнительные настройки .
  10. Нажмите «Поля для установки» .
  11. Нажмите + Добавить поле .
  12. Выберите имя поля screenName и его значение Screen Name .
  13. Нажмите Продолжить .
  14. В разделе «Включение огня» выберите «Любое событие» .
  15. Нажмите «Создать тег» .

д. Добавить код отслеживания экрана

  1. Откройте файл ViewController.swift в Xcode.
  2. Определите переменную с именем dataLayer внутри класса ViewController :
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
    
  3. В функции viewDidLoad() передайте событие OpenScreen на уровень данных:
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
    

Определение класса ViewController выглядит следующим образом:

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. Отслеживание нажатия кнопки

Чтобы отслеживать событие нажатия кнопки:

  1. Создайте переменную уровня данных с именем eventAction .
  2. Создайте пользовательскую переменную события с именем Event .
  3. Создайте тег GTM под названием «Нажата кнопка» .
  4. Создайте кнопку и добавьте код для отслеживания нажатия кнопки.

а. Создайте переменную уровня данных с именем eventAction.

  1. Войдите в свою учетную запись Диспетчера тегов Google .
  2. Выберите мобильный контейнер.
  3. На левой панели навигации нажмите Переменные .
  4. В разделе «Пользовательские переменные» нажмите «Создать» .
  5. Нажмите «Переменная без названия» , чтобы ввести заголовок «Действие события» .
  6. Выберите «Переменная уровня данных» в качестве типа переменной.
  7. Введите eventAction в качестве имени переменной уровня данных .
  8. Нажмите «Установить значение по умолчанию» .
  9. Введите значение по умолчанию неизвестное событие .
  10. Нажмите Создать переменную .

б. Создайте пользовательскую переменную события с именем Event.

  1. Войдите в свою учетную запись Диспетчера тегов Google .
  2. Выберите мобильный контейнер.
  3. На левой панели навигации нажмите Переменные .
  4. В разделе «Пользовательские переменные» нажмите «Создать» .
  5. Нажмите «Переменная без названия» , чтобы ввести имя переменной « Событие ».
  6. Выберите Пользовательское событие в качестве типа переменной.
  7. Нажмите Создать переменную .

в. Создайте тег GTM под названием «Кнопка нажата».

  1. Войдите в свою учетную запись Диспетчера тегов Google .
  2. Выберите мобильный контейнер.
  3. На левой панели навигации нажмите Теги .
  4. Нажмите Создать .
  5. Нажмите «Тег без названия» , чтобы ввести имя тега. Кнопка «Нажата» .
  6. Выберите продукт Google Analytics .
  7. Выберите идентификатор отслеживания из списка.
  8. Выберите «Событие» в качестве типа трека .
  9. Выберите категорию мероприятия .
  10. Выберите Действие по событию .
  11. Нажмите Продолжить .
  12. В разделе «Включение огня» выберите «Любое событие» .
  13. Нажмите «Создать тег» .

д. Создайте кнопку и добавьте код для отслеживания нажатия кнопки.

  1. Откройте проект Xcode.
  2. Откройте Main.storyboard .
  3. Нажмите самую верхнюю правую кнопку на панели инструментов Xcode, чтобы открыть область утилит (правая боковая панель). Раскадровка и подсобное помещение
  4. В нижней части подсобного помещения,
    синяя кнопка, чтобы открыть библиотеку объектов

    нажмите кнопку «Показать библиотеку объектов» (синяя кнопка):

    Всплывающее окно библиотеки объектов
  5. Кнопка «Ввести» в поле поиска.
    кнопка в библиотеке объектов
  6. Перетащите кнопку на раскадровку и поместите ее в верхний левый угол.
    Перетащите кнопку на раскадровку
  7. Нажмите кнопку помощника редактора Кнопка помощника редактора на панели инструментов Xcode.
  8. Удерживая клавишу Ctrl , перетащите кнопку в нижнюю часть определения класса ViewController .
    Перетащите кнопку в определение класса ViewController.
  9. В диалоговом окне выберите «Действие соединения», введите имя функции buttonPressed и нажмите « Подключиться» .
    Создайте код для обработки события нажатия кнопки.

    Это добавляет следующую функцию в конец определения класса ViewController :

    @IBAction func buttonPressed(sender: AnyObject) {
    }
    

    Функция выполняется при каждом нажатии кнопки.

  10. В функции buttonPressed добавьте следующий код, чтобы передать событие ButtonPressed на слой дня:
    @IBAction func buttonPressed(sender: AnyObject) {
      dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
    }
    

8. Создайте и запустите свое приложение

В Xcode нажмите «Продукт» > «Выполнить» . Xcode создаст и запустит приложение:

Скриншот запущенного приложения