¿Dónde lo encuentro?
Canal de ventas > Tienda web > Editar > Atributos
Después, haz clic en la pestaña Branding And Social en la parte inferior:
A continuación, desplázate hacia abajo y encontrarás la configuración de Google Analytics y Google Tag Manager:
¿Qué significa?
En este artículo, explicaremos cómo configurar tu cuenta de Google Tag Manager para realizar el seguimiento y analizar los eventos de tu tienda web de Palisis.
¿Qué debo hacer?
Antes de comenzar, asegúrate de seguir todos los pasos de la configuración inicial de nuestra integración con Google Tag Manager, ya que es un requisito para continuar con esta guía. Si no lo has hecho, dirígete al artículo de soporte y completa primero estos pasos.
Ten en cuenta que, para seguir esta guía, se necesitan conocimientos básicos sobre el uso de Google Analytics y Google Tag Manager.
En el siguiente artículo se utilizarán los términos «marco principal» y «marco secundario».
- Marco principal: hace referencia a la página web principal que contiene uno o más iframes. Es como la ventana principal de la página web.
- Marco secundario: un marco secundario es un iframe integrado dentro del marco principal. Es como una ventana más pequeña dentro del marco principal en la que se muestra contenido externo, como otra página web o un widget.
Introducción
Lo que haremos será integrar una etiqueta de Google independiente en la tienda web de Palisis y añadir un script personalizado a la etiqueta de Google en los marcos principal y secundario, para que estas dos etiquetas puedan comunicarse entre sí y podamos enviar los eventos de seguimiento del marco secundario al principal, y del principal a Google Tag Manager, que está vinculado a Google Analytics.
Al final, deberás tener dos contenedores independientes en Google Tag Manager: uno para el marco principal y otro para el marco secundario, que corresponde a la URL de la tienda web de Palisis.
Parte 1: añadir un script HTML personalizado a la etiqueta de Google principal
Paso 1: ve a la etiqueta de Google de tu marco principal
Paso 2: añade una etiqueta nueva
Paso 3: la configuración de la etiqueta es «HTML personalizado»
Paso 4: copia y pega en el campo de código el código HTML personalizado del marco principal que aparece a continuación
Paso 5: sustituye la URL de «var childorigin» por la URL real de tu tienda web de Palisis.
Paso 6: en Activación, selecciona «Vistas de página»
Paso 7: envía y publica los cambios en el espacio de trabajo de Google Tag
Paso 8: después de publicar correctamente la etiqueta de Google, habremos terminado la parte 1
Vídeo sobre cómo añadir el script HTML personalizado a la etiqueta de Google principal
Código HTML personalizado que se integrará en la etiqueta de Google de la página web principal
Sustituye la URL en «var childOrigin = 'https://myshop.palisis.com';" por la URL real de tu tienda web de Palisis.
<script> (function() { // set the iframe domain name (e.g https://domainname.com) var childOrigin = 'https://myshop.palisis.com'; // Creating current timestamp just for console log var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var year = date.getFullYear(); var time = date.getTime(); var currentDate = day + '-' + month + '-' + year + '-' + time; console.log("Parent Frame: Loaded - " + currentDate); // Maximum time in milliseconds to wait for GA tracker to load. // Again, irrelevant for GA4. var maxGATime = 20000; // Don't touch anything that follows var pollInterval = 2000; //console.log('Parent Frame: child origin ' + childOrigin); var postCallback = function(event) { console.log("(parent) Child Origin: " + event.origin); // event origin doesn't match with childOrigin then do nothing if (event.origin !== childOrigin) return; console.log('Parent frame: (recieve) data: ' + event.data); if (event.data !== 'childReady' && !event.data.event) return; if (event.data === 'childReady') { console.log('Parent frame: sending parentReady to child'); // Send event that parent is ready event.source.postMessage('parentReady', event.origin); var pollCallback = function() { // Stop polling if maxTime reached maxGATime -= pollInterval; if (maxGATime <= 0) window.clearInterval(poll); // Only proceed if GA loaded and tracker accessible var cookie = {}; window.document.cookie.split(';').forEach(function(el) { var splitCookie = el.split('='); var key = splitCookie[0].trim(); var value = splitCookie[1]; cookie[key] = value; }); console.log("Parent frame: Client ID - " + cookie["_ga"].substring(6)); var ga_client_id = cookie["_ga"].substring(6); if (ga_client_id) { // Send message back to frame with Client ID event.source.postMessage({ event: 'clientId', clientId: ga_client_id }, event.origin); // Stop polling if not already done so window.clearInterval(poll); } }; // Start polling for Google Analytics tracker var poll = window.setInterval(pollCallback, pollInterval) } // Push dataLayer message from iframe to dataLayer of parent if (event.data.event) { console.log("Parent frame: dataLayer from iframe: " + event.data.event); window.dataLayer.push(event.data); } }; // Start listening for messages from child frame window.addEventListener('message', postCallback); })(); </script>
Parte 2: añadir un script HTML personalizado a la etiqueta de Google secundaria
Debes saber cómo añadir eventos GA4 personalizados en Google Tag Manager. Si no estás seguro o ya no lo recuerdas, dirígete al artículo de soporte sobre la integración inicial con Google Tag Manager artículo de soporte.
Paso 1: crea una etiqueta de Google nueva para tu marco secundario o, si ya tienes una independiente para él, cambia a ella.
Paso 2: añade todos los eventos GA4 personalizados «add_to_cart», «purchase», «remove_from_cart», «begin_checkout» y «add_payment_info». Cuando hayas terminado, continúa con el paso 3. Si no sabes cómo añadir estos eventos GA4, consulta el artículo de soporte sobre la integración inicial con Google Tag Manager.
Paso 3: añade una etiqueta nueva
Paso 4: la configuración de la etiqueta es «HTML personalizado»
Paso 5: copia y pega en el campo de código el código HTML personalizado del marco secundario que aparece a continuación
Paso 6: sustituye la URL de «var parentOrigin» por la URL real de tu dominio principal
Paso 7: para la activación, selecciona «Vistas de página» y todos los eventos personalizados cuyo seguimiento quieras realizar, como «purchase» o «add_to_cart».
Paso 8: envía y publica los cambios en el espacio de trabajo de Google Tag
Paso 9: inicia sesión en tu Backoffice de Palisis, dirígete a Canales de ventas → Online → Tienda web y selecciona tu tienda web. Haz clic en «editar», ve a «Branding And Social», desplázate hacia abajo hasta «ID de Google Tag Manager», introduce el código GTM-XXXXXX de la etiqueta de Google secundaria, activa «Google Analytics Ecommerce» y haz clic en «guardar».
Paso 10: después de publicar correctamente la etiqueta de Google, habremos terminado la parte 2
Captura de pantalla en la que debes introducir el código GTM-XXXXXX en la configuración de la tienda web de Palisis
Vídeo sobre cómo añadir el script HTML personalizado a la etiqueta de Google secundaria
Código HTML personalizado que se integrará en la etiqueta de Google de la página web secundaria
Sustituye la URL en «var parentOrigin = 'https://mywebsite.com';» por el dominio real de tu sitio web. Importante: debe ser el dominio y no la página específica en la que está integrada la tienda web de Palisis.