Agregar píxeles personalizados

Si no hay ninguna aplicación para hacer seguimiento de eventos específicos de clientes sobre los que deseas recopilar datos, puedes agregar un píxel personalizado que se ejecute en un entorno de prueba permisivo.

Cuando agregas un píxel personalizado, especificas la siguiente información:

  • el píxel de JavaScript externo
  • los eventos de comportamiento que deseas seguir

Preparar el código de píxel externo

El servicio externo con el que estás trabajando te proporciona el código que está integrado con el píxel. Un píxel, generalmente, tiene dos componentes: un SDK y un código de seguimiento. Debe eliminarse cualquier HTML del código de servicio externo, ya que el entorno de prueba de píxel de Shopify solo admite JavaScript.

A continuación se incluye un ejemplo de un píxel de Meta. Ten en cuenta que los píxeles diferirán levemente de una empresa a otra.

​​<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

Después de eliminar el HTML del código de Meta, te quedan el SDK del píxel de Meta y el código para inicializarlo. También el código de seguimiento de eventos PageView se ha eliminado, pues será agregado en el siguiente paso.

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

Puedes encontrar píxeles que se cargan usando script src=. El HTML no se admite en los píxeles de Shopify, por lo que deberás reemplazarlo con su equivalente de JavaScript.

Aquí hay un ejemplo de un píxel de Google Analytics:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

La parte de script src= se puede reemplazar con el siguiente equivalente de JavaScript. Asegúrate siempre de que tu atributo src coincida con la versión HTML:

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

Suscribirse a eventos estándar

Después de cargar e inicializar el SDK del píxel, debes transferirle eventos para el seguimiento. Esto se logra al suscribirse a eventos y, posteriormente, pasar los datos de dichos eventos al SDK del píxel para que el servicio externo los procese.

Shopify ofrece un conjunto estándar de eventos que permite asegurarse de que el píxel está recopilando los datos que necesita.

Puedes suscribirte a eventos usando la API de la extensión de píxeles de Shopify. Deberás colocar el código de píxel externo en el evento al que te estás suscribiendo.

Este es un ejemplo del evento de PageView para el píxel de Meta. Ten en cuenta que fbq("track") forma parte del código de Meta y cada empresa tendrá su propia versión para la que deberás consultar su documentación.

analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

Algunos eventos tienen metadatos que puedes pasar a tu píxel. Este es un ejemplo de cómo pasar algunos detalles del producto al evento de Meta ViewContent:

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Agregar un píxel personalizado

Antes de agregar un píxel personalizado, elimina los píxeles existentes para asegurarte de que los eventos del cliente no se contabilicen dos veces. El código de píxel existente se debe eliminar manualmente de cualquier lugar en el que exista; por ejemplo, en theme.liquid, checkout.liquid (solo para comerciantes de Shopify Plus) y en otros scripts de pago.

  1. Desde tu panel de control de Shopify, ve a Configuración >.Eventos de cliente.
  2. Dale un nombre único a tu píxel. Si introduces el nombre de un píxel personalizado que ya existe, se te pedirá que uses un nombre diferente.
  3. Haz clic en Agregar píxel para abrir el editor de eventos.
  4. Pega el píxel de JavaScript externo en la ventana Código.
  5. Agrega los eventos de los que deseas hacer seguimiento en el esquema adecuado.
  6. Opcional: haz clic en Más acciones para editar el nombre de tu píxel o ver información sobre cómo contratar a un experto de Shopify para que te ayude con tus píxeles personalizados.
  7. Haz clic en Guardar para guardar tu píxel personalizado. Si ya estás listo/a para conectar tu píxel personalizado, puedes hacer clic en Conectar píxel para comenzar a hacer seguimiento de tus eventos.

Conectar un píxel personalizado

Una vez que se ha agregado un píxel personalizado, debes conectar el píxel a tu tienda.

  1. Desde la página Eventos del cliente en tu panel de control de Shopify, haz clic en Píxeles personalizados.
  2. Los píxeles personalizados que no están actualmente conectados se muestran bajo el encabezado Píxeles desconectados. Haz clic en Conectar en la línea del píxel personalizado.
  3. Revisa los Términos del Servicio de Shopify. Si tu píxel cumple con los requisitos del servicio, haz clic en Conectar.

Ejemplos de píxeles personalizados

Píxel de Meta personalizado

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

analytics.subscribe("search_submitted", event => {
  fbq('track', 'Search', {
    search_string: event.search_value
  });
});

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

analytics.subscribe("payment_info_submitted", event => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", event => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", event => {
  fbq('track', 'PageView');
});

Desconectar píxeles personalizados

Si deseas dejar de hacer seguimiento de los eventos para los que agregaste un píxel personalizado, debes desconectar manualmente el píxel de tu tienda online.

Pasos:

  1. Desde la página Eventos del cliente en tu panel de control de Shopify, haz clic en Píxeles personalizados.
  2. Los píxeles personalizados que están conectados actualmente se muestran en la parte superior de tu lista de píxeles personalizados. Haz clic en Desconectar en la línea del píxel personalizado correspondiente. Desconectar el píxel no lo elimina.

Eliminar píxeles personalizados

Puedes eliminar los píxeles personalizados que ya no necesites.

Pasos:

  1. Desde la página Eventos del cliente en tu panel de control de Shopify, haz clic en Píxeles personalizados.
  2. Haz clic en el botón ... en la línea del píxel personalizado que corresponda.
  3. Haz clic en Eliminar. Confirma la eliminación y el píxel personalizado se eliminará del gestor de píxeles.

La eliminación de un píxel personalizado no se puede deshacer, así que asegúrate de que estés eliminando el píxel correcto.

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

Prueba gratis