¿Cómo conectar el comercio electrónico para OpenCart en GA4?

¡Hola, amigos! Hoy vamos a ver cómo configurar el comercio electrónico en OpenCart, y lo haremos de la forma más sencilla posible. Sin dolores de cabeza innecesarios ni horas y horas de complicaciones. Ya conocen mi enfoque: se configura una vez y funciona de forma estable, sin necesidad de modificaciones ni retoques constantes.

Para conectar el comercio electrónico a través de GA4, utilizaremos un complemento especial; encontrarás el enlace en esta publicación. Por cierto, si te pones en contacto con los desarrolladores, no dudes en mencionar que vienes de mi parte. Me encantará saber que el material te ha resultado útil.

Complemento SP SEO Remarketing All In One Pro 2.3.x – 3.x

¿Qué es este plugin para OpenCart? Para ser sincero, es una solución universal que cubre prácticamente todas las tareas de análisis y publicidad en este CMS.

Esto es lo que obtienes con este plugin:

• El remarketing dinámico según los requisitos actuales de Google: no se trata de plantillas obsoletas, sino precisamente de lo que la plataforma espera en este momento.
• Comercio electrónico GA4 con transmisión correcta de datos, sin fallos ni omisiones en las transacciones.
• Posibilidad de descargar el feed de productos directamente desde el panel de control.
• Integración con Google Tag Manager y transmisión de eventos a través de dataLayer.

En esencia, es el sueño de cualquier especialista en PPC, no solo un módulo.

Por separado, sobre el costo. El precio puede cambiar en el momento en que leas este material, pero puedo decir con certeza que es más barato que contratar a un programador. Incluso si tienes un desarrollador que creó el sitio web, el complemento sigue siendo más rentable. ¿Por qué? No tendrá que comprobar cada vez si el programador ha tenido en cuenta los nuevos requisitos de Google para la transmisión de eventos, ni tendrá que entender las tareas técnicas y controlar las actualizaciones.

El autor del complemento se encarga de mantener el código actualizado y lo adapta a los cambios en los algoritmos. Pagas una sola vez y lo utilizas. Sin suscripciones mensuales, como en Shopify, donde tienes que pagar una y otra vez.

Por cierto, se trata de un desarrollo ucraniano, lo cual es una ventaja adicional para quienes apoyan a los desarrolladores nacionales.

¿Qué hay que hacer como primer paso? Instalar el plugin en tu sitio web. Nos saltaremos este paso, ya que el módulo ya está instalado en el sitio web de demostración.

Configuración del módulo para Google Analytics 4

Pasemos a la parte práctica. Entra en el panel de administración de tu OpenCart. Si eres especialista en PPC, utiliza el nombre de usuario y la contraseña que te ha proporcionado el cliente.

A continuación, procedemos paso a paso:

1. Abre la sección «Extensiones».
2. En el filtro, seleccionamos «Módulos»;
3. Buscamos nuestro plugin SP SEO Remarketing en la lista;
4. Hacemos clic en el ícono del lápiz para editar.

Ya tengo el módulo parcialmente configurado, pero vamos a analizarlo todo desde cero.

¿Qué hay que hacer en primer lugar para conectar Google Tag Manager y el comercio electrónico GA4? Recomiendo configurar todos los contadores de inmediato, así evitará preguntas innecesarias y confusiones en el futuro.

Pasamos a la pestaña «Contadores» y añadimos:

• Código de Google Analytics 4: lo insertamos en el campo correspondiente.
• El código GTM para la sección head se coloca en el campo del encabezado.
• Código GTM para la sección body: lo añadimos en un campo separado más abajo.

No hay que complicarse la vida: solo hay que copiar los códigos de los servicios correspondientes de Google y pegarlos en los campos indicados. Si se sigue esta secuencia, es prácticamente imposible equivocarse.

¿Dónde encontrar el código de análisis?

Ahora veamos dónde obtener el código para Google Analytics 4. Vamos a la interfaz de análisis, a nuestra cuenta de administrador.

El camino es el siguiente:

1. Abre la sección «Administrador» (icono de engranaje en la parte inferior izquierda);
2. Buscamos y hacemos clic en «Flujos de datos»;
3. Seleccione el flujo adecuado, el que esté relacionado con su sitio web.
4. Hacemos clic en el botón «Ver instrucciones de la etiqueta».

Aquí verá el código GA4 listo para instalar en el sitio web. Cópielo, ya sea con la combinación Ctrl+C o haciendo clic en el icono especial de copiar junto al código. Vuelva a la configuración del plugin y péguelo en el campo correspondiente con Ctrl+V.

No guardemos los ajustes todavía, ya que podríamos salir del módulo y aún necesitamos añadir GTM.

Configuración del código de Google Tag Manager

El siguiente paso es conectar Google Tag Manager. ¿Para qué sirve? En resumen, GTM ofrece flexibilidad en la gestión de etiquetas sin necesidad de intervenir constantemente en el código del sitio web. Pero esto es opcional: si no necesita Tag Manager, simplemente omita este bloque y pase a la siguiente sección. Para mayor comodidad, debajo del video encontrará los códigos de tiempo.

A continuación, mostraré cómo verificar la corrección de todas las configuraciones, tanto a través de GTM como de DebugView en la propia analítica. La segunda opción es adecuada para aquellos que no desean lidiar con Tag Manager.

Entonces, si necesita GTM:

1. Cree un contenedor de Google Tag Manager (o abra uno ya existente).
2. Haga clic en el identificador del contenedor y aparecerá una ventana con dos fragmentos de código.
3. El primer código es para la sección head. Cópielo y péguelo en el campo «Header» en la configuración del plugin.
4. El segundo código es para la sección body. Cópielo y péguelo en el campo «Body».

Tenga en cuenta que en la interfaz del complemento los campos están claramente identificados como «Header» y «Body», por lo que es difícil confundirlos. Una vez insertados ambos códigos, ya está listo.

Punto adicional: ¿dónde más hay que insertar el código de Google Analytics?

Hay otro punto importante. Copie el código GA4: puede tomarlo directamente del campo donde ya lo ha insertado o volver a copiarlo desde la interfaz de Google Analytics.

Ahora pasemos a la pestaña «Comercio electrónico» en la configuración del plugin. Aquí hay que realizar varias acciones:

• El interruptor de estado debe estar en la posición «Activado». Por defecto, puede estar desactivado, así que compruébelo.
• Moneda: elija la que desee (grivna, dólar, euro, dependiendo de su tienda).
• Identificador del producto: dejamos el valor estándar «ID del producto», normalmente no es necesario cambiarlo.
• Código de seguimiento: inserte aquí el mismo código de Google Analytics 4.

En esta misma sección hay opciones adicionales, como la transmisión de datos a través de dataLayer. Sin embargo, para la configuración básica del comercio electrónico, lo mencionado anteriormente es suficiente.

Después de realizar todos los cambios, haga clic en «Guardar».

Verificación del funcionamiento del código en el sitio web mediante Google Analytics Debugger

Una vez realizados los ajustes, ahora hay que asegurarse de que todo funciona correctamente. Abrimos el sitio web en el navegador.

Para verificarlo, recomiendo instalar la extensión Google Analytics Debugger para Chrome. Ahora mismo la tengo desactivada; para activarla, solo hay que hacer clic en el ícono de la extensión. Cuando está activada, todos los eventos analíticos se muestran en la consola del navegador.

Abrimos las herramientas de desarrollo (F12) y vamos a la pestaña Consola. Utilizaremos dos métodos de verificación para comprender con exactitud si se transmiten datos o no, y si esta combinación nos conviene.

Ver los resultados a través de Google Tag Manager

La segunda forma es comprobarlo a través del modo de vista previa en GTM. Sinceramente, no es mi método favorito: si el sitio web ya no es muy rápido, con la vista previa activada, Tag Manager tardará aún más en cargarse. Pero lo muestro por si acaso, puede ser útil.

¿Qué hacemos? Abrimos cualquier ficha de producto en el sitio web. En el modo de vista previa de GTM, miramos la lista de eventos a la izquierda. Si vemos el evento view_item, significa que el seguimiento de comercio electrónico funciona. Los datos sobre la visualización del producto se transmiten a la analítica, todo está configurado correctamente.

Verificación de la transmisión de datos en Google Analytics

Ahora vamos a comprobar que los datos realmente llegan al sistema de análisis. Abrimos Google Analytics, cerramos todas las ventanas emergentes y vamos a la sección «Administrador» (icono con forma de engranaje). Buscamos la opción DebugView, que es una herramienta para depurar eventos en tiempo real.

¿Qué debemos ver aquí? El evento view_item, que se activó al ver la ficha del producto. Si ha recargado la página varias veces, habrá varios eventos; elija el último.

Hacemos clic en el evento y verificamos los parámetros. En mi caso, se trataba de una maleta-tabla de snowboard con los siguientes datos:

• item_id — 33603;
• precio — 4350,00;
• cantidad: se indica la cantidad.

Volvemos a DebugView y verificamos: el precio es 4350,00, el identificador está en su lugar, la cantidad se transmite. El formato de visualización del precio puede ser ligeramente diferente, pero los valores se transmiten correctamente, que es lo importante.

El siguiente paso es verificar el evento de añadir al carrito. Volvemos al sitio web y hacemos clic en el botón «Añadir al carrito» en cualquier producto. Ahora debería aparecer el evento add_to_cart en DebugView.

Tenga en cuenta que todo esto lo ha hecho el complemento automáticamente. Ningún programador ha tenido que sentarse a escribir cada evento manualmente. Solo ha tenido que instalar el módulo, introducir la configuración básica y la transferencia de datos de comercio electrónico ha empezado a funcionar.

Lo mismo se puede comprobar a través de la extensión Google Analytics Debugger en la consola del navegador. Allí verá el panorama completo: el evento add_to_cart, los parámetros currency, item_id, item_name, es decir, todo el conjunto de datos que se envía automáticamente al análisis sin que usted tenga que hacer nada más.

Verificación del pedido de prueba

La etapa final y obligatoria es el pedido de prueba. Sin él, es imposible asegurarse de que toda la cadena de eventos se transmite correctamente.

Buscamos el carrito en el sitio web (a veces puede estar oculto en un lugar poco visible). Al pasar al proceso de pago en GTM, debe aparecer el evento begin_checkout, que indica el inicio del proceso de compra.

Rellenamos el formulario de pedido con datos de prueba. Para no complicarnos la vida, elegimos la opción de recogida en tienda y pago en efectivo, ya que es más fácil y rápido. Hacemos clic en «Realizar pedido» y vemos qué eventos se han registrado.

¿Qué debemos ver en la vista previa de Google Tag Manager?

• add_payment_info: información sobre el método de pago.
• begin_checkout: inicio del proceso de pago.
• purchase: la compra en sí, el evento principal para el seguimiento de las transacciones.

Todo esto se transfiere automáticamente a GA4 sin necesidad de realizar ajustes adicionales. Personalmente, prefiero verificarlo a través de GTM: allí todo es claro, nada se pierde al actualizar la página y se puede examinar tranquilamente cada parámetro.

Pasamos a DebugView Analytics y verificamos que los eventos hayan llegado. En mi caso, ya se han acumulado más de una docena de eventos. Encontramos add_payment_info, begin_checkout y purchase con toda la información: transaction_id, value, lista de productos.

Un dato interesante: al revisar, descubrí unos eventos extraños llamados purchase_new que se enviaban en paralelo. No se veían en GTM, pero la extensión Google Analytics Debugger los mostró. Además, se activaban varias veces seguidas, lo que indicaba claramente que se trataba de algo innecesario que se había instalado anteriormente.

Por eso los pedidos de prueba son una práctica obligatoria. A veces encuentras cosas que ni siquiera sospechabas. Estas «sorpresas» pueden distorsionar los datos de los informes de monetización, por lo que es necesario detectarlas y eliminarlas.

En mi caso, estos eventos adicionales no son críticos: la conversión se configurará como una compra estándar, no como una compra nueva. Pero, para que el análisis sea más preciso, es mejor pedirle al desarrollador que elimine los duplicados.

Comprobamos todo en el informe en tiempo real: begin_checkout está en su lugar, purchase tiene los parámetros correctos: transaction_id coincide, value corresponde al importe del pedido. Todo concuerda.

Resultados

Eso es todo: el comercio electrónico GA4 en OpenCart está configurado y funcionando. Sin complicaciones con códigos ni integraciones complejas. El complemento ha hecho todo el trabajo: los eventos se transmiten, los parámetros se rellenan y los datos se envían al análisis.

El único inconveniente con purchase_new es la herencia de configuraciones anteriores del sitio web, que no están relacionadas con el complemento. Si se encuentra en una situación similar, simplemente busque el origen de los eventos innecesarios y elimínelos.

Y si hablamos específicamente del trabajo de SP SEO Remarketing, todo se transfirió a la perfección. Ahora Google ve el panorama completo: visitas a productos, adiciones al carrito, inicio del proceso de compra y compras completadas. Eso es precisamente lo que se necesita para un análisis completo de una tienda en línea.