Está en la página 1de 95

Curso de

Bagde
Google Tag Manager
del curso para Marketing
Ulises Rayón
Head of Performance en Platzi
Bienvenidos
Glosario

Snippet: pequeño
fragmento reusable de
código.
¿Qué es
Google Tag Manager
(GTM)?
Sistemas de gestión
de etiquetas

● Permiten la introducción y actualización de


fragmentos de código conocidos como Tags o
Etiquetas en sitios web o aplicaciones móviles.
¿Por qué usar
Google Tag Manager?
Ejemplo de uso
Ejemplo de uso
Ejemplo de uso
Ejemplo de uso
Ejemplo de uso
Ejemplo de uso
Ejemplo de uso
Ejemplo de uso

Datos
Datos Data
Layer
Datos

etc.
En resumen
Hacia un Marketing
basado en datos
Marketing en la era digital
¿Qué son los datos
en Marketing?
Desde las plataformas
Desde nuestras propiedades
Desde nuestras propiedades
¿Cómo los usamos?
Entender nuestro producto
En resumen
Presentación del
proyecto
Estructura de
una página web:
HTML, CSS y JS
Una página web
¿Quiénes hacen
una página web?
Los perfiles

Frontend Backend Project


Developer Developer Manager
(Fullstack)
¿Cómo lo hacen?
En resumen
Explorar una página:
DOM, Window y
selectores CSS
DOM
DOM de una archivo HTML
Document

Root element
<html>
Element
<head>
Element
<title>
Element
<body> Text:
“My title”
Element
<h1>

Text:

DOM “A heading”

Element Attribute
Document Object <a> href
Model
Text:
“Link text”
Window
Window

Objeto de Javascript que puede almacenar


información de la página web, al igual que puede
hacer modificaciones a la vista actual de la
página.
Selectores CSS
Selectores CSS

Los selectores de CSS son instrucciones


que usamos para alterar el estado o una parte
específica de alguna etiqueta del HTML.
En resumen
Etiquetas básicas
de HTML
Etiquetas HTML

<head></head> <body></body>

Head Body
Etiquetas HTML

<title></title> <h*></h*>

Title Headings
Etiquetas HTML

<form></form> <p></p>

Form Paragraph
Etiquetas HTML

<input></input> <button></button>

Input Button
En resumen
Revisión del proyecto
del curso
Instalar y verificar el
funcionamiento de Tag
Manager en un sitio
En resumen
Preview Mode y Tag
Assistant para diagnosticar
y verificar tags
En resumen
Revisión del checklist
Instalar Google
Analytics vía Tag
Manager
En resumen
Instalar Facebook
píxel vía Tag Manager
En resumen
Instalar Google Ads
píxel vía Tag Manager
En resumen
Instalar Bing píxel
vía Tag Manager
En resumen
Revisión del checklist
Ejercicio
Instalar LinkedIn
píxel vía Tag Manager
En resumen
Rastrear el nivel de
lectura de página
¿Cómo funcionan los
eventos en GA?
En resumen
Aplicación del rastreo
del nivel de lectura de
página
En resumen
Rastrear clics
en botones
En resumen
Rastrear llegada a
páginas específicas
En resumen
Rastrear Forms
En resumen
Revisión del proyecto
¿Qué es y cómo usar
un Data Layer?
Data Layer

Data
Data
Data Layer
Data

etc.
Data Layer

● Para developers: es un arreglo de JS cuyo único


elemento es un diccionario.

● Para non-developers: es una caja donde


variables y valores asociados de la página se
almacenan para ser leídos por Tag Manager y
que éste las use y distribuya.
Data Layer

{“Botón”: “Desarrollo
e ingeniería”,
“Directorio”: “Home”}

{“Botón”: “Comenzar Ahora”,


“Directorio”: “Home”}
Data Layer

{“Botón”: “Iniciar Sesión”,


“Directorio”:”Home”}
En resumen
Cargar eventos
al Data Layer
Hard - Coded
On - Click
En resumen
Lectura de Data Layer
en Tag Manager
En resumen
Despedida
Recapitulemos lo
aprendido
Revisión del proyecto
del curso
¡Felicitaciones!
Examen
Bonus: Optimize
En resumen
Bonus: GA4
En resumen

También podría gustarte