Introducción a GTM
¿Qué es Google Tag Manager?
Un marketing basado en datos
HTML para Marketing
Estructura de una página web: HTML, CSS y JS
Explorar una página: DOM, Window y Clases CSS
Etiquetas básicas de HTML
Revisión del proyecto
Integrar plataformas de terceros con GTM
Instalar y verificar funcionamiento de Tag Manager en un sitio
Preview Mode y Tag Assistant para diagnosticar y verificar tags
Instalar Google Analytics vía Tag Manager
Instalar Facebook Pixel vía Tag Manager
Instalar Google Ads Píxel vía Tag Manager
Instalar Bing Pixel vía Tag Manager
Instalar LinkedIn Píxel vía Tag Manager
Optimizar resultados con eventos built-in
Rastrear el nivel de lectura de página
Aplicación del rastreo del nivel de lectura de página
Rastrear clics en botones
Rastrear llegada a páginas específicas
Rastrear Forms
Optimizar con eventos personalizados
¿Qué es un Data Layer?
Razones para saber de programación en Marketing
Cargar eventos al Data Layer
Variables y constantes en Tag Manager
Lectura de Data Layer en Tag Manager
Herramientas bonus
Bonus: GA4
Bonus: Optimize
Conclusiones
Glosario de Google Tag Manager
Siguientes pasos
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 7
Preguntas 2
Esta clase puede parecer un poco técnica para un programador o desarrollo web, sin embargo, es fundamental como marketers comprender las bases y la estructura general de un sitio web, lo que nos permitirá una mejor comunicación con los desarrolladores en su mismo lenguaje lo que facilitará el trabajo.
.
Les comparto los fundamentos base de una página web
Al explorar una página web, existen diferentes herramientas que se pueden utilizar para entender su estructura y contenido. Algunas de estas herramientas son el DOM, la ventana del navegador y las clases CSS.
El DOM es la estructura que se utiliza para representar un documento HTML. Es una representación jerárquica de los elementos de una página web, lo que significa que cada elemento HTML está organizado dentro de otros elementos, formando una estructura en forma de árbol. El DOM es utilizado por el navegador para renderizar la página web y por los desarrolladores web para manipular la página utilizando JavaScript.
La ventana del navegador es la interfaz que el usuario utiliza para interactuar con la página web. Además de mostrar el contenido de la página, la ventana del navegador también proporciona información útil sobre la página, como la dirección URL, los botones de navegación y las herramientas de desarrollo.
Las clases CSS son un conjunto de reglas que definen el estilo de los elementos HTML en una página web. Las clases CSS se utilizan para definir la apariencia visual de una página, incluyendo el diseño, los colores, las fuentes y los efectos. Al utilizar clases CSS, los desarrolladores pueden separar el contenido de la presentación, lo que permite realizar cambios en la apariencia de la página sin tener que cambiar el contenido.
En conclusión, el DOM, la ventana del navegador y las clases CSS son herramientas esenciales para explorar y comprender una página web. Al entender la estructura y contenido de la página, los desarrolladores pueden realizar cambios y mejoras para mejorar la experiencia del usuario.
El Document Object Model (DOM) es la estructura de objetos que representa a un archivo HTML. Este modelo permite acceder y manipular los elementos del archivo HTML a través de lenguajes de programación como JavaScript.
El DOM está formado por una jerarquía de objetos, comenzando por el objeto document, que representa al documento HTML como un todo. El documento tiene un elemento raíz, conocido como root element, que contiene a su vez dos elementos principales: head y body.
Cada elemento del HTML se representa por un objeto en el DOM. Por ejemplo, si un archivo HTML tiene un elemento h1, el DOM contendrá un objeto que representa ese elemento. Lo mismo ocurre con los demás elementos, como los enlaces a y los párrafos p.
En resumen, el DOM es una estructura de objetos que representa a un archivo HTML y permite acceder y manipular sus elementos a través de lenguajes de programación.
Las clases CSS son un mecanismo que permite aplicar estilos a uno o varios elementos del HTML. Para asignar una clase a un elemento HTML, se utiliza el atributo class con el nombre de la clase.
Por ejemplo, si se tiene un elemento h1 al que se desea aplicar un estilo CSS, se puede crear una clase en el archivo CSS y asignarla al elemento h1 en el archivo HTML:
<html>
<head>
<title>Mi página</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1 class="titulo">Título de la página</h1>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>
.titulo {
color: red;
font-size: 24px;
}
En este ejemplo, se ha creado una clase llamada “titulo” en el archivo CSS y se ha asignado al elemento h1 en el archivo HTML. La clase “titulo” define un color rojo y un tamaño de fuente de 24 píxeles para el texto.
El objeto Window es un objeto global que representa a la ventana del navegador. Contiene información sobre la ventana y proporciona métodos para interactuar con ella.
Por ejemplo, el objeto Window proporciona métodos para abrir y cerrar ventanas, así como para navegar por páginas web. También proporciona propiedades para acceder a información sobre la ventana, como su tamaño y posición en la pantalla.
Además, el objeto Window es el objeto principal a través del cual se accede al DOM. Cada ventana del navegador tiene su propio objeto Window, que se puede utilizar para acceder y manipular los elementos del DOM en esa ventana.
En resumen, el objeto Window es un objeto global que representa a la ventana del navegador y proporciona métodos y propiedades para interactuar con ella. Además, es el objeto principal a través del cual se accede al DOM de la ventana.
La estructura del Document Object Model (DOM) de un archivo HTML puede entenderse como una jerarquía de nodos que representan cada elemento en la página.
El nodo raíz es el objeto document que representa todo el documento HTML. Dentro de este objeto, podemos encontrar dos nodos principales: head y body.
El nodo head representa la sección de la página que contiene información de metadatos, como el título del documento, en el elemento title, y los enlaces a los archivos CSS y JavaScript.
El nodo body representa la sección principal de la página, que incluye todo el contenido visible de la página, como encabezados (h1), enlaces (a), texto (p), imágenes (img), entre otros.
En el nodo body, podemos encontrar todos los elementos visibles de la página, como encabezados (h1), enlaces (a), texto (p), imágenes (img), entre otros. Cada uno de estos elementos puede tener uno o más atributos, como el atributo href de un enlace.
El DOM representa todos los elementos HTML de la página como nodos, lo que permite acceder y manipular el contenido de la página con JavaScript.
Los selectores CSS son una herramienta importante para seleccionar elementos específicos de una página web y aplicarles estilos. Algunos de los selectores más comunes son:
El selector de tipo selecciona todos los elementos de un tipo específico. Por ejemplo, el selector p selecciona todos los párrafos en una página.
El selector de clase selecciona todos los elementos que tienen una clase específica. Por ejemplo, el selector .destacado selecciona todos los elementos que tienen la clase “destacado”.
El selector de ID selecciona un elemento específico que tiene un ID único. Por ejemplo, el selector #encabezado selecciona el elemento con el ID “encabezado”.
El selector descendente selecciona elementos que son descendientes directos de otro elemento. Por ejemplo, el selector ul li selecciona todos los elementos li que son descendientes directos de un elemento ul.
El selector de atributo selecciona elementos que tienen un atributo específico. Por ejemplo, el selector [type="text"] selecciona todos los elementos que tienen un atributo type con un valor de “text”.
Estos son solo algunos ejemplos de selectores CSS. Hay muchos más, y es importante conocerlos para poder aplicar estilos de manera efectiva en una página web.
Esto es aparte del curso, pero sí vi bien el home de la tienda de Platzi no tiene un H1 y eso es super importante en una pagina web. ¿Qué paso ahí Team Platzi? 😱
super imporntate saber algo basico para modificar los estilos
Fascinante. Muy buena la explicación ahí profe. Estoy aprendiendo mucho en este curso 😄
El conocimiento de estas herramientas nos permite comunicarnos mejor con otras áreas incluyendo las de desarrollo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?