SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
Google Tag Manager - Custom Templates
(Plantillas Personalizadas)
David Vallejo
@thyng
25 Mayo 2019
David Vallejo
@thyng
Blog: https://www.thyngster.com
Freelance.
Especialista Senior en Implementaciones.
Hasta Ahora ...
La cantidad de tags de
vendors soportados por
Google Tag Manager era
limitada… Muchos de los
píxeles más utilizados (
Facebook … ), no estaban
soportados, y muchos de los
nuevos añadidos pasaban
desapercibidos.
¿Qué son las plantillas
personalizadas?
Los Custom Templates nos van a permitir crear
plantillas de tags y variables en Google Tag Manager
Para poder integrar cualquier herramienta o third
Party vendor en nuestros contenedores.
¿Y esto no se podía hacer ya con
Custom HTML?
Si. Pero los Custom HTML no disponían
De ningún control de permisos, ni corrían bajo
Un entorno cerrado ( sandbox ), ni eran
reutilizables, ni disponían de librerías
específicas para realizar las tareas más comunes
A la hora de añadir un pixel
( crear cookies, cargar un JS , etc ), y por supuesto no eran tan
intuitivas una vez configuradas.
Antes ...
… Ahora!
Características Plantillas
● Se programan en JavaScript,pero no tendremos acceso a las
funciones standard de JS. Todo se ejecuta bajo un sandbox
limitado.
● Deberemos cargar las librerías que nos ofrece GTM ( para
escribir mensajes en la consola, para leer y declarar variables
globales, para cargar archivos externos, para lanzar pixeles,
… )
● Podremos utilizar “partes” de ES6 ( uso de const, let y
arrow functions, en un futuro se añadirán más )
Listado de API’s Disponibles ( Se añadirán más en el futuro )
Link: https://developers.google.com/tag-manager/templates/api
Disponen de
opciones de
validación para
“forzar” a los
usuarios a que
introduzcan de
manera correcta los
campos en los tags
Se pueden configurar los
mensajes de error,
personalizar los textos de
ayuda, los valores por defecto,
con el fin de poder ayudar a
los usuarios primerizos a
entender qué valores deben
introducir en los campos de
los tags
Control preciso de permisos.
Por cada una de las API’s que
carguemos podremos definir
qué permisos tendrá nuestra
plantilla, por ejemplo desde
que URL’s se podrán inyectar
scripts, o a qué variables
globales tendrá acceso
nuestro tag.
Se pueden compartir:
https://www.gtmtemplates.com
Reutilizables:
Si tenemos que
hacer un update
a nuestros tags,
por ejemplo para
Añadir una nueva funcionalidad o cambiar el dominio
desde el cual cargamos el script, con tan solo actualizar
nuestra plantilla, todos los tags se verían beneficiados de
manera automática.
Más Ventajas
● Más control y “governancia” sobre lo que hacen los
usuarios en los contenedores.
Las plantillas personalizadas están pensadas para el
entorno lo más seguro posible, de ahí que corra todo bajo
un sandbox limitado.
● Incluso podríamos bloquear a través del dataLayer el
lanzamiento de Custom Scripts y de esta manera obligar a
los usuarios a utilizar plantillas. ( Sin probar )
● Posibilidad de descarga de plantillas realizadas por otros
profesionales y compañeros de profesión.
No sería descabellado en pensar que un futuro allá algún
tipo de marketplace que además de ofrecer plantillas,
pueda incluso a través del API de Google Tag Manager
añadirlas con tan solo un click, e include incluir la
posibilidad de avisar cuando hay updates de estas
plantillas o actualizarlas automáticamente.
● Estandarización de funciones ( no tendremos 4 funciones
diferentes en 4 tags para escribir cookies )
● Mejores prácticas de programación ( al utilizar el API, nos
obligaremos a tener que hacer las cosas de una manera
concreta y optimizada ,que nos ayudará a coger hábitos )
● Evitaremos la sobreescritura de variables de manera
accidental. ( la mayoría de APIs comprobarán si una
variable ya existe antes de inicializarla)
Pero No Todo Es Tan Bonito ...
Learning Curve + Limitaciones
Al no utilizar las funciones
habituales de JS y estar todo bajo el
sandbox nos llevará un tiempo
aprender a utilizar todos estos
nuevos los APIs así como hacernos
con las limitaciones que ellos
mismo imponen.
Learning Curve + Limitaciones
Al no utilizar las funciones
habituales de JS y estar todo bajo el
sandbox nos llevará un tiempo
aprender a utilizar todos estos
nuevos los APIs así como hacernos
con las limitaciones que ellos
mismo imponen.
Missing Libraries, Funcionalidades
Seguramente, en algún momento
nos veremos limitados por los API’s
ofrecidos por el editor de plantillas,
pero Google irá añadiendo nuevas
funcionalidades según se vayan
reclamando/necesitando.
Lecturas Recomendadas
¿ Quieres saber más sobre Custom Templates o Google Tag Manager
en General ? No búsques más.
Lecturas Recomendadas
Custom Templates Guide For Google Tag Manager (
Simo Ahava )
https://www.simoahava.com/analytics/custom-templates-guide-for-google-tag-manager/
Create Facebook Pixel Custom Tag Template ( Video -
Simo Ahava )
https://www.youtube.com/watch?v=5ESEtwq7fxc
¿ Quieres saber más sobre Custom Templates o Google Tag Manager
en General ? No búsques más.
Simo-san ( @simoahava ) tiene todas las respuestas:
Lecturas Recomendadas
Tag Manager: Introducing Custom Templates ( Blog Google )
https://blog.google/products/marketingplatform/analytics/tag-manager-introducing-custom-templates/
Documentación Oficial
https://developers.google.com/tag-manager/templates/
Gracias
David Vallejo
@thyng
https://www.thyngster.com

Contenu connexe

Similaire à [Measure Camp Madrid 2019] Google Tag Manager - Custom Templates (Plantillas Personalizadas)

manual de jquery
manual de jquerymanual de jquery
manual de jquery
Angel Luna
 
05 Joomla. Consideraciones Globales
05 Joomla. Consideraciones Globales05 Joomla. Consideraciones Globales
05 Joomla. Consideraciones Globales
José M. Padilla
 

Similaire à [Measure Camp Madrid 2019] Google Tag Manager - Custom Templates (Plantillas Personalizadas) (20)

Curso joomla-3
Curso joomla-3Curso joomla-3
Curso joomla-3
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
 
Wordpress
WordpressWordpress
Wordpress
 
Seo para Blogs por @lucifer8k
Seo para Blogs por @lucifer8kSeo para Blogs por @lucifer8k
Seo para Blogs por @lucifer8k
 
Manual de jquery
Manual de jqueryManual de jquery
Manual de jquery
 
Jquery
JqueryJquery
Jquery
 
manual de jquery
manual de jquerymanual de jquery
manual de jquery
 
SEO para Blogs - SEO para Mamás Blogueras en Berga Resort
SEO para Blogs - SEO para Mamás Blogueras en Berga ResortSEO para Blogs - SEO para Mamás Blogueras en Berga Resort
SEO para Blogs - SEO para Mamás Blogueras en Berga Resort
 
Google Tag Manager: un nuevo paso en la Analítica Digital (Congreso de Zarago...
Google Tag Manager: un nuevo paso en la Analítica Digital (Congreso de Zarago...Google Tag Manager: un nuevo paso en la Analítica Digital (Congreso de Zarago...
Google Tag Manager: un nuevo paso en la Analítica Digital (Congreso de Zarago...
 
III Meetup WordPress Almería | Framework themes
III Meetup WordPress Almería | Framework themesIII Meetup WordPress Almería | Framework themes
III Meetup WordPress Almería | Framework themes
 
Martes class rich snippets pptx
Martes class rich snippets pptxMartes class rich snippets pptx
Martes class rich snippets pptx
 
265069606-Curso-basico-HTML5.pdf
265069606-Curso-basico-HTML5.pdf265069606-Curso-basico-HTML5.pdf
265069606-Curso-basico-HTML5.pdf
 
05 Joomla. Consideraciones Globales
05 Joomla. Consideraciones Globales05 Joomla. Consideraciones Globales
05 Joomla. Consideraciones Globales
 
Software
SoftwareSoftware
Software
 
NUEVO!!! EN HTML 5
NUEVO!!! EN HTML 5NUEVO!!! EN HTML 5
NUEVO!!! EN HTML 5
 
HTML 5
HTML 5HTML 5
HTML 5
 
Modulo paginas
Modulo paginasModulo paginas
Modulo paginas
 
Automatización de pruebas con Selenium, Typescript, Protractor & Cucumber
Automatización de pruebas con Selenium, Typescript, Protractor & CucumberAutomatización de pruebas con Selenium, Typescript, Protractor & Cucumber
Automatización de pruebas con Selenium, Typescript, Protractor & Cucumber
 
3A5 Trejo Alexandra -Tarea 2
3A5 Trejo Alexandra -Tarea 23A5 Trejo Alexandra -Tarea 2
3A5 Trejo Alexandra -Tarea 2
 
Hazte un experto de diseño web en wordpress
Hazte un experto de diseño web en wordpressHazte un experto de diseño web en wordpress
Hazte un experto de diseño web en wordpress
 

Plus de thyngster

SPWK 2020 - Analytics Debugger - Mobile Websites Implementations Debugging ...
SPWK 2020  -  Analytics Debugger - Mobile Websites Implementations Debugging ...SPWK 2020  -  Analytics Debugger - Mobile Websites Implementations Debugging ...
SPWK 2020 - Analytics Debugger - Mobile Websites Implementations Debugging ...
thyngster
 

Plus de thyngster (7)

EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM TRACKING WITH GOOGLE ANALYTICS.pptx
EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM  TRACKING WITH GOOGLE ANALYTICS.pptxEMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM  TRACKING WITH GOOGLE ANALYTICS.pptx
EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM TRACKING WITH GOOGLE ANALYTICS.pptx
 
Consent & Privacy Signals on Google *Pixels* - MeasureCamp Amsterdam 2024
Consent & Privacy Signals on Google *Pixels* - MeasureCamp Amsterdam 2024Consent & Privacy Signals on Google *Pixels* - MeasureCamp Amsterdam 2024
Consent & Privacy Signals on Google *Pixels* - MeasureCamp Amsterdam 2024
 
MCCZ - Analytics Firewall - Prague - 2023.pdf
MCCZ - Analytics Firewall - Prague - 2023.pdfMCCZ - Analytics Firewall - Prague - 2023.pdf
MCCZ - Analytics Firewall - Prague - 2023.pdf
 
MCNL - AMP Tracking with Google Analytics 4.pptx
MCNL - AMP Tracking with Google Analytics 4.pptxMCNL - AMP Tracking with Google Analytics 4.pptx
MCNL - AMP Tracking with Google Analytics 4.pptx
 
UNTAGGED.DAY #1 . Seguimiento de aplicaciones con Firebase_GA4
UNTAGGED.DAY #1 . Seguimiento de aplicaciones con Firebase_GA4UNTAGGED.DAY #1 . Seguimiento de aplicaciones con Firebase_GA4
UNTAGGED.DAY #1 . Seguimiento de aplicaciones con Firebase_GA4
 
SPWK 2020 - Pseudo Server Side tms - punchcard prize entry
SPWK 2020 - Pseudo Server Side tms - punchcard prize entrySPWK 2020 - Pseudo Server Side tms - punchcard prize entry
SPWK 2020 - Pseudo Server Side tms - punchcard prize entry
 
SPWK 2020 - Analytics Debugger - Mobile Websites Implementations Debugging ...
SPWK 2020  -  Analytics Debugger - Mobile Websites Implementations Debugging ...SPWK 2020  -  Analytics Debugger - Mobile Websites Implementations Debugging ...
SPWK 2020 - Analytics Debugger - Mobile Websites Implementations Debugging ...
 

Dernier

PLAN ANUAL DE PROYECTO 2020. para mejorar
PLAN ANUAL DE PROYECTO 2020. para mejorarPLAN ANUAL DE PROYECTO 2020. para mejorar
PLAN ANUAL DE PROYECTO 2020. para mejorar
CelesteRolon2
 
metodo SOAP utilizado para evaluar el estado de un paciente
metodo SOAP utilizado para evaluar el estado de un pacientemetodo SOAP utilizado para evaluar el estado de un paciente
metodo SOAP utilizado para evaluar el estado de un paciente
MedicinaInternaresid1
 
ETICA EN LA CADENAS la cadena de suministro
ETICA EN LA CADENAS la cadena de suministroETICA EN LA CADENAS la cadena de suministro
ETICA EN LA CADENAS la cadena de suministro
IrisMoreno27
 
REPORTE DE HOMICIDIO DOLOSO IRAPUATO ABRIL 2024
REPORTE DE HOMICIDIO DOLOSO IRAPUATO ABRIL 2024REPORTE DE HOMICIDIO DOLOSO IRAPUATO ABRIL 2024
REPORTE DE HOMICIDIO DOLOSO IRAPUATO ABRIL 2024
IrapuatoCmovamos
 

Dernier (20)

procedimiento paran la planificación en los centros educativos tipo v(multig...
procedimiento  paran la planificación en los centros educativos tipo v(multig...procedimiento  paran la planificación en los centros educativos tipo v(multig...
procedimiento paran la planificación en los centros educativos tipo v(multig...
 
AMNIOS Y CORDON UMBILICAL en el 3 embarazo (1).docx
AMNIOS Y CORDON UMBILICAL en el 3 embarazo (1).docxAMNIOS Y CORDON UMBILICAL en el 3 embarazo (1).docx
AMNIOS Y CORDON UMBILICAL en el 3 embarazo (1).docx
 
variables-estadisticas. Presentación powerpoint
variables-estadisticas. Presentación powerpointvariables-estadisticas. Presentación powerpoint
variables-estadisticas. Presentación powerpoint
 
PLAN ANUAL DE PROYECTO 2020. para mejorar
PLAN ANUAL DE PROYECTO 2020. para mejorarPLAN ANUAL DE PROYECTO 2020. para mejorar
PLAN ANUAL DE PROYECTO 2020. para mejorar
 
metodo SOAP utilizado para evaluar el estado de un paciente
metodo SOAP utilizado para evaluar el estado de un pacientemetodo SOAP utilizado para evaluar el estado de un paciente
metodo SOAP utilizado para evaluar el estado de un paciente
 
Sistema Nacional de Vigilancia en Salud Pública SIVIGILA
Sistema Nacional de Vigilancia en Salud Pública SIVIGILASistema Nacional de Vigilancia en Salud Pública SIVIGILA
Sistema Nacional de Vigilancia en Salud Pública SIVIGILA
 
Las familias más ricas de África en el año (2024).pdf
Las familias más ricas de África en el año (2024).pdfLas familias más ricas de África en el año (2024).pdf
Las familias más ricas de África en el año (2024).pdf
 
El Manierismo. El Manierismo
El Manierismo.              El ManierismoEl Manierismo.              El Manierismo
El Manierismo. El Manierismo
 
Porcentaje de población blanca europea en Europa Occidental (1923-2024).pdf
Porcentaje de población blanca europea en Europa Occidental (1923-2024).pdfPorcentaje de población blanca europea en Europa Occidental (1923-2024).pdf
Porcentaje de población blanca europea en Europa Occidental (1923-2024).pdf
 
COMUNICADO PARA TODO TIPO DE REUNIONES .
COMUNICADO PARA TODO TIPO DE REUNIONES .COMUNICADO PARA TODO TIPO DE REUNIONES .
COMUNICADO PARA TODO TIPO DE REUNIONES .
 
ETICA EN LA CADENAS la cadena de suministro
ETICA EN LA CADENAS la cadena de suministroETICA EN LA CADENAS la cadena de suministro
ETICA EN LA CADENAS la cadena de suministro
 
EXPOSICION. PROCEOS SAW SEMIATUMATIZADO,
EXPOSICION. PROCEOS SAW SEMIATUMATIZADO,EXPOSICION. PROCEOS SAW SEMIATUMATIZADO,
EXPOSICION. PROCEOS SAW SEMIATUMATIZADO,
 
REPORTE DE HOMICIDIO DOLOSO IRAPUATO ABRIL 2024
REPORTE DE HOMICIDIO DOLOSO IRAPUATO ABRIL 2024REPORTE DE HOMICIDIO DOLOSO IRAPUATO ABRIL 2024
REPORTE DE HOMICIDIO DOLOSO IRAPUATO ABRIL 2024
 
Las marcas automotrices con más ventas de vehículos (2024).pdf
Las marcas automotrices con más ventas de vehículos (2024).pdfLas marcas automotrices con más ventas de vehículos (2024).pdf
Las marcas automotrices con más ventas de vehículos (2024).pdf
 
PIB PERÚ datos y análisis de los últimos años
PIB PERÚ datos y análisis de los últimos añosPIB PERÚ datos y análisis de los últimos años
PIB PERÚ datos y análisis de los últimos años
 
Alfredo Gabriel Rodriguez Yajure Tarea#1
Alfredo Gabriel Rodriguez Yajure Tarea#1Alfredo Gabriel Rodriguez Yajure Tarea#1
Alfredo Gabriel Rodriguez Yajure Tarea#1
 
Investigacion cualitativa y cuantitativa....pdf
Investigacion cualitativa y cuantitativa....pdfInvestigacion cualitativa y cuantitativa....pdf
Investigacion cualitativa y cuantitativa....pdf
 
Evolución de la fortuna de la familia Slim (1994-2024).pdf
Evolución de la fortuna de la familia Slim (1994-2024).pdfEvolución de la fortuna de la familia Slim (1994-2024).pdf
Evolución de la fortuna de la familia Slim (1994-2024).pdf
 
Cesar Vilchis Vieyra Cesar Vilchis Vieyra
Cesar Vilchis Vieyra  Cesar Vilchis VieyraCesar Vilchis Vieyra  Cesar Vilchis Vieyra
Cesar Vilchis Vieyra Cesar Vilchis Vieyra
 
Industria musical de EUA vs Industria musical Corea del Sur (2024).pdf
Industria musical de EUA vs Industria musical Corea del Sur (2024).pdfIndustria musical de EUA vs Industria musical Corea del Sur (2024).pdf
Industria musical de EUA vs Industria musical Corea del Sur (2024).pdf
 

[Measure Camp Madrid 2019] Google Tag Manager - Custom Templates (Plantillas Personalizadas)

  • 1. Google Tag Manager - Custom Templates (Plantillas Personalizadas) David Vallejo @thyng 25 Mayo 2019
  • 3. Hasta Ahora ... La cantidad de tags de vendors soportados por Google Tag Manager era limitada… Muchos de los píxeles más utilizados ( Facebook … ), no estaban soportados, y muchos de los nuevos añadidos pasaban desapercibidos.
  • 4. ¿Qué son las plantillas personalizadas? Los Custom Templates nos van a permitir crear plantillas de tags y variables en Google Tag Manager Para poder integrar cualquier herramienta o third Party vendor en nuestros contenedores.
  • 5. ¿Y esto no se podía hacer ya con Custom HTML? Si. Pero los Custom HTML no disponían De ningún control de permisos, ni corrían bajo Un entorno cerrado ( sandbox ), ni eran reutilizables, ni disponían de librerías específicas para realizar las tareas más comunes A la hora de añadir un pixel ( crear cookies, cargar un JS , etc ), y por supuesto no eran tan intuitivas una vez configuradas.
  • 9. ● Se programan en JavaScript,pero no tendremos acceso a las funciones standard de JS. Todo se ejecuta bajo un sandbox limitado. ● Deberemos cargar las librerías que nos ofrece GTM ( para escribir mensajes en la consola, para leer y declarar variables globales, para cargar archivos externos, para lanzar pixeles, … ) ● Podremos utilizar “partes” de ES6 ( uso de const, let y arrow functions, en un futuro se añadirán más )
  • 10. Listado de API’s Disponibles ( Se añadirán más en el futuro ) Link: https://developers.google.com/tag-manager/templates/api
  • 11. Disponen de opciones de validación para “forzar” a los usuarios a que introduzcan de manera correcta los campos en los tags
  • 12. Se pueden configurar los mensajes de error, personalizar los textos de ayuda, los valores por defecto, con el fin de poder ayudar a los usuarios primerizos a entender qué valores deben introducir en los campos de los tags
  • 13. Control preciso de permisos. Por cada una de las API’s que carguemos podremos definir qué permisos tendrá nuestra plantilla, por ejemplo desde que URL’s se podrán inyectar scripts, o a qué variables globales tendrá acceso nuestro tag.
  • 15. Reutilizables: Si tenemos que hacer un update a nuestros tags, por ejemplo para Añadir una nueva funcionalidad o cambiar el dominio desde el cual cargamos el script, con tan solo actualizar nuestra plantilla, todos los tags se verían beneficiados de manera automática.
  • 17. ● Más control y “governancia” sobre lo que hacen los usuarios en los contenedores. Las plantillas personalizadas están pensadas para el entorno lo más seguro posible, de ahí que corra todo bajo un sandbox limitado. ● Incluso podríamos bloquear a través del dataLayer el lanzamiento de Custom Scripts y de esta manera obligar a los usuarios a utilizar plantillas. ( Sin probar )
  • 18. ● Posibilidad de descarga de plantillas realizadas por otros profesionales y compañeros de profesión. No sería descabellado en pensar que un futuro allá algún tipo de marketplace que además de ofrecer plantillas, pueda incluso a través del API de Google Tag Manager añadirlas con tan solo un click, e include incluir la posibilidad de avisar cuando hay updates de estas plantillas o actualizarlas automáticamente.
  • 19. ● Estandarización de funciones ( no tendremos 4 funciones diferentes en 4 tags para escribir cookies ) ● Mejores prácticas de programación ( al utilizar el API, nos obligaremos a tener que hacer las cosas de una manera concreta y optimizada ,que nos ayudará a coger hábitos ) ● Evitaremos la sobreescritura de variables de manera accidental. ( la mayoría de APIs comprobarán si una variable ya existe antes de inicializarla)
  • 20. Pero No Todo Es Tan Bonito ...
  • 21. Learning Curve + Limitaciones Al no utilizar las funciones habituales de JS y estar todo bajo el sandbox nos llevará un tiempo aprender a utilizar todos estos nuevos los APIs así como hacernos con las limitaciones que ellos mismo imponen.
  • 22. Learning Curve + Limitaciones Al no utilizar las funciones habituales de JS y estar todo bajo el sandbox nos llevará un tiempo aprender a utilizar todos estos nuevos los APIs así como hacernos con las limitaciones que ellos mismo imponen.
  • 23. Missing Libraries, Funcionalidades Seguramente, en algún momento nos veremos limitados por los API’s ofrecidos por el editor de plantillas, pero Google irá añadiendo nuevas funcionalidades según se vayan reclamando/necesitando.
  • 24. Lecturas Recomendadas ¿ Quieres saber más sobre Custom Templates o Google Tag Manager en General ? No búsques más.
  • 25. Lecturas Recomendadas Custom Templates Guide For Google Tag Manager ( Simo Ahava ) https://www.simoahava.com/analytics/custom-templates-guide-for-google-tag-manager/ Create Facebook Pixel Custom Tag Template ( Video - Simo Ahava ) https://www.youtube.com/watch?v=5ESEtwq7fxc ¿ Quieres saber más sobre Custom Templates o Google Tag Manager en General ? No búsques más. Simo-san ( @simoahava ) tiene todas las respuestas:
  • 26. Lecturas Recomendadas Tag Manager: Introducing Custom Templates ( Blog Google ) https://blog.google/products/marketingplatform/analytics/tag-manager-introducing-custom-templates/ Documentación Oficial https://developers.google.com/tag-manager/templates/