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
- Abre Xcode.
- Haz clic en Crear un nuevo proyecto de Xcode.
- Selecciona Single View Application.
- Presiona Siguiente.
- 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.
- Presiona Siguiente.
- Selecciona una ubicación del proyecto (directorio).
- Haz clic en Crear.
2. Instala las dependencias de Google Tag Manager
- Sal de Xcode.
- En una terminal, ejecuta el siguiente comando para instalar Cocoapods:
$ sudo gem install cocoapods
- Cambia al directorio de tu proyecto.
- Ejecuta el siguiente comando para crear un archivo llamado
Podfile
:$ pod init
- En
Podfile
, quita el comentario deuse_frameworks!
y agregapod 'GoogleTagManager'
al destino: - 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 deGtmSwiftTutorial
.
# Uncomment this line if you're using Swift use_frameworks! target 'GtmSwiftTutorial' do pod 'GoogleTagManager' end
3. Agrega un encabezado puente para las bibliotecas de Objective-C
Para crear un archivo de encabezado puente, haz lo siguiente:
- Abre Xcode.
- Haz clic en File > New > File.
- En iOS > Fuente, selecciona Archivo de encabezado.
- Presiona Siguiente.
- Ingresa el nombre del archivo de encabezado
BridgingHeader.h
.
- Haz clic en Crear.
- 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:
- En Xcode, haz clic en tu proyecto.
- Haz clic en Build Settings en el área de edición.
- Selecciona Todas y Combinada, y busca el modo modo puente.
- En la columna derecha de la fila que contiene Objective-C Bridging Header, ingresa
BridgingHeader.h
.
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:
- Accede a tu cuenta de Google Tag Manager.
- Selecciona un contenedor para dispositivos móviles.
- Haga clic en Versiones en la barra de menú.
- Haz clic en Acciones > Descargar en la versión del contenedor seleccionada.
GTM-PT3L9Z
.
Para agregar un objeto binario de contenedor predeterminado a tu proyecto, haz lo siguiente:
- Abre Xcode.
- Haz clic en el ícono Finder en el Dock.
- Haz clic en la carpeta
Downoloads
. - Arrastra el archivo binario del contenedor a la carpeta
Downloads
y suéltalo en la carpeta raíz del proyecto de Xcode.
5. Vincula Google Tag Manager a tu aplicación
- En Xcode, abre el archivo
AppDelegate.swift
. - Haz que la clase
AppDelegate
extienda la claseTAGContainerOpenerNotifier
: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. - Agrega la siguiente función al final de la definición de la clase
AppDelegate
:func containerAvailable(container: TAGContainer!) { container.refresh() }
- En la función
application
, agrega el siguiente código antes de la sentenciareturn 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:
- Crea una variable para almacenar el ID de seguimiento.
- Crea una variable de capa de datos llamada screenName.
- Crea una etiqueta de GTM llamada Screen View.
- Agrega el código de seguimiento de pantalla.
a. Cómo crear una variable para almacenar el ID de seguimiento
- Accede a tu cuenta de Google Tag Manager.
- Selecciona un contenedor para dispositivos móviles.
- En la barra de navegación izquierda, haz clic en Variables.
- En Variables definidas por el usuario, haz clic en Nueva.
- Haz clic en Variable sin título para ingresar el nombre de la variable ID de seguimiento.
- Elige Constante como el tipo de variable.
- Ingresa el ID de seguimiento (con el formato
UA-XXXXXXXX-X
, en el queX
es un dígito) como el valor de la variable.UsaUA-47605289-5
(se borrará). - Haz clic en Crear variable.
b. Crea una variable de capa de datos llamada screenName
- Accede a tu cuenta de Google Tag Manager.
- Selecciona un contenedor para dispositivos móviles.
- En la barra de navegación izquierda, haz clic en Variables.
- En Variables definidas por el usuario, haz clic en Nueva.
- Haz clic en Untitled Variable para ingresar el título Screen Name.
- Elija Data Layer Variable como tipo de variable.
- Ingresa screenName como Nombre de variable de capa de datos.
- Haz clic en Establecer valor predeterminado.
- Ingresa el valor predeterminado unknown screen.
- Haz clic en Crear variable.
c. Crear una etiqueta de GTM con el título Vista de pantalla
- Accede a tu cuenta de Google Tag Manager.
- Selecciona un contenedor para dispositivos móviles.
- En la barra de navegación izquierda, haz clic en Etiquetas.
- Haz clic en Nueva.
- Haz clic en Etiqueta sin título (Untitled Tag) para ingresar el nombre de la etiqueta Screen View (Vista de pantalla).
- Elige el producto Google Analytics.
- Selecciona ID de seguimiento en la lista.
- Selecciona App View como Track Type.
- Haz clic en Más parámetros de configuración.
- Haz clic en Campos para configurar.
- Haz clic en + Agregar campo.
- Selecciona el nombre del campo screenName y su valor Screen Name.
- Haz clic en Continuar.
- En Activado, selecciona Cualquier evento.
- Haz clic en Crear etiqueta.
d. Agregar código de seguimiento de pantalla
- Abre el archivo
ViewController.swift
en Xcode. - Define una variable llamada
dataLayer
dentro de la claseViewController
:var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
- En la función
viewDidLoad()
, envía el eventoOpenScreen
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:
- Crea una variable de capa de datos llamada eventAction.
- Crea una variable de evento personalizada llamada Event.
- Crea una etiqueta de GTM llamada Botón presionado.
- 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
- Accede a tu cuenta de Google Tag Manager.
- Selecciona un contenedor para dispositivos móviles.
- En la barra de navegación izquierda, haz clic en Variables.
- En Variables definidas por el usuario, haz clic en Nueva.
- Haz clic en Variable sin título para ingresar el título Acción del evento.
- Elija Data Layer Variable como tipo de variable.
- Ingrese eventAction como el Nombre de la variable de capa de datos.
- Haz clic en Establecer valor predeterminado.
- Ingresa el valor predeterminado evento desconocido.
- Haz clic en Crear variable.
b. Crea una variable de evento personalizada llamada Event
- Accede a tu cuenta de Google Tag Manager.
- Selecciona un contenedor para dispositivos móviles.
- En la barra de navegación izquierda, haz clic en Variables.
- En Variables definidas por el usuario, haz clic en Nueva.
- Haz clic en Variable sin título para ingresar el nombre de la variable Evento.
- Elige Evento personalizado como el tipo de variable.
- Haz clic en Crear variable.
c. Crear una etiqueta de GTM con el título Button Pressed
- Accede a tu cuenta de Google Tag Manager.
- Selecciona un contenedor para dispositivos móviles.
- En la barra de navegación izquierda, haz clic en Etiquetas.
- Haz clic en Nueva.
- Haz clic en Etiqueta sin título para ingresar el nombre de la etiqueta Botón presionado.
- Elige el producto Google Analytics.
- Selecciona ID de seguimiento en la lista.
- Selecciona Event como el Track Type.
- Selecciona la categoría Evento.
- Selecciona Acción del evento.
- Haz clic en Continuar.
- En Activado, selecciona Cualquier evento.
- 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
- Abre tu proyecto de Xcode.
- Abre
Main.storyboard
. - 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).
- En la parte inferior del área de la compañía eléctrica,
Haz clic en el botón Mostrar la biblioteca de objetos (el botón azul):
- Ingresa button en el cuadro de búsqueda.
- Arrastra la opción Botón al guion gráfico y suéltala en la esquina superior izquierda.
- Haz clic en el botón del editor de Asistente en la barra de herramientas de Xcode.
- 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
.
- En el cuadro de diálogo, selecciona la conexión Action, ingresa el nombre de la función buttonPressed y haz clic en Connect.
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.
- En la función
buttonPressed
, agrega el siguiente código para enviar el eventoButtonPressed
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: