Guia para iniciantes para Swift

Este guia descreve como criar e implementar um aplicativo iOS em Swift para acompanhar eventos de abertura da tela e de botão pressionado com a tag do Google de vendas (GTM, na sigla em inglês).

1. Criar um novo projeto

  1. Abra o Xcode. crie um
  2. Clique em Criar um novo projeto do Xcode.
  3. Selecione Aplicativo de visualização única. selecionar aplicativo de visualização única
  4. Clique em Próxima.
  5. Dê um nome ao projeto e escolha outras opções para ele. O nome do seu projeto e app será igual ao nome do produto.
    Insira o nome do produto e outras opções
  6. Clique em Próxima.
  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 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 comando a seguir para fazer o download e instalar o Gerenciador de tags do Google (GTM) dependências ao seu projeto: 
    $ pod install

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

3. Adicionar um cabeçalho de 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 Próxima.
  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 às 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 por ponte.
    Ponte de pesquisa
  4. Na coluna direita da linha que contém Objective-C Bridging Header, digite BridgingHeader.h.
    Adicionar BridgingHeader.h como o cabeçalho de transmissão do Objective-C

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

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

  1. Faça login na sua 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 > Fazer o download no contêiner selecionado para a versão anterior.
    5. O nome do arquivo baixado é o ID do contêiner, por exemplo, GTM-PT3L9Z.

Para adicionar um binário de contêiner padrão ao 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. para a pasta raiz do projeto Xcode.
  1. No Xcode, abra o arquivo AppDelegate.swift.
  2. Faça com que a classe AppDelegate estenda o Classe TAGContainerOpenerNotifier: 
    import UIKit

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

    Depois de estender a classe, você vai receber Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier' erro. A etapa a seguir corrigirá esse erro.

  3. Adicione a seguinte função na 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 chamada screenName.
  3. Crie uma tag do GTM intitulada Exibição de tela.
  4. Adicione o código de acompanhamento de telas.

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 o nome da variável. ID de acompanhamento.
  6. Escolha Constante como o tipo de variável.
  7. Insira o ID de acompanhamento (no formato 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 chamada 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 título Nome da tela.
  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 um tag do GTM chamado "Exibiçã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 o nome da tag Exibição de tela.
  6. Escolha o produto Google Analytics.
  7. Selecione o 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 Screen Name.
  13. Clique em Continuar.
  14. Em Disparar, selecione Qualquer evento.
  15. Clique em Criar tag.

d. Adicionar o código de acompanhamento de telas

  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 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. Evento pressionado pelo botão "Rastrear"

Para acompanhar um evento de botão pressionado:

  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 chamada Button Pressed.
  4. Crie um botão e adicione um código para rastrear que o botão está pressionado.

a. Criar uma variável de camada de dados chamada 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. Digite o valor padrão, evento desconhecido.
  10. Clique em Criar variável.

b. Crie uma variável de evento personalizada chamada Event

  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 de variável.
  7. Clique em Criar variável.

c. Criar um tag do GTM chamado "Button Pressed"

  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 o nome da tag Botão pressionado.
  6. Escolha o produto Google Analytics.
  7. Selecione o 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, selecione Qualquer evento.
  13. Clique em Criar tag.

d. Criar um botão e adicionar um código para rastrear que o botão está pressionado

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

    Clique no botão Mostrar a biblioteca de objetos (o botão azul):

    Janela pop-up da biblioteca de objetos
  5. Digite button na caixa de pesquisa.
    botão na biblioteca de objetos
  6. Arraste Button para o storyboard e solte-o na parte superior. no canto superior esquerdo.
    Arraste e solte 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 pressionada a tecla Ctrl, arraste e solte o botão. na parte de baixo da definição da classe ViewController.
    Arraste e solte o botão para a definição da classe ViewController
  9. Na caixa de diálogo, selecione a conexão Ação e insira o nome da função. buttonPressed e clique em Conectar.
    Criar código para processar o evento pressionado por botão

    Isso adiciona a seguinte função ao final 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 código abaixo envie o evento ButtonPressed para a 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 > Executar. O Xcode criará e executará o app:

Captura de tela do app iniciado