Guia para iniciantes para Swift

Neste guia, descrevemos como criar e implementar um app iOS no Swift para acompanhar os eventos de abertura da tela e pressionamento de botão com o Gerenciador de tags do Google (GTM).

1. Criar um novo projeto

  1. Abra o Xcode. criar um novo projeto
  2. Clique em Criar um novo projeto do Xcode.
  3. Selecione Single View Application. selecionar aplicativo de visualização única
  4. Clique em Next.
  5. Dê um nome ao projeto e escolha opções adicionais. O nome do projeto e do app serão iguais aos do produto.
    Insira o nome do produto e outras opções
  6. Clique em Next.
  7. Selecione o local do projeto (diretório).
  8. Clique em Criar.

2. Instalar as dependências do Gerenciador de tags do Google

  1. Saia do Xcode.
  2. Em um terminal, execute o seguinte comando para instalar o Cocoapods:
    $ sudo gem install cocoapods
  3. Mude para o diretório do seu projeto.
  4. Execute este comando para criar um arquivo chamado Podfile: 
    $ pod init
  5. Em Podfile, remova a marca de comentário de use_frameworks! e adicione pod 'GoogleTagManager' ao destino:
    6. # Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end
  6. Execute o seguinte comando para fazer o download e instalar as dependências do Gerenciador de tags do Google (GTM) no seu projeto: 
    $ pod install

    Esse comando também cria o espaço de trabalho GtmSwiftTutorial.xcworkspace. A partir de agora, use este espaço de trabalho para desenvolver o app GtmSwiftTutorial.

3. Adicionar um cabeçalho ponte para bibliotecas Objective-C

Para criar um arquivo de cabeçalho de ponte:

  1. Abra o Xcode.
  2. Clique em Arquivo > Novo > Arquivo.
  3. Em iOS > Source, selecione Header File.
  4. Clique em Next.
  5. Digite o nome do arquivo principal BridgingHeader.h.
    Criar um arquivo de cabeçalho de ponte
  6. Clique em Criar.
  7. Adicione estas instruções import ao arquivo principal: 
    #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 */

Para adicionar o cabeçalho de ponte do Objective-C nas configurações de build:

  1. No Xcode, clique no seu projeto.
  2. Clique em Build Settings na área do editor.
    Clique em &quot;Build Settings&quot;
  3. Selecione Todos e Combinados e pesquise pontuação.
    Ponte da pesquisa
  4. Na coluna à direita da linha que contém o Cabeçalho de ponte do Objective-C, insira BridgingHeader.h.
    Adição de BridgingHeader.h como o cabeçalho de ponte do Objective-C

4. Adicionar um contêiner padrão ao seu projeto

Antes de adicionar um contêiner padrão ao seu projeto, faça o download de um binário de contêiner para dispositivos móveis:

  1. Faça login na sua conta do Gerenciador de tags do Google.
  2. Selecione um contêiner para dispositivos móveis.
  3. Clique em Versões na barra de menus.
  4. Clique em Ações > Download na versão do contêiner selecionada.
    5. O nome do arquivo salvo é o ID do contêiner, por exemplo, GTM-PT3L9Z.

Para adicionar um binário de contêiner padrão ao seu projeto:

  1. Abra o Xcode.
  2. Clique no ícone do Finder no Dock.
  3. Clique na pasta Downoloads.
  4. Arraste o arquivo binário do contêiner na pasta Downloads e solte-o na pasta raiz do projeto Xcode.
  1. No Xcode, abra o arquivo AppDelegate.swift.
  2. Faça com que a classe AppDelegate estenda a classe TAGContainerOpenerNotifier: 
    import UIKit

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

    Depois de estender a classe, você receberá o erro Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'. Siga estas etapas para corrigir esse erro.

  3. Adicione a seguinte função à parte de baixo da definição da classe AppDelegate: 
    func containerAvailable(container: TAGContainer!) {
  container.refresh()
}
  4. Na função application, adicione o seguinte código antes da instrução 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. Rastrear evento de abertura da tela

Para acompanhar um evento de abertura de tela:

  1. Crie uma variável para armazenar o ID de acompanhamento.
  2. Crie uma variável de camada de dados com o nome screenName.
  3. Crie uma tag do GTM com o nome Screen View.
  4. Adicione o código de acompanhamento de tela.

a. Crie uma variável para armazenar o ID de acompanhamento

  1. Faça login na sua conta do Gerenciador de tags do Google.
  2. Selecione um contêiner para dispositivos móveis.
  3. Na barra de navegação à esquerda, clique em Variáveis.
  4. Em Variáveis definidas pelo usuário, clique em Nova.
  5. Clique em Variável sem título para inserir ID de acompanhamento como o nome da variável.
  6. Escolha Constante como o tipo da variável.
  7. Insira o ID de acompanhamento (na forma de UA-XXXXXXXX-X, em que X é um dígito) como o valor da variável.
    Use UA-47605289-5 (a ser excluído).
  8. Clique em Criar variável.

b. Criar uma variável de camada de dados com o nome screenName

  1. Faça login na sua conta do Gerenciador de tags do Google.
  2. Selecione um contêiner para dispositivos móveis.
  3. Na barra de navegação à esquerda, clique em Variáveis.
  4. Em Variáveis definidas pelo usuário, clique em Nova.
  5. Clique em Variável sem título para inserir o Nome da tela como título.
  6. Selecione Variável da camada de dados como o tipo.
  7. Insira screenName como o Nome da variável da camada de dados.
  8. Clique em Definir valor padrão.
  9. Digite o valor padrão Tela desconhecida.
  10. Clique em Criar variável.

c. Criar uma tag do GTM intitulada "Visualização de tela"

  1. Faça login na sua conta do Gerenciador de tags do Google.
  2. Selecione um contêiner para dispositivos móveis.
  3. Na barra de navegação à esquerda, clique em Tags.
  4. Clique em Novo.
  5. Clique em Tag sem título para inserir Visualização de tela como o nome.
  6. Escolha o produto Google Analytics.
  7. Selecione ID de acompanhamento na lista.
  8. Selecione Visualização do aplicativo como o Tipo de acompanhamento.
  9. Clique em Mais configurações.
  10. Clique em Campos a serem definidos.
  11. Clique em + Adicionar campo.
  12. Selecione o nome do campo screenName e o valor dele Screen Name.
  13. Clique em Continuar.
  14. Em Disparar em, selecione Qualquer evento.
  15. Clique em Criar tag.

d. Adicionar o código de acompanhamento de tela

  1. Abra o arquivo ViewController.swift no Xcode.
  2. Defina uma variável com o nome dataLayer dentro da classe ViewController: 
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
  3. Na função viewDidLoad(), envie o evento OpenScreen para a camada de dados:
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])

A definição da classe ViewController é semelhante a esta:

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. Rastrear evento pressionado

Para rastrear um evento de pressionamento de botão:

  1. Crie uma variável de camada de dados chamada eventAction.
  2. Crie uma variável de evento personalizada chamada Evento.
  3. Crie uma tag do GTM intitulada Botão pressionado.
  4. Crie um botão e adicione um código para saber se o botão foi pressionado.

a. Criar uma variável de camada de dados com o nome eventAction

  1. Faça login na sua conta do Gerenciador de tags do Google.
  2. Selecione um contêiner para dispositivos móveis.
  3. Na barra de navegação à esquerda, clique em Variáveis.
  4. Em Variáveis definidas pelo usuário, clique em Nova.
  5. Clique em Variável sem título para inserir o título Ação do evento.
  6. Selecione Variável da camada de dados como o tipo.
  7. Insira eventAction como o nome da variável da camada de dados.
  8. Clique em Definir valor padrão.
  9. Informe o valor padrão Evento desconhecido.
  10. Clique em Criar variável.

b. Crie uma variável de evento personalizada chamada "Evento"

  1. Faça login na sua conta do Gerenciador de tags do Google.
  2. Selecione um contêiner para dispositivos móveis.
  3. Na barra de navegação à esquerda, clique em Variáveis.
  4. Em Variáveis definidas pelo usuário, clique em Nova.
  5. Clique em Variável sem título para inserir Evento como o nome.
  6. Escolha Evento personalizado como o tipo da variável.
  7. Clique em Criar variável.

c. Crie uma tag do GTM intitulada "Botão pressionado"

  1. Faça login na sua conta do Gerenciador de tags do Google.
  2. Selecione um contêiner para dispositivos móveis.
  3. Na barra de navegação à esquerda, clique em Tags.
  4. Clique em Novo.
  5. Clique em Tag sem título para inserir Botão pressionado como o nome.
  6. Escolha o produto Google Analytics.
  7. Selecione ID de acompanhamento na lista.
  8. Selecione Evento como o Tipo de acompanhamento.
  9. Selecione a categoria Evento.
  10. Selecione Ação do evento.
  11. Clique em Continuar.
  12. Em Disparar em, selecione Qualquer evento.
  13. Clique em Criar tag.

d. Crie um botão e adicione um código para saber se ele foi pressionado

  1. Abra seu projeto do Xcode.
  2. Abra o Main.storyboard.
  3. Clique no botão no canto superior direito da barra de ferramentas do Xcode para abrir a área de utilitários (barra lateral direita). Storyboard e área de utilidade
  4. Na parte inferior da área de serviços públicos,
    botão azul para abrir a biblioteca de objetos

    Clique no botão Show the Object library (o botão azul):

    Janela pop-up da biblioteca de objetos
  5. Digite o button na caixa de pesquisa.
    botão na biblioteca de objetos
  6. Arraste o Button para o storyboard e solte-o no canto superior esquerdo.
    Arrastar e soltar o botão no storyboard
  7. Clique no botão do editor do assistente Botão do editor do Assistente na barra de ferramentas do Xcode.
  8. Mantenha a tecla Ctrl pressionada, arraste o botão e solte-o na parte de baixo da definição da classe ViewController.
    Arraste e solte o botão na definição da classe ViewController.
  9. Na caixa de diálogo, selecione a conexão Action, insira o nome da função buttonPressed e clique em Connect.
    Crie um código para processar o evento pressionado

    Isso adiciona a seguinte função ao final da definição da classe ViewController:

    @IBAction func buttonPressed(sender: AnyObject) {
}

    A função é executada sempre que o botão é pressionado.

  10. Na função buttonPressed, adicione o seguinte código para enviar o evento ButtonPressed à camada do dia:
    @IBAction func buttonPressed(sender: AnyObject) {
  dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
}

8. Criar e executar o app

No Xcode, clique em Product > Run. O Xcode criará e executará o app:

Captura de tela do app iniciado