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 la etiqueta de Google 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. seleccionar aplicación de vista única
  4. Haz clic en Siguiente.
  5. Asígnale un nombre a tu proyecto y elige opciones adicionales para él. El nombre de tu proyecto y El nombre de la app será el mismo que el del producto.
    Ingresa el nombre del producto y otras opciones
  6. Haz clic en Siguiente.
  7. Selecciona una ubicación de proyecto (directorio).
  8. Haz clic en Crear.

2. Cómo instalar 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 Google Tag Manager (GTM). dependencias a tu proyecto: 
    $ pod install

    Con este comando, también se 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:

  1. Abre Xcode.
  2. Haz clic en Archivo > Nuevo > Archivo.
  3. En iOS > Source, selecciona Header File.
  4. Haz clic en Siguiente.
  5. Ingresa el nombre de 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 la compilación, haz lo siguiente:

  1. En Xcode, haz clic en tu proyecto.
  2. Haz clic en Build Settings en el área de editor.
    Haz clic en Build Settings.
  3. Selecciona Todas y Combinadas, y busca el puente.
    Puente de la Búsqueda
  4. En la columna derecha de la fila que contiene el encabezado de puente de Objective-C, haz lo siguiente: ingresa BridgingHeader.h.
    Se agregó BridgingHeader.h como encabezado de modo 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 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 el contenedor seleccionado versión.
    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 de Finder en el Dock.
  3. Haz clic en la carpeta Downoloads.
  4. Arrastra el archivo binario del contenedor en la carpeta Downloads y suéltalo. en la carpeta raíz del proyecto Xcode.
  1. En Xcode, abre el archivo AppDelegate.swift.
  2. Haz que la clase AppDelegate extienda el Clase TAGContainerOpenerNotifier: 
    import UIKit

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

    Después de extender la clase, obtendrás Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier' . En el siguiente paso, se 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. Registrar evento de apertura de pantalla

Para realizar el seguimiento de un evento de apertura de pantalla:

  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 con el nombre Screen View.
  4. Agrega el código de seguimiento de la pantalla.

a. Crea una variable para almacenar el ID de seguimiento

  1. Accede a Google Tag Manager. de servicio predeterminada.
  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. 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 (que se borrará).
  8. Haz clic en Crear variable.

b. Crea una variable de capa de datos llamada screenName

  1. Accede a Google Tag Manager. de servicio predeterminada.
  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. Nombre de pantalla.
  6. Elige Data Layer Variable como el tipo de variable.
  7. Ingresa screenName como el Nombre de variable de la capa de datos.
  8. Haz clic en Establecer valor predeterminado.
  9. Ingresa el valor predeterminado unknown screen.
  10. Haz clic en Crear variable.

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

  1. Accede a Google Tag Manager. de servicio predeterminada.
  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. 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 More settings.
  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 Fire On, selecciona Any Event.
  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 del Clase ViewController: 
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
  3. En la función viewDidLoad(), envía el OpenScreen a la capa de datos: 
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])

La definición de la clase ViewController se ve así:

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 presionado mediante el botón de seguimiento

Para realizar el seguimiento de un evento presionado por 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 con el título Botón presionado.
  4. Crea un botón y agrega código para hacer un seguimiento de que se presione el botón.

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

  1. Accede a Google Tag Manager. de servicio predeterminada.
  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. Acción de evento.
  6. Elige Data Layer Variable como el tipo de variable.
  7. Ingresa eventAction como el Nombre de variable de la capa de datos.
  8. Haz clic en Establecer valor predeterminado.
  9. Ingresa el valor predeterminado unknown event.
  10. Haz clic en Crear variable.

b. Crea una variable de evento personalizada llamada Event

  1. Accede a Google Tag Manager. de servicio predeterminada.
  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 tipo de variable.
  7. Haz clic en Crear variable.

c. Crea una etiqueta de GTM con el título Button Presionado

  1. Accede a Google Tag Manager. de servicio predeterminada.
  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. Botón presionado:
  6. Elige el producto Google Analytics.
  7. Selecciona ID de seguimiento en la lista.
  8. Selecciona Evento como Tipo de segmento.
  9. Selecciona la categoría Evento.
  10. Selecciona Acción del evento.
  11. Haz clic en Continuar.
  12. En Fire On, selecciona Any Event.
  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 Xcode.
  2. Abre Main.storyboard.
  3. Haz clic en el botón superior derecho de la barra de herramientas de Xcode para abrir el área de utilidades (barra lateral derecha). Guión gráfico y área de servicios públicos
  4. En la parte inferior del área de servicios públicos,
    de 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 botón en el cuadro de búsqueda.
    botón de la biblioteca de objetos
  6. Arrastra Botón al guion gráfico y suéltalo en la parte superior. en la esquina superior izquierda.
    Arrastra y suelta el botón en el guion gráfico
  7. Haz clic en el botón de Asistente de edición. Botón del Asistente del editor en la barra de herramientas de Xcode.
  8. Mientras mantienes presionada la tecla Ctrl, arrastra el botón y suéltalo al final 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 Action connection, ingresa el nombre de la función. buttonPressed y, luego, hacer clic en Conectar.
    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 al envía el evento ButtonPressed a la capa de 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 > Ejecutar (Run). Xcode compilará y ejecutará la app:

Captura de pantalla de la app que se inició