Crear un píxel personalizado de Google Tag Manager

Esta página fue impresa el May 20, 2024. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial.

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

En esta página

Prepararse para crear un píxel personalizado
Crear un píxel personalizado de Google Tag Manager

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

Pasos:

Abre tu cuenta de Google Tag Manager y selecciona la cuenta con la que deseas configurar un píxel personalizado.
Haz clic en el panel de control y luego en Instalar Google Tag Manager para abrir el código de instalación.
Copia el bloque de código que pertenece a la sección head de una página.
Elimina las etiquetas HTML del bloque de código. Por ejemplo, <script></script>.
Inserta el código restante en un nuevo píxel personalizado de Shopify.
Suscribirse a eventos de cliente y enviarlos a dataLayer de GTM.
Para revisar cómo debería verse el código, consulta el ejemplo del píxel personalizado del administrador de etiquetas de Google.
Configura Google Tag Manager para que acepte eventos de tu Custom Pixel.
Opcional: Si tienes llamadas de dataLayer.push (evento) existentes en tu archivo checkout.liquid, reemplázalo por analytics.publish().

Suscribirse a eventos de cliente y enviarlos a la capa de datos de GTM

Puedes suscribirte a los eventos de clientes usando la dataLayer de GTM en el código de tu píxel personalizado.

De forma predeterminada, hay un conjunto de eventos estándar de cliente a los que puedes suscribirte. Sin embargo, si deseas hacer un seguimiento de los eventos de cliente que no forman parte de la oferta de eventos estándar, puedes publicar tus propios eventos personalizados desde los archivos de plantillas de Liquid.

A continuación hay un ejemplo de suscripción al evento estándar product_viewed, que avisa 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, el nombre del producto se transfiere en la carga del evento. Puedes usar una variable de Google Tag Manager para capturar el nombre del producto a partir de la carga del evento en tu etiqueta de elección.

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 esta herramienta. Para enviar más eventos a tu dataLayer, puedes suscribirte a más eventos estándar y personalizados.

// 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,
  });
});

Configura Google Tag Manager para que acepte eventos de tu Custom Pixel

Después de crear el píxel personalizado, debes configurar Google Tag Manager para aceptar eventos del píxel personalizado. 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 de clientes y sus equivalentes de Google Tag Manager:

Lista de eventos estándar de clientes de Shopify y sus eventos equivalentes en GTM
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	Finalizar el proceso de pago	compra
product_removed_from_cart	Eliminar artículo del carrito	remove_from_cart
cart_viewed	Ver carrito de compras	view_cart
product_viewed	Ver la página de detalles del producto	view_item
collection_viewed	Consultar una lista de artículos	view_item_list

Los parámetros de eventos de etiqueta de GTM deben coincidir con las convenciones de nomenclatura previstas para que tus eventos de dataLayer de píxel personalizado se procesen.

A continuación te mostramos algunos ejemplos de propiedades de eventos de dataLayer de píxel personalizado y sus parámetros de eventos de Google Analytics 4 (GA4):

Seleccionar una lista de eventos de `dataLayer` de píxel personalizado con la convención de nomenclatura de GA4
Eventos de `dataLayer` de píxel personalizado	Parámetros de eventos de GA4
`event.data?.checkout?.currencyCode`	`Moneda`
`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`

A continuación te mostramos un ejemplo usando 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 checkout_completed. El campo Nombre del evento en el activador debe coincidir con la clave del evento en tu píxel personalizado.

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

Crea una etiqueta que use el activador que creaste. En parámetros de eventos, agrega las variables que desees 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, se capturarán estas variables de dataLayer con el evento.

Ten en cuenta que se debe configurar al menos una etiqueta y un activador en Google Tag Manager para que se pueda transferir datos.

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(). 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 el archivo checkout.liquid. No obstante, dado que checkout.liquid no es compatible con la extensibilidad de la pantalla de pago, debes usar una extensión de la interfaz de usuario para enviar datos a los píxeles web.

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

<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 dataLayer con 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 si creas tu propio objeto de datos y lo pasas 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>

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 dicha información 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 tu dataLayer desde el píxel personalizado.

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 medición mejorada 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 mejorada 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

Abre tu tienda Shopify en un navegador Chrome.
Agrega la extensión de Chrome anterior del asistente Google Tag a tu navegador.
Haz clic en el ícono de extensión, y luego haz clic en Habilitar.
Navega a tu sitio web y luego activa los eventos que deseas probar.
En la extensión, haz clic en la etiqueta de Google Tag Manager. La sección Capa de datos debe mostrar la carga del evento que se activó.
Cualquier otra etiqueta que se cargue con Google Tag Manager también se publica en la extensión. Puedes hacer clic en estas etiquetas para revisar los datos que se les enviaron.

Crear un píxel personalizado de Google Tag Manager

En esta página

Prepararse para crear un píxel personalizado

Crear un píxel personalizado de Google Tag Manager

Pasos:

Suscribirse a eventos de cliente y enviarlos a la capa de datos de GTM

Ejemplo de píxel personalizado de Google Tag Manager

Configura Google Tag Manager para que acepte eventos de tu Custom Pixel

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

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

Consejos para configurar Google Analytics 4

URL de página más limpias

Medición mejorada

Pruebas y depuración

¿Estás listo/a para comenzar a vender con Shopify?