Crear un píxel personalizado de Google Tag Manager

Precaución

Los píxeles personalizados son una función avanzada que requiere conocimientos de JavaScript. El cumplimiento de las leyes aplicables, los consentimientos, la seguridad del código, la resolución de problemas y las actualizaciones es tu responsabilidad. Los píxeles están sujetos a los Shopify Terms of Service.

Shopify no brinda soporte para agregar ni usar píxeles personalizados. Si necesitas ayuda para agregarlos o usarlos, puedes contratar a un Shopify Partner.

Puedes usar Google Tag Manager (GTM) como píxel personalizado para gestionar los píxeles externos.

Cuando estés listo para probar el píxel personalizado de GTM, usa el Shopify Pixel Helper para asegurarte de que todos los eventos de los que quieres hacer seguimiento se agreguen al sandbox sin errores.

También puedes usar la extensión de página Google Tag Assistant para probar qué etiquetas de Google se cargan en la página. Sin embargo, la función Troubleshoot tag de Google Tag Assistant no es compatible con los píxeles personalizados y no detecta ninguna etiqueta de Google en un píxel personalizado ni otros píxeles cargados por GTM.

Nota

Antes de crear un píxel personalizado, deberías revisar las aplicaciones disponibles para mejorar la estabilidad, la seguridad y el rendimiento. Sin embargo, si no hay una aplicación que cumpla con tus necesidades, puedes usar Google Tag Manager como píxel personalizado.

Preparación 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 que entiendes cómo configurar el píxel:

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

Crear un píxel personalizado de Google Tag Manager

Puedes crear un píxel personalizado de Google Tag Manager para gestionar tus píxeles externos.

Haz crecer tu negocio

Este es un tutorial avanzado y Shopify no ofrece soporte. Si necesitas ayuda para agregar un píxel personalizado, puedes contratar a un Shopify Partner.

Pasos:

1. Abre tu cuenta de Google Tag Manager y selecciona la cuenta con la que quieres configurar un píxel personalizado.
2. Haz clic en Administrador y luego en Instalar Google Tag Manager para abrir el código de instalación.
3. Copia el bloque de código que va en la sección head de una página.
4. Quita las etiquetas HTML del bloque de código. Por ejemplo, <script></script>.
5. Inserta el código restante en un nuevo Shopify Custom Pixel.
6. Subscribe to customer events and push to GTM’s dataLayer.
7. Para ver cómo debe mostrarse el código, consulta el example Google Tag Manager custom pixel.
8. Configure Google Tag Manager to accept events from your Custom Pixel.
9. Opcional: si hay llamadas existentes a dataLayer.push(event) en el archivo checkout.liquid, entonces replace it with analytics.publish().

Suscríbete a eventos del cliente y envía a la capa de datos de GTM

Puedes suscribirte a eventos del cliente usando el dataLayer de GTM en el código del píxel personalizado.

De forma predeterminada, hay un conjunto de standard events a los que puedes suscribirte. Si quieres hacer seguimiento de eventos del cliente que no forman parte de los eventos estándar, puedes publish your own custom events from Liquid template files.

A continuación, se muestra un ejemplo de suscripción al evento estándar "product_viewed", que indica cuando alguien ve un producto. Cuando se activa el evento, se envía al dataLayer.

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

En este ejemplo, el nombre del producto se envía en la carga del evento. Puedes usar Google Tag Manager variable para capturar el nombre del producto desde la carga del evento en la etiqueta que prefieras.

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 Google Tag Manager. Para enviar más eventos al dataLayer, puedes suscribirte a más eventos estándar y personalizados.

Nota

Este ejemplo de píxel también incluye configuraciones de ejemplo que reflejan Google Consent Mode v2, un modo que permite que un píxel respete las preferencias de consentimiento de cookies de quienes visitan el sitio para el tráfico, incluido el proveniente del Espacio Económico Europeo (EEE). Puedes obtener más información en consent mode from Google Ads Help.

Es posible que estas configuraciones de ejemplo no coincidan con lo que requiere la tienda según la legislación de la región sobre privacy. Si necesitas ayuda para agregar o personalizar la configuración de consentimiento en el píxel personalizado, consulta Google's Set up consent mode on websites guide o hire a Shopify Partner.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_shipping_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Configurar Google Tag Manager para aceptar eventos desde el píxel personalizado

Después de crear el píxel personalizado, debes configurar Google Tag Manager para aceptar eventos desde el píxel. Para hacerlo, necesitas una etiqueta, un activador y variables de dataLayer en Google Tag Manager.

En la siguiente tabla se muestran algunos ejemplos de eventos estándar del cliente y sus equivalentes en Google Tag Manager:

Lista de eventos estándar del cliente en Shopify para usar con píxeles, comparados con sus eventos equivalentes en Google Tag Manager, además del activador necesario para que se activen.

Evento de Shopify	Activador	Evento de GTM
payment_info_submitted	Enviar información de pago	add_payment_info
checkout_address_info_submitted	Enviar información de envío	add_shipping_info
product_added_to_cart	Agregar un artículo al carrito de compras	add_to_cart
checkout_started	Iniciar el proceso de pago	begin_checkout
checkout_completed	Completar el pago	purchase
product_removed_from_cart	Quitar un artículo del carrito	remove_from_cart
cart_viewed	Ver el carrito de compras	view_cart
product_viewed	Ver la página del producto	view_item
collection_viewed	Ver una lista de artículos	view_item_list

Los parámetros de evento de la etiqueta de GTM deben coincidir con expected naming conventions para que se procesen los eventos de dataLayer del píxel personalizado.

Algunos ejemplos de propiedades de eventos de dataLayer de píxel personalizado y sus parámetros de evento equivalentes en Google Analytics 4 (GA4) son los siguientes:

Lista de eventos de dataLayer de píxel personalizado con la convención de nombres de GA4

Eventos de dataLayer de píxel personalizado	Parámetros de evento de GA4
event.data?.checkout?.currencyCode	currency
event.data?.checkout?.totalPrice?.amount	value
event.data?.checkout?.order?.id	transaction_id
event.data?.checkout?.discountAllocations	coupon
event.data?.checkout?.shippingLine?.price?.amount	shipping
event.data?.checkout?.totalTax	tax
event.data?.checkout?.lineItems	items

Este es un ejemplo con el siguiente evento checkout_completed:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

El activador de Google Tag Manager es un tipo de evento personalizado con el nombre de evento checkout_completed. El campo Event name del activador debe coincidir con la clave event del píxel personalizado.

Las variables orderId y currency son las que se usan en Google Tag Manager para capturar los datos del evento. Se pueden asignar a una variable de dataLayer en Google Tag Manager. Cada variable del evento requiere su propia variable de dataLayer. Configura el activador para que se active en todos los eventos personalizados.

Crea una etiqueta que use el activador que acabas de crear. En los parámetros del evento, agrega las variables que quieres capturar. En el ejemplo anterior, orderId, currency, price, shippingLine y totalTax se configurarían como variables de dataLayer. Cada vez que se active la etiqueta, capturará esas variables de dataLayer con el evento.

Ten en cuenta que, para que ocurra la transferencia de datos, debes configurar al menos una etiqueta y un activador en Google Tag Manager.

Reemplazar las llamadas antiguas a dataLayer.push(event) por analytics.publish()

Si ya configuraste Google Tag Manager antes, debes reemplazar las llamadas a dataLayer.push por llamadas a Shopify.analytics.publish(). Puedes encontrar las llamadas a dataLayer.push en los archivos theme.liquid, en la sección Diseño del editor de temas.

También debes reemplazar las llamadas a dataLayer.push en checkout.liquid. Sin embargo, como checkout.liquid no es compatible con Shopify Extensions, debes usar una extensión de la UI para enviar datos a los píxeles web.

A continuación, se muestra un ejemplo simplificado de cómo se realiza el seguimiento de un evento personalizado de registro por correo electrónico usando dataLayer en archivos theme.liquid:

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

El equivalente en Shopify se muestra así 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, agrega algo como esto:

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

Reemplazar las llamadas antiguas a dataLayer.push(data)

Google Tag Manager tiene una función que permite enviar un objeto dataLayer con estado en cada evento. Aunque el entorno aislado 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 que se publique cualquiera de los eventos personalizados:

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

Luego, cuando quieras incluir datos personalizados, pásalos al método publish:

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

Nota

Por el momento, Shopify no permite agregar datos personalizados a los eventos estándar. Si es algo que necesitas, puedes publicar eventos personalizados propios para reemplazar los eventos estándar.

Consejos para configurar Google Analytics 4

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

URLs de página más limpias

Cuando GA4 se ejecuta en un entorno aislado, es posible que notes que las URLs de las páginas incluyen información sobre el entorno en el que se ejecuta. Si quieres quitar la información del entorno de esas URLs, puedes desactivar el seguimiento automático de páginas de GA4 e implementar uno propio usando 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 un evento propio en dataLayer, puedes crear una etiqueta page_view de GA4 que se active con el evento page_viewed. Por lo general, puedes usar el tipo de etiqueta Google Analytics: GA4 Event y establecer el nombre del evento en page_view. Después de configurar el tipo de etiqueta y el nombre del evento, agrega un parámetro para page_location y asígnale el mismo valor que pasaste a dataLayer desde el píxel personalizado.

Medición mejorada

Cuando se carga GA4 dentro del entorno aislado de píxeles de Shopify, algunos eventos que normalmente se infieren de forma automática deben configurarse manualmente. Por ejemplo, los clics en enlaces salientes, que forman parte de la configuración de medición mejorada de GA4, no pueden activarse automáticamente por razones de seguridad cuando se usan píxeles personalizados. Sin embargo, es posible implementar los eventos de medición mejorada de GA4 como eventos personalizados.

El código siguiente incluye un ejemplo simplificado de cómo hacer seguimiento de clics en 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 de GA4 que envíe el clic del enlace a GA4 y asegúrate de que el nombre del evento sea click para coincidir con la nomenclatura de eventos mejorados de GA4.

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

Probar y depurar el píxel personalizado

Cuando estés listo para probar el píxel personalizado de GTM, usa el Shopify Pixel Helper para asegurarte de que todos los eventos de los que quieres hacer seguimiento se agreguen al sandbox sin errores.

También puedes usar la extensión de página Google Tag Assistant para probar qué etiquetas de Google se cargan en la página. Sin embargo, la función Troubleshoot tag de Google Tag Assistant no es compatible con los píxeles personalizados y no detecta ninguna etiqueta de Google en un píxel personalizado ni otros píxeles cargados por GTM.