Guía de introducción para Swift

En esta guía, se describe cómo crear y, luego, implementar una app para iOS en Swift a fin de hacer un seguimiento de los eventos de apertura de pantalla y de presión de los botones con Google Tag Manager (GTM).

1. Creación de un proyecto nuevo

  1. Abre Xcode. crear un proyecto nuevo
  2. Haz clic en Crear un nuevo proyecto de Xcode.
  3. Selecciona Single View Application. Seleccionar aplicación de vista única
  4. Presiona Siguiente.
  5. Asigna un nombre al proyecto y elige opciones adicionales. El nombre de tu proyecto y de tu app será el mismo que el nombre del producto.
    Ingresa el nombre del producto y otras opciones.
  6. Presiona Siguiente.
  7. Selecciona una ubicación del proyecto (directorio).
  8. Haz clic en Crear.

2. Instala las dependencias de Google Tag Manager

  1. Sal de Xcode.
  2. En una terminal, ejecuta el siguiente comando para instalar Cocoapods: 
    $ sudo gem install cocoapods
  3. Cambia al directorio de tu proyecto.
  4. Ejecuta el siguiente comando para crear un archivo llamado Podfile: 
    $ pod init
  5. En Podfile, quita el comentario de use_frameworks! y agrega pod 'GoogleTagManager' al destino:
    6. # Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end
  6. Ejecuta el siguiente comando para descargar y, luego, instalar las dependencias de Google Tag Manager (GTM) en tu proyecto: 
    $ pod install

    Este comando también crea el espacio de trabajo GtmSwiftTutorial.xcworkspace. A partir de ahora, usa este espacio de trabajo para desarrollar la app de GtmSwiftTutorial.

3. Agrega un encabezado puente para las bibliotecas de Objective-C

Para crear un archivo de encabezado puente, haz lo siguiente:

  1. Abre Xcode.
  2. Haz clic en File > New > File.
  3. En iOS > Fuente, selecciona Archivo de encabezado.
  4. Presiona Siguiente.
  5. Ingresa el nombre del archivo de encabezado BridgingHeader.h.
    Crea un archivo de encabezado puente
  6. Haz clic en Crear.
  7. Agrega estas declaraciones import al archivo de encabezado: 
    #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 agregar un encabezado de modo puente de Objective-C en la configuración de compilación, haz lo siguiente:

  1. En Xcode, haz clic en tu proyecto.
  2. Haz clic en Build Settings en el área de edición.
    Haz clic en Build Settings (Configuración de compilación)
  3. Selecciona Todas y Combinada, y busca el modo modo puente.
    Búsqueda puente
  4. En la columna derecha de la fila que contiene Objective-C Bridging Header, ingresa BridgingHeader.h.
    Cómo agregar BridgingHeader.h como encabezado de puente de Objective-C

4. Agrega un contenedor predeterminado a tu proyecto

Antes de agregar un contenedor predeterminado a tu proyecto, descarga un objeto binario de contenedor para dispositivos móviles:

  1. Accede a tu cuenta de Google Tag Manager.
  2. Selecciona un contenedor para dispositivos móviles.
  3. Haga clic en Versiones en la barra de menú.
  4. Haz clic en Acciones > Descargar en la versión del contenedor seleccionada.
    5. El nombre del archivo descargado es el ID del contenedor, por ejemplo, GTM-PT3L9Z.

Para agregar un objeto binario de contenedor predeterminado a tu proyecto, haz lo siguiente:

  1. Abre Xcode.
  2. Haz clic en el ícono Finder en el Dock.
  3. Haz clic en la carpeta Downoloads.
  4. Arrastra el archivo binario del contenedor a la carpeta Downloads y suéltalo en la carpeta raíz del proyecto de Xcode.
  1. En Xcode, abre el archivo AppDelegate.swift.
  2. Haz que la clase AppDelegate extienda la clase TAGContainerOpenerNotifier: 
    import UIKit

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

    Después de extender la clase, verás el error Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'. El siguiente paso solucionará este error.

  3. Agrega la siguiente función al final de la definición de la clase AppDelegate: 
    func containerAvailable(container: TAGContainer!) {
  container.refresh()
}
  4. En la función application, agrega el siguiente código antes de la sentencia 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. Realizar un seguimiento de evento de pantalla abierta

Para realizar el seguimiento de un evento de pantalla abierta, haz lo siguiente:

  1. Crea una variable para almacenar el ID de seguimiento.
  2. Crea una variable de capa de datos llamada screenName.
  3. Crea una etiqueta de GTM llamada Screen View.
  4. Agrega el código de seguimiento de pantalla.

a. Cómo crear una variable para almacenar el ID de seguimiento

  1. Accede a tu cuenta de Google Tag Manager.
  2. Selecciona un contenedor para dispositivos móviles.
  3. En la barra de navegación izquierda, haz clic en Variables.
  4. En Variables definidas por el usuario, haz clic en Nueva.
  5. Haz clic en Variable sin título para ingresar el nombre de la variable ID de seguimiento.
  6. Elige Constante como el tipo de variable.
  7. Ingresa el ID de seguimiento (con el formato UA-XXXXXXXX-X, en el que X es un dígito) como el valor de la variable.
    Usa UA-47605289-5 (se borrará).
  8. Haz clic en Crear variable.

b. Crea una variable de capa de datos llamada screenName

  1. Accede a tu cuenta de Google Tag Manager.
  2. Selecciona un contenedor para dispositivos móviles.
  3. En la barra de navegación izquierda, haz clic en Variables.
  4. En Variables definidas por el usuario, haz clic en Nueva.
  5. Haz clic en Untitled Variable para ingresar el título Screen Name.
  6. Elija Data Layer Variable como tipo de variable.
  7. Ingresa screenName como Nombre de variable de capa de datos.
  8. Haz clic en Establecer valor predeterminado.
  9. Ingresa el valor predeterminado unknown screen.
  10. Haz clic en Crear variable.

c. Crear una etiqueta de GTM con el título Vista de pantalla

  1. Accede a tu cuenta de Google Tag Manager.
  2. Selecciona un contenedor para dispositivos móviles.
  3. En la barra de navegación izquierda, haz clic en Etiquetas.
  4. Haz clic en Nueva.
  5. Haz clic en Etiqueta sin título (Untitled Tag) para ingresar el nombre de la etiqueta Screen View (Vista de pantalla).
  6. Elige el producto Google Analytics.
  7. Selecciona ID de seguimiento en la lista.
  8. Selecciona App View como Track Type.
  9. Haz clic en Más parámetros de configuración.
  10. Haz clic en Campos para configurar.
  11. Haz clic en + Agregar campo.
  12. Selecciona el nombre del campo screenName y su valor Screen Name.
  13. Haz clic en Continuar.
  14. En Activado, selecciona Cualquier evento.
  15. Haz clic en Crear etiqueta.

d. Agregar código de seguimiento de pantalla

  1. Abre el archivo ViewController.swift en Xcode.
  2. Define una variable llamada dataLayer dentro de la clase ViewController: 
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
  3. En la función viewDidLoad(), envía el evento OpenScreen a la capa de datos: 
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])

La definición de la clase ViewController se ve de la siguiente manera:

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. Se presionó el botón de seguimiento

Para realizar un seguimiento de un evento al presionar un botón, haz lo siguiente:

  1. Crea una variable de capa de datos llamada eventAction.
  2. Crea una variable de evento personalizada llamada Event.
  3. Crea una etiqueta de GTM llamada Botón presionado.
  4. Crea un botón y agrega código para hacer un seguimiento de que se presiona el botón.

a. Cómo crear una variable de capa de datos llamada eventAction

  1. Accede a tu cuenta de Google Tag Manager.
  2. Selecciona un contenedor para dispositivos móviles.
  3. En la barra de navegación izquierda, haz clic en Variables.
  4. En Variables definidas por el usuario, haz clic en Nueva.
  5. Haz clic en Variable sin título para ingresar el título Acción del evento.
  6. Elija Data Layer Variable como tipo de variable.
  7. Ingrese eventAction como el Nombre de la variable de capa de datos.
  8. Haz clic en Establecer valor predeterminado.
  9. Ingresa el valor predeterminado evento desconocido.
  10. Haz clic en Crear variable.

b. Crea una variable de evento personalizada llamada Event

  1. Accede a tu cuenta de Google Tag Manager.
  2. Selecciona un contenedor para dispositivos móviles.
  3. En la barra de navegación izquierda, haz clic en Variables.
  4. En Variables definidas por el usuario, haz clic en Nueva.
  5. Haz clic en Variable sin título para ingresar el nombre de la variable Evento.
  6. Elige Evento personalizado como el tipo de variable.
  7. Haz clic en Crear variable.

c. Crear una etiqueta de GTM con el título Button Pressed

  1. Accede a tu cuenta de Google Tag Manager.
  2. Selecciona un contenedor para dispositivos móviles.
  3. En la barra de navegación izquierda, haz clic en Etiquetas.
  4. Haz clic en Nueva.
  5. Haz clic en Etiqueta sin título para ingresar el nombre de la etiqueta Botón presionado.
  6. Elige el producto Google Analytics.
  7. Selecciona ID de seguimiento en la lista.
  8. Selecciona Event como el Track Type.
  9. Selecciona la categoría Evento.
  10. Selecciona Acción del evento.
  11. Haz clic en Continuar.
  12. En Activado, selecciona Cualquier evento.
  13. Haz clic en Crear etiqueta.

d. Crea un botón y agrega código para hacer un seguimiento de que se presiona el botón

  1. Abre tu proyecto de Xcode.
  2. Abre Main.storyboard.
  3. Haz clic en el botón en el extremo superior derecho de la barra de herramientas de Xcode para abrir el área de utilidades (barra lateral derecha). Guion gráfico y área de servicios
  4. En la parte inferior del área de la compañía eléctrica,
    botón azul para abrir la biblioteca de objetos

    Haz clic en el botón Mostrar la biblioteca de objetos (el botón azul):

    Ventana emergente de la biblioteca de objetos
  5. Ingresa button en el cuadro de búsqueda.
    botón en la biblioteca de objetos
  6. Arrastra la opción Botón al guion gráfico y suéltala en la esquina superior izquierda.
    Arrastra y suelta el botón en el guion gráfico
  7. Haz clic en el botón del editor de Asistente Botón del editor de Asistente en la barra de herramientas de Xcode.
  8. Mientras mantienes presionada la tecla Ctrl, arrastra el botón y suéltalo en la parte inferior de la definición de la clase ViewController.
    Arrastra y suelta el botón en la definición de la clase ViewController
  9. En el cuadro de diálogo, selecciona la conexión Action, ingresa el nombre de la función buttonPressed y haz clic en Connect.
    Crea código para controlar el evento de presión del botón

    Esto agregará la siguiente función al final de la definición de la clase ViewController:

    @IBAction func buttonPressed(sender: AnyObject) {
}

    La función se ejecuta cada vez que se presiona el botón.

  10. En la función buttonPressed, agrega el siguiente código para enviar el evento ButtonPressed a la capa del día: 
    @IBAction func buttonPressed(sender: AnyObject) {
  dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
}

8. Compila y ejecuta tu app

En Xcode, haz clic en Product > Run. Xcode compilará y ejecutará la app:

Captura de pantalla de la app iniciada