--

Blogs

Inicio » Blog » Google Tag Manager - Creación de Cuenta con Implementación de Google Analytics y de Yandex Metrikapost thumb

1 nov 2017

Google Tag Manager - Creación y Publicación de Analytics / Metrika

By: Roman Kondrashov

Google Tag Manager es una herramienta útil para agregar y actualizar varias piezas de código a un sitio web sin realizar ningún cambio directamente en el código del sitio. Entonces, o con la inserción de cambios mínimos, que es poco probable que requieran ediciones en el futuro. Esta publicación revisa la creación de una cuenta de Tag Manager (en adelante, GTM) con la colocación de su código en el sitio y la publicación de los contadores de Google Analytics (GA) y Yandex-Metrika (YM). La publicación es real a finales de 2017 (hay capturas de pantalla de la interfaz moderna de Tag Manager).

1. Cree una cuenta y agregue un contenedor de GTM Container al código del sitio

Vaya a https://tagmanager.google.com/ y cree una nueva cuenta (si aún no la tiene). En el primer campo, agregue el nombre de la cuenta y en el segundo campo (Setup Container) debe ser el nombre del contenedor (en realidad, el contador) en la forma de la URL de nuestro sitio. También haga clic en "Web" (Dónde utilizar el contenedor).

gtm_init-uno

Haga clic en el botón Crear y en la siguiente pantalla acuerde con el Acuerdo de Condiciones de Servicio de Google Tag Manager.

Tenemos 2 fragmentos de código. El primero debe insertarse en el head de su sitio (cuanto más alto, mejor) y el segundo, directamente después del body tag.

gtm_code

¿Hecho? Ok. La interfaz del Google Tag Manager está frente a usted:

gtm_interfaceoverall_e
  • Contenedor (Container) es una pieza de código JS que se coloca en todas las páginas del sitio. Dentro del contenedor hay información sobre etiquetas que se activan mediante la ejecución de ciertas reglas especificadas en activadores y variables;
  • Etiqueta (Tag) es un fragmento de código de sitio que le permite rastrear el tráfico y analizar el comportamiento del usuario, la conversión, etc. (por ejemplo, el código de Yandex Metrika);
  • Activadores (Triggers) determinan cuándo activar la etiqueta en un contenedor web;
  • Variables son un par "nombre-valor", que se utiliza en el activador como una condición bajo la cual se activará la etiqueta.

Será más claro aún más :).

2. Instalar Google Analytics a través del Google Tag Manager

Agregue la Etiqueta de Google Analytics:

gtm_addtag

Llámalo 'GA Base Tag' y selecciona el tipo Universal Analytics en la sección Configuración de la etiqueta (Configuration section):

gtm_gabasetaginit

A continuación, haga clic en Select Setting Variable en el elemento de Google Analytics Settings y seleccione Nueva variable (New variable) en la lista desplegable:

gtm_gabasetag

Vemos la variable sin título (Untitled Variable),vamos a llamarla gaProperty. Las propiedades pueden esconderse de ti. A continuación, haga clic en Configuración de variable (Variable Configuration) para devolverlos. Ingrese el código de Universal Analytics:

gtm_gaproperty

El código se puede encontrar en la sección ADMIN / Property Settings en la interfaz de GA o directamente en el código del sitio si ya está instalado en el sitio (se parece al UA-12345678-1). Clic en Guardar:

gtm_gaconf

Ahora va a la subsección Triggering (Activación).

Para que la etiqueta funcione en todas las páginas, especifique el Trigger "Todas las páginas" (All pages).

gtm_allpagestrigger

Haga clic en GUARDAR. Entonces sería necesario hacer clic en ENVIAR. Pero antes de publicar primero ingresemos al modo de vista previa para verificar los cambios realizados.

2.1. Panel de depuración (Debug Pane) en Google Tag Manager

Presione PREVIEW (VISTA PREVIA) para verificar los cambios.

Luego, en ese navegador (marcado en Google Chrome y Firefox),donde inició sesión en GTM, vaya a su sitio (o actualice la página si ya está abierto) y desplácese hacia abajo en la página. El Panel de depuración debería mostrarse a continuación. Si el Contenedor aparece debajo de la línea "Tags Not Fired On This Page", la etiqueta en la página no funcionó. Es necesario verificar todas las configuraciones y corregir cualquier error. Si el Contenedor aparece debajo de la línea "Tags Fired On This Page", Universal Analytics se instala sin ningún error.

gtm_chromeext_e

Ahora en GTM, presionamos SUBMIT y nombrar de alguna manera la versión actual de los cambios. Después de eso, puede presionar PUBLISH:

gtm_gapublish

Por lo tanto, hemos implementado Google Analytics a través de GTM sin interferir con el código fuente de las páginas. Puede salir del Preview Mode.

3. Implementar Yandex Metrika a través del Google Tag Manager

Siga los mismos pasos que para Google Analytics para configurar Yandex Metrika.

Crea una nuevo Tag etiqueta. Sin embargo, en su configuración no verá Yandex Metrika (ya que simplemente no está en la lista de tipo de etiqueta por defecto),por lo tanto, especifique 'HTML personalizado' (Custom HTML).

gtm_metrikainit

Debes insertar el código del contador de Metrika en este formulario HTML:

gtm_ymcode_e

Copie el código del contador del código fuente de la página, si YM ya está instalado en el sitio.

Nota. Como en el caso de Google Analytics, no es necesario que coloque el código de Metrika en el código del sitio. El código YM resultante, cuando se configura, se debe copiar y agregar a la ventana "HTML personalizado" que apareció en el paso anterior. El desencadenador se creó antes, es el 'Todas las páginas' (All pages).

Ahora revisamos nuevamente la funcionalidad en el modo "Vista previa" o inmediatamente lo publicamos.

Por lo tanto, publicamos Yandex Metrika en el sitio sin interferir con el código fuente de las páginas.

PD: No olvide eliminar el código GA y YM del código del sitio si estaba allí antes.

Puede ser útil:

Construimos sitios web

Nuestro servicio