Insertar etiqueta de eventos de Google Analytics

Google Analytics permite medir acciones específicas dentro de un sitio web, logrando una personalización en los informes. Estas acciones se conocen como «eventos» y requieren un marcado extra.

En este artículo revisaremos cómo incluir esta función en formularios y enlaces, independiente del código de Google Analytics que se esté usando para la medición de impacto.

Entiendo el código

Para integrar los eventos es necesario agregar una instrucción JavaScript sobre el elemento HTML que desea medirse. Esta instrucción está conformada por cuatro variables. Ellas son:

• CATEGORY: Es el nombre que se asigna al conjunto de elementos comunes a los que se realiza seguimiento.
• ACTION: Es como se denomina la interacción a la que se realiza seguimiento.
• LABEL: Información específica del elemento al que se realiza seguimiento.
• VALUE: Es el valor de medición. Puede ser numérico, monetario, temporal.

En la explicación de este artículo se utilizarán los siguientes datos:

• CATEGORY: publicidad
• ACTION: clic
• LABEL: epm
• VALUE: 1

El código base de seguimiento

Como se mencionó anteriormente, existen dos maneras de integrar Google Analytics a un sitio o página web: analytics.js y gtag.js. Es importante que conozca cuál método está implementado en su sitio web.
Para analytic.js se utiliza este código:

ga('send', 'event', 'category', 'action', 'label', value);

Así, teniendo presente los valores expresados, el código ya personalizado sería:

ga('send', 'event', 'publicidad', 'clic', 'epm', 1);

Por su parte, el código de gtag.js es:

gtag('event', 'action', { 'event_category': 'category', 'event_label': 'label', 'value': 'value'});

Su personalización sería:

gtag('event', 'clic', { 'event_category': 'publicidad', 'event_label': 'epm', 'value': '1'});

Insertar código JS a un formulario

Para este ejemplo, el evento tendrá lugar una vez el usuario envíe los datos ingresados en el formulario.

Para la versión analytic.js se define un formulario con el siguiente parámetro:

<form action="#" method="post" onsubmit="ga('send', 'event', 'publicidad', 'clic', 'epm', 1);">

La version gtag.js:

<form action="#" method="post" onsubmit="gtag('event', 'clic', { 'event_category': 'publicidad', 'event_label': 'epm', value': '1'});">

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

Insertar evento en un enlace

El proceso es muy similar al formulario. La diferencia está en el parámetro de etiqueta. Para los enlaces se utiliza el comportamiento onclick si se quiere que el evento tenga lugar una vez el usuario presione el enlace.

La versión analytics.js:

<a href="#" onclick="ga('send', 'event', 'publicidad', 'clic', 'epm', 1);">Rótulo de navegación</a>

Para gtag.js

<a href="#" onclick="gtag('event', 'clic', { 'event_category': 'publicidad', 'event_label': 'alcaldia', 'value': '1'});">Rótulo de navegación</a>

Proceso en video

En este video de mi canal YouTube explico el procedimiento, utilizando un sitio web real soporta en WordPress.

En el canal YouTube «Escuela Digital» puedes encontrar más videos sobre el tema.

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

Apoya la producción de la Escuela Digital desde PayPal.me

Con una taza de chocolate todo sabe mejor ¿Nos invitas a una?

¡Vamos por los 20.000 suscriptores en YouTube! Suscríbete

—

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Insertar etiqueta de eventos de Google Analytics por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional. Basada en una obra en https://e-lexia.com/blog.