Crear un píxel personalizado de Google Tag Manager

Esta página incluye instrucciones sobre cómo usar Google Tag Manager (GTM) como píxel personalizado para gestionar tus píxeles externos.

Nota

Te recomendamos que consultes las aplicaciones disponibles antes de crear píxeles personalizados para mejorar la estabilidad, la seguridad y el rendimiento. Sin embargo, si no hay ninguna aplicación que se adapte a tus necesidades, puedes usar Google Tag Manager como píxel personalizado.

Prepararse para crear un píxel personalizado

Antes de crear un píxel personalizado con Google Tag Manager, revisa la siguiente información para asegurarte de entender cómo configurar tu píxel:

• Crea o abre una cuenta de Google Tag Manager y obtén el ID de contenedor de GTM.
• Por motivos de seguridad, los administradores de etiquetas cargados en nuestro entorno de prueba tienen las mismas restricciones que cualquier otro píxel. Más información sobre las limitaciones del entorno de prueba de píxeles.

Crear un píxel personalizado de Google Tag Manager

Nota

Este es un tutorial avanzado para el que Shopify no presta asistencia técnica. Si necesitas ayuda para agregar píxeles personalizados, puedes contratar a un experto de Shopify.

Pasos

1. Abre tu cuenta de Google Tag Manager y selecciona la cuenta con la que deseas configurar un píxel personalizado.
2. Haz clic en el panel de control y luego en Instalar Google Tag Manager para abrir el código de instalación.
3. Copia el bloque de código que pertenece a la sección head de una página.
4. Elimina las etiquetas HTML de este bloque de código.
5. Inserta el código restante en un nuevo píxel personalizado de Shopify.
6. Inicializa el objeto dataLayer con window.dataLayer = window.dataLayer || [];.

El código del píxel personalizado debería tener un aspecto similar al siguiente y el valor de GTM-XXXXXXX debería coincidir con el ID de contenedor de GTM.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

Suscribirse a eventos de cliente y enviarlos a dataLayer de GTM

En lugar de agregar llamadas dataLayer.push() a los archivos de plantilla de Liquid, harás todo el trabajo de dataLayer de GTM en el código del píxel personalizado.

Por defecto, hay un conjunto de eventos personalizados estándar a los que puedes suscribirte, pero también puedes publicar tus propios eventos personalizados desde archivos de plantilla de Liquid.

A continuación hay un ejemplo de suscripción al evento estándar "product_viewed", que indica cuando alguien ve un producto. Cuando se activa el evento, este se inserta en dataLayer.

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

En este ejemplo, se pasan datos sobre el título del producto que, mediante variables de Google Tag Manager, se pueden reenviar a otras etiquetas.

Reemplazar las llamadas de la versión anterior de dataLayer.push(event) por analytics.publish()

Si ya configuraste Google Tag Manager, debes reemplazar las llamadas a dataLayer.push por llamadas a Shopify.analytics.publish().

A continuación se muestra un ejemplo simplificado de un evento de registro de correo electrónico con un seguimiento mediante dataLayer.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

El equivalente en Shopify tiene este aspecto y envía los datos al píxel personalizado.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Luego, en el código del píxel personalizado, agregarías algo similar a esto:

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Reemplazar la versión anterior de dataLayer.push(data)

Google Tag Manager tiene una función que te permite enviar un objeto de capa de datos de estado en cada evento. Si bien el entorno de prueba de píxeles de Shopify no incluye una función equivalente, puedes lograr el mismo resultado creando tu propio objeto de datos y pasándolo a eventos personalizados.

Por ejemplo, define un objeto "customData" antes de publicar cualquiera de tus eventos personalizados.

<script>
  const customData = {email: customer.email}
</script>

Luego, cuando quieras incluir los datos personalizados, pásalo al método de publicación.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Nota

Shopify no admite la adición de datos personalizados a eventos estándar en este momento. Si lo necesitas, puedes publicar tus propios eventos personalizados para reemplazar eventos estándar.

Ejemplo de píxel personalizado de Google Tag Manager

El siguiente ejemplo es una versión simplificada de un píxel personalizado de Google Tag Manager que muestra cómo enviar datos a GTM. Para enviar más eventos a dataLayer, puedes suscribirte a más eventos estándar y personalizados.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Trucos y consejos para configurar Google Analytics 4

Ten en cuenta los siguientes consejos para configurar Google Analytics 4 (GA4) cuando utilices Google Tag Manager como píxel personalizado.

URL de página más limpias

Cuando GA4 se ejecuta en un entorno de prueba, quizá notes que las URL de la página incluyen información sobre el entorno de prueba en el que está funcionando. Si deseas eliminar la información del entorno de prueba de esas URL, puedes desactivar el seguimiento automático de páginas de GA4 e implementar uno propio mediante el evento estándar page_viewed.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Después de publicar tu propio evento en dataLayer, puedes crear una etiqueta page_view de GA4 que se active en el evento page_viewed. Normalmente, puedes usar el tipo de etiqueta de evento Google Analytics: GA4 y establecer el nombre del evento en page_view. Después de establecer el tipo de etiqueta y el nombre del evento, debes agregar un parámetro para page_location y establecer el valor en el mismo valor que pasaste a la capa de datos desde el píxel de cliente.

Medición mejorada

Cuando se carga GA4 dentro del entorno de prueba de píxel de Shopify, algunos eventos que normalmente se infieren de forma automática tendrán que configurarse de forma manual. Por ejemplo, los clics en el enlace saliente, como parte de la configuración de medidas mejoradas de GA4, no se pueden activar automáticamente por razones de seguridad cuando se usan píxeles personalizados. Sin embargo, puedes implementar eventos de medición mejorados de GA4 por tu cuenta como eventos personalizados.

El código que se indica a continuación incluye un ejemplo simplificado de seguimiento de clics de enlaces salientes.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Por último, en GTM, crea una etiqueta GA4 que envíe el clic del enlace a GA4, asegurándote de que el nombre del evento sea click para que coincida con el nombre de evento mejorado de GA4.

Puedes realizar el mismo seguimiento para cualquiera de las métricas de medición mejoradas de Google.

Pruebas y depuración

Nota

El asistente de etiquetado de Google no funciona con píxeles personalizados. El uso de la extensión del navegador Google Analytics Debug enviará la señal de depuración a GA4 para que los eventos se muestren en la aplicación.

1. Abre tu tienda Shopify en un navegador Chrome.
2. Abre la pestaña de red en el navegador y busca la solicitud llamada collect?..., que contiene tu ID de medición de GA4 si los datos se envían a GA4 desde Google Tag Manager.
3. En tu cuenta de Google Analytics, haz clic en panel de control y luego en Vista de depuración.
4. Asegúrate de tener la extensión de Google GA Debug agregada al navegador Chrome:
   • Activa GA Debug.
   • Abre tu tienda Shopify en otra pestaña.
   • Regresa a GA4 en la vista de depuración y revisa los eventos page_viewed.