miércoles, 28 de diciembre de 2016

El aumento de Referrals desde cdn.ampproject.org de tus páginas AMP



El AMP-HTML es un formato estricto que se aloja en servidores de Google. Cuando una página AMP es llamada desde el buscador de Google, se carga la página en caché y no la página en tu servidor.

Eso es parte importante del funcionamiento de AMP y no va a cambiar. Y ya que es posible poner Google Analytics al sitio Web usando el formato AMP estricto, pues no debería haber ningún problema.

Pero resulta que las páginas AMP se cargan en un dominio externo (cdn.ampproject.org), y los link entre dominios no transfieren la cookie.

Para solucionar el problema, hay que configurar Google Analytics para que excluya de los referral el dominio cdn.ampproject.org.



Aún no hay soporte AMP para el cross domain tracking. Esperamos que este tema se resuelva en el mediano plazo. De hecho la versión de Tag Manager para páginas AMP no entrega como opción la definición del cookieDomain u otras herramientas que nos permitan resolver este tema:

GA en AMP de Google Tag Manager

Ojala tengamos alguna solución en el mediano plazo.



martes, 27 de diciembre de 2016

Cómo instalar Google Tag Manager en tu sitio Web

 

Video con instrucciones para instalar Google Tag Manager en un sitio Web, siguiendo el nuevo formato de dos piezas de código. Pido disculpas por el audio. Ejemplo de instalación: header.php de un theme de Wordpress. Incluye tip para uso de dataLayer.

TRANSCRIPCIÓN:

Hola, mi nombre es Daniel Guajardo y les voy a enseñar cómo se instala  Google Tag Manager en un sitio Web.

Muy simple, paso uno, tienen que ir a Google Tag Manager, que está en la URL http://tagmanager.google.com

Ahí tienen que ingresar con su cuenta de Google, en este caso un Gmail, y cuando se abre Tag Manager por primera vez, lo primero que les pide es que creen una cuenta.

Al crear la cuenta les pregunta cómo se debe llamar la cuenta, obviamente, tienen que elegir un nombre adecuado, después lo pueden cambiar eso es importante.

No es necesario que compartan información con Google de manera anónima, pero si quieren hacerlo, está bien, no va pasar nada malo.

Al presionar continuar, les va preguntar qué tipo de contenedor se va instalar en el sitio.

Primero ponen nombre al contenedor del sitio Web, y luego qué tipo de contenedor van a elegir.

En este caso vamos a usar el contenedor Web.

También hay contenedores para iOS y para Android, que requieren la instalación de un SDK en la aplicación; y ahora hay un contenedor para AMP, que es el HTML-amplificado, en algún momento del futuro les voy a explicar como se hace.

Después les dice que acepten los términos de servicio, obviamente si no los aceptan no pueden usar la herramienta, así que tienen que decir que bueno obligatoria mente. De todas maneras les recomiendo que lo lean, es una buena práctica leer las políticas de servicio.

Y una vez que aceptan aparece esto: una pequeña pantalla con dos piezas de código. Está dividida en dos partes, la primera se llama Script , que se instala en el <head>; y la siguiente es el NoScript que se instala después de <body>.

La principal diferencia es que el Script es un Javascript que llama a librerías desde Google, y la segunda parte es un Iframe donde se implementan algunas de esas librerías.

Es importante que estén las dos. He visto sitios que funcionan correctamente solo con el Script, pero al momento de validar al código no valida si no están las dos, así que recomiendo la instalación completa,.

Para el ejemplo voy a utilizar un theme de Wordpress, el típico que viene con Wordpress cuando uno lo instala.

Y para instalar GTM vamos al documento header.php

Que es el documento donde están todas las cabeceras del sitio y la gracia de esto es que una vez que se instala GTM una sola vez, queda instalado en todas las páginas del sitio y no es necesario instalarlo muchas veces en distintas páginas. Esa es la principal gracia de trabajar con Wordpress.

Este es el código fuente de header.php, son las principales treinta y algo líneas de código de Wordpress.

El código Script como dice la instrucción, se instala inmediatamente después de la apertura de <head>, ahí está marcado con una flecha. Yo simplemente copio y pego, no tengo que hacer nada más.

Importante, esto lo estoy editando en un bloc de notas. Es el Notepad++, que permite editar directamente el código fuente con formato. Por eso se ve con colores.

Ahora instalo el código NoScript, copié y pegué, después de <body>. No hay ninguna ciencia al respecto. Simplemente copié y pegué. Ahora lo que tengo que hacer es guardar y subir vía FTP al sitio Web. Y ya está instalado.

Después vía Tag Manager puedo instalar Analytics, códigos de Facebook, de Twitter, de AdWords, Double Click, de lo que necesiten.

Ahora, un tip importante, si van a usar dataLayer, que es una herramienta de Tag Manager,  que no es obligatoria pero hay veces en que uno necesita usarlo,  dataLayer tiene que estar instalado en ese punto, entre <head> y el código Script de Tag Manager.

De otra manera, Tag Manager no va a leer la data que está instalada dentro del dataLayer para que ustedes la puedan utilizar.

Eso es.  Cualquier duda o consulta, déjenla en los comentarios del video.

Y pronto voy a tener una nueva transmisión explicando algo más acerca de Tag Maganer.

miércoles, 16 de noviembre de 2016

El dataLayer y la nueva implementación de Google Tag Manager



Desde hace poco menos de un mes GTM cambió la instrucción para instalar su código. Lo que antes era solo una pieza que se copiaba y pegaba después de <body>, ahora está compuesto por dos piezas de código: Script, que se pega después de <head>; y NoScript, que se pega después de <body>.

El funcionameinto de la plataforma y el código es el mismo. El cambio probablemente obedece a nuevas implementaciones desde Analytics 360, Optimizer y otras ramas del mundo Google. Poner el código en dos piezas en vez de una sola representa la misma cantidad de trabajo, así que no debería ser un problema...

El dolor de cabeza comienza cuando usamos un dataLayer impreso en el código antes de </head>. Con la instalación antigua el dataLayer funcionaba a la perfección; pero con la nueva, sencillamente dejó de funcionar.

Ahora, la solución es igual de simple. El dataLayer impreso en el código se debe resolver antes de llamar al código de GTM. Y el primer código de GTM, el Script, se instala justo después de <head>. Ergo, el código de dataLayer se deme incluir inmediatamente después de <head>, antes del código Script de GTM.

<!DOCTYPE html>
<html lang='es-ES'>
<head>
<script>
dataLayer = [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- otros códigos del sitio Web -->

</head>

<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->