Guía de introducción para Swift

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

1. Crea un proyecto nuevo

  1. Abre Xcode. crea uno nuevo
  2. Haz clic en Create a new Xcode project.
  3. Selecciona Single View Application. selecciona la aplicación de vista única
  4. Haz clic en Siguiente.
  5. Asigna un nombre a tu proyecto y elige opciones adicionales para él. El nombre del proyecto y de la app serán los mismos que el nombre del producto.
    Ingresa el nombre del producto y otras opciones
  6. Haz clic en Siguiente.
  7. Selecciona una ubicación (directorio) del proyecto.
  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 objetivo:
    6. # Uncomment this line if you're using Swift
    use_frameworks!

    target     'GtmSwiftTutorial' do
          pod 'GoogleTagManager'
    end
  6. Ejecuta el siguiente comando para descargar e 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 de puente para las bibliotecas de Objective-C

Para crear un archivo de encabezado de puente, sigue estos pasos:

  1. Abre Xcode.
  2. Haz clic en File > New > File.
  3. En iOS > Source, selecciona Header File.
  4. Haz clic en 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 sentencias 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 el encabezado 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 del editor.
    Haz clic en Build Settings.
  3. Selecciona Todas y Combinadas, y busca el puente.
    Puente de búsqueda
  4. En la columna derecha de la fila que contiene Objective-C Bridging Header, ingresa BridgingHeader.h.
    Se agregó BridgingHeader.h como encabezado 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. Haz 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 contenedor binario predeterminado a tu proyecto, haz lo siguiente:

  1. Abre Xcode.
  2. Haz clic en el ícono de Finder en la barra de tareas.
  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 de tu 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, obtendrás el error Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'. El siguiente paso corregirá 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. Realiza un seguimiento del evento de apertura de la pantalla

Para hacer un seguimiento de un evento de apertura de pantalla, sigue estos pasos:

  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 titulada Vista de pantalla.
  4. Agrega el código de seguimiento de la pantalla.

a. Crea 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, donde X es un dígito) como 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 Variable sin título para ingresar el título Nombre en pantalla.
  6. Elige Variable de capa de datos como el tipo de variable.
  7. Ingresa screenName como Nombre de la variable de capa de datos.
  8. Haz clic en Establecer valor predeterminado.
  9. Ingresa el valor predeterminado pantalla desconocida.
  10. Haz clic en Crear variable.

c. Crea una etiqueta de GTM titulada 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 Nuevo.
  5. Haz clic en Etiqueta sin título para ingresar el nombre de la etiqueta en Vista de pantalla.
  6. Elige el producto Google Analytics.
  7. Selecciona ID de seguimiento en la lista.
  8. Selecciona App View como el Tipo de segmento.
  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 Nombre de la pantalla.
  13. Haz clic en Continuar.
  14. En Ejecute en, selecciona Cualquier evento.
  15. Haz clic en Crear etiqueta.
Etiqueta de GTM: Vista de pantalla

d. Agrega el 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. Realiza un seguimiento del evento de botón presionado

Para hacer un seguimiento de un evento de botón presionado, sigue estos pasos:

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

a. Crea 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. Elige Variable de capa de datos como el tipo de variable.
  7. Ingresa 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 Evento

  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 nombre de la variable Event.
  6. Elige Evento personalizado como el tipo de variable.
  7. Haz clic en Crear variable.

c. Crea una etiqueta de GTM titulada Se presionó el botón

  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 Nuevo.
  5. Haz clic en Untitled Tag para ingresar el nombre de la etiqueta Button Pressed.
  6. Elige el producto Google Analytics.
  7. Selecciona ID de seguimiento en la lista.
  8. Selecciona Evento como Tipo de seguimiento.
  9. Selecciona la categoría Evento.
  10. Selecciona Acción del evento.
  11. Haz clic en Continuar.
  12. En Ejecute en, selecciona Cualquier evento.
  13. Haz clic en Crear etiqueta.
Etiqueta de GTM: botón presionado

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

  1. Abre tu proyecto de Xcode.
  2. Abre Main.storyboard.
  3. Haz clic en el botón de la esquina superior derecha de la barra de herramientas de Xcode para abrir el área de utilidad (barra lateral derecha). Guión gráfico y área de servicios públicos
  4. En la parte inferior del área de utilidad,
    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 el botón en el cuadro de búsqueda.
    botón en la biblioteca de objetos
  6. Arrastra Botón al guion gráfico y suéltalo en la esquina superior izquierda.
    Arrastra y suelta el botón en el guion gráfico.
  7. Haz clic en el botón del Asistente del editor Botón del editor de Asistente en la barra de herramientas de Xcode.
  8. Mantén 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 que se presiona un botón

    Esto agrega 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 que se inició