Wed. Feb 19th, 2025

Administrador de etiquetas de Google: seguimiento de interacciones sociales


(Última actualización en junio de 2014) Google Analytics nos proporciona una manera ingeniosa de seguimiento de interacciones sociales. Con un complemento easy, puedes realizar un seguimiento de cuántos +1 y Me gusta acumulan tus páginas.

Esta guía le muestra cómo activar el etiquetado de interacciones sociales con Google Tag Supervisor y Common Analytics. Las instrucciones son para Me gusta de Fb y +1 de Google+ (ahora en desuso desde Google Analytics rastrea los +1 automáticamente), tweets de Twitter y pines de Pinterest.

Tenga en cuenta que si utiliza una API de terceros (p. ej. Agregar esto) estos trucos probablemente no funcionen. Deberá utilizar las funciones API para habilitar el seguimiento.


incógnita


El boletín a fuego lento

Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.

Configurar macros de interacción social

Bueno, antes que nada, necesitarás un montón de macros para recopilar los datos de sus acciones sociales.

Entonces, comencemos con Google Tag Supervisor.

Pasos:

  • Crear una nueva versión de contenedor
  • Cree una nueva macro de persuasión de variable de capa de datos y asígnele un nombre crimson social
  • Agregar crimson social como nombre de la variable
  • guardar la macro
  • Cree una nueva macro de variable de capa de datos y asígnele un nombre acción social
  • Agregar acción social como nombre de la variable
  • guardar la macro
  • Cree una nueva macro de variable de capa de datos y asígnele un nombre Objetivo social
  • Agregar objetivo social como nombre de la variable
  • guardar la macro

Ahora creó tres macros importantes, todas las cuales facilitan el seguimiento de las interacciones sociales a través del Administrador de etiquetas de Google. Pink pasará el nombre de la crimson social a la que pertenece la acción (por ejemplo, Fb), Acción pasará el nombre de la acción realizada (por ejemplo, Me gusta), y Objetivo pasará el nombre de la página en la que ocurrió la acción (por ejemplo http://www.ejemplo.com/post1).

Configurar la etiqueta de envío

Para que los eventos de interacción social aparezcan en Google Analytics, deben enviarse (otra vez). Para enviar una interacción social, debe crear una etiqueta que tendrá las macros que acabamos de crear como argumentos. Luego, esta etiqueta se configura para activarse tras una acción social.

  1. Crear una nueva etiqueta de Common Analytics
  2. Dale un nombre (como enviar redes sociales)
  3. Añade tu ID de seguimiento (es mejor guardarlo como una macro)
  4. Elegir Social como el tipo de pista
  5. Agregue sus macros como argumentos (consulte la imagen a continuación para obtener pistas)
  6. Colocar {{evento}} es igual a socialInt como regla de despido (volveremos a esto pronto)
  7. Guardar etiqueta

Aquí creamos una nueva etiqueta que alberga los argumentos que tendrá la interacción social. La regla de despido está preparada para esperar un evento llamado socialintque enviaremos desde nuestras etiquetas de acción social.

Configurar me gusta en Fb

No explicaré cómo agregar un botón Me gusta de Fb a tu página, tendrás que hacerlo tú mismo. Fb tiene una gran guía y herramienta detrás este enlace que te ayudará a crear el código necesario.

Sin embargo, una vez que tenga el botón en su lugar, deberá realizar un seguimiento de los clics de alguna manera. Esto se hace usando un función de devolución de llamada. Una devolución de llamada es una función que se ejecuta inmediatamente después de que se haya completado un evento.

A continuación se explica cómo crear la función de devolución de llamada en GTM.

Pasos:

  • Cree una nueva etiqueta HTML personalizada (o use una sola etiqueta para todas sus devoluciones de llamada para compartir en redes sociales)
  • Dale un nombre (por ejemplo Acciones sociales)
  • Agregue el siguiente código:
<script>
if (typeof FB !== 'undefined'){
  FB.Occasion.subscribe('edge.create',
      perform(href) {
          dataLayer.push({
              'occasion': 'socialInt', 
              'socialNetwork': 'Fb', 
              'socialAction': 'Like', 
              'socialTarget': href
          });
      }
  );
}
script>
  • Se activa después de que se haya cargado DOM ({{evento}} es igual a gtm.dom)
  • Guardar etiqueta

Bien, aquí está la función de devolución de llamada Me gusta de Fb. Al hacer clic en el botón Me gusta, se llama a esta función. Antes de que se devuelva el management a la página, el evento desencadenante de la Enviar redes sociales etiqueta (socialint) se inserta en la capa de datos. Después de eso, también se pasan los tres argumentos requeridos. El valor para objetivo social es hrefque es uno de los parámetros de la función de devolución de llamada y representa la URL de la página en la que ocurrió el evento.

Al usar FB.Evento.Suscribirsepuede escuchar varios eventos diferentes (por ejemplo, envío de mensajes, inicio de sesión). Consulta las opciones disponibles en el guía de desarrollo de fb.

Configurar Google +1

ACTUALIZAR: Tenga en cuenta que esto ya está bastante obsoleto, ya que Google Analytics y Common Analytics realizan un seguimiento de los +1 automáticamente.

Nuevamente, no te voy a decir cómo agregar el botón a tu página. Es muy easy y puedes encontrar una buena guía. aquí.

Con Google+, debes especificar la devolución de llamada como argumento en la etiqueta del botón. Con Fb esto se automatizó. Tenga en cuenta que hay una serie de eventos para los cuales puede especificar una devolución de llamada: clics, la interacción comienza (cuando alguien pasa el cursor o hace clic en el botón) y la interacción finaliza (cuando alguien cierra la burbuja +1). Simplemente elegí el clic porque es la forma más sencilla de realizar un seguimiento (aunque un poco inexacta).

Elegí enviarMás como nombre de la función de devolución de llamada. Un código de botón de muestra sería entonces:

<g:plusone href="http://instance.com" dimension="customary"  annotation="none" callback="sendPlus">g:plusone>

Tenga en cuenta que la referencia de los desarrolladores tiene la devolución de llamada como devolución de llamada de datospero esto parece funcionar también.

Ahora para configurar la función de devolución de llamada.

  • Cree una nueva etiqueta HTML personalizada (o use una sola etiqueta para todas sus devoluciones de llamadas sociales)
  • Dale un nombre (por ejemplo Google Plus uno)
  • Agregue el siguiente código:
<script>
perform sendPlus(g) {
    dataLayer.push({
        'occasion': 'socialInt', 
        'socialNetwork': 'Google', 
        'socialAction': '+1', 
        'socialTarget': g.href
    });
};
script>
  • Activar en todas las páginas ({{url}} coincide con RegEx.*)
  • Guardar etiqueta

Básicamente es lo mismo que con Fb.

Esta función de devolución de llamada secuestra el clic en el botón +1 y envía el materials necesario a la capa de datos antes de devolver el management a la página.

Configurar tweets

Para configurar una función de devolución de llamada de Tweet, deberá utilizar eventos de intención internet. Agregan funcionalidad adicional de JavaScript (como la opción de declarar una función de devolución de llamada) a su botón Tweet.

Inicializa los widgets de Twitter con el siguiente código en tu elemento HEAD:

window.twttr = (perform (d,s,id) {
  var t, js, fjs = d.getElementsByTagName(s)(0);
  if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
  js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: (), prepared: perform(f){ t._e.push(f) } });
}(doc, "script", "twitter-wjs"));

No es necesario realizar ninguna modificación en el código del botón de Tweet (siempre que no esté implementado a través de una API de terceros, como AddThis).

En su etiqueta HTML personalizada para compartir en redes sociales, agregue el siguiente código:

if (typeof twttr !== 'undefined') {
  twttr.prepared(perform (twttr) {
    twttr.occasions.bind('click on', clickEventToAnalytics);  
  });
}
perform clickEventToAnalytics() {
  dataLayer.push({
    'occasion': 'socialInt', 
    'socialNetwork': 'Twitter', 
    'socialAction': 'tweet', 
    'socialTarget': window.location.href
  });
}

Aquí vincula el evento CLICK para que funcione. haga clic en EventToAnalytics. Hay un montón de eventos diferentes a tu disposición y puedes encontrarlos en el documentación de desarrolladores.

Observe cómo uso la variable international de JavaScript ventana.ubicación.href como objetivo esta vez.

Configurar Pinterest Pin It

Pinterest es un poco problemático, ya que cuando cargas el script pinit.js, reemplaza cualquier código que hayas usado en las etiquetas de enlace. Esto es problemático porque Pinterest no proporciona ninguna función de devolución de llamada, por lo que el impulso para compartir en redes sociales debería agregarse directamente al código del enlace. Con pinit.js, cualquier modificación que realice se borrará al cargar la página.

Sin embargo, puedes hacer un seguimiento de tus pines usando seguimiento automático de eventos. Con un Hyperlink Click on Listener implementado, cree una etiqueta HTML personalizada con el siguiente contenido:

<script>
  dataLayer.push({'occasion': 'socialInt', 'socialNetwork': 'Pinterest', 'socialAction': 'Pin It', 'socialTarget': window.location.href});
script>

La regla de despido para esto es:

{{evento}} es igual a gtm.linkClick
{{clases de elementos}} contiene pin_it_button

Entonces, una vez que se hace clic en el botón Pin It (el enlace tiene “pin_it_button” en su larga lista de nombres de clases), esta etiqueta HTML personalizada empuja el evento a la capa de datos, después de lo cual se activa su etiqueta de evento para compartir en redes sociales.

Implementación de prueba

Ahora tiene sus funciones de devolución de llamada que proporcionan los datos, las macros que almacenan los datos y la etiqueta Common Analytics que envía los datos. ¡Maravilloso!

Guarde su versión de contenedor y publíquela.

Ahora vaya a una página de su sitio donde se puedan encontrar los botones. Utilice un depurador como Firebug o las herramientas de desarrollo de Chrome y cargue la página. Presta atención a la Pink pestaña en su depurador, y haz clic en Me gusta o +1. Debería ver que sucede algo, es decir, una solicitud GET para www.google-analytics.com. Consulte los encabezados de esta solicitud y debería ver algo como esto:

Aquí puede ver los parámetros de consulta.

sa es Acción Social (Me Gusta)
sn es Pink Social (Fb)
calle es Social Goal (URL de la página)

Por supuesto, no olvides consultar el propio Google Analytics (los datos pueden tardar algún tiempo en aparecer).

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *