Crear código de píxel personalizado

Esta página incluye instrucciones para crear un código de píxel personalizado para un píxel externo, para que puedas hacer seguimiento de eventos de clientes específicos. Después de crear el código para tu píxel personalizado, puedes agregar el píxel a tu tienda Shopify.

Nota

Antes de crear un píxel personalizado, debes consultar las aplicaciones disponibles para mejorar la estabilidad, la seguridad y el rendimiento. Sin embargo, si no hay una aplicación que se adapte a tus necesidades, puedes crear un píxel personalizado.

Prepararse para crear un píxel personalizado

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

• riesgos asociados con los píxeles
• limitaciones del entorno de prueba de píxeles de Shopify
• usar la API del entorno de prueba de píxeles de Shopify
• esquemas de seguimiento de eventos de clientes

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

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

Crear el código para un píxel personalizado

Nota

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

Crear el código para un píxel personalizado implica los siguientes pasos:

1. Preparar el SDK de Javascript externo.
2. Configurar tu píxel para hacer seguimiento de los eventos de clientes.

Preparar el SDK de Javascript 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 de Javascript 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. Los píxeles externos diferirán levemente uno del otro.

​​<!-- 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);

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Puedes encontrar píxeles que se cargan mediante script src=. El HTML no se admite en los píxeles de Shopify, por lo que deberás reemplazar script src= 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 equivalente de JavaScript. Asegúrate siempre de que el 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');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Hacer seguimiento de eventos de clientes

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.

Suscribirse a eventos estándar

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", async (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", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

Suscribirse a eventos personalizados de clientes

Si deseas hacer seguimiento de eventos adicionales de clientes, como cuando alguien hace clic en un botón, puedes agregar eventos de clientes personalizados. Los eventos personalizados se pueden suscribir de la misma manera que los eventos estándar. Establecer el nombre del evento al que deseas suscribirte y transmitir la información al píxel del proveedor de servicios externos.

Este es un ejemplo de cómo un evento personalizado publicado podría aparecer en los archivos Liquid de tu tema:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Este es un ejemplo de cómo puedes configurar tu píxel para suscribirte a ese evento personalizado:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Para más información sobre eventos personalizados, consulta la documentación para desarrolladores de Shopify.

Configuración del consentimiento

Los píxeles web se ejecutan solo cuando los visitantes han dado su consentimiento para fines de Marketing e Informes y estadísticas en mercados que has configurado como de consentimiento obligatorio. Cada píxel puede tener un nombre diferente para cada propósito. Te recomendamos que consultes la documentación del píxel para entender cómo se mapea según las definiciones de Shopify.

Por ejemplo, la siguiente es la forma en que los propósitos de Marketing e Informes y estadísticas se asignan al Mode de consentimiento de Google:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Ejemplo de píxel personalizado

A continuación se muestra un ejemplo del código para un píxel de Meta. El código de píxel variará según el proveedor de servicios externos y los eventos a los que desees hacer seguimiento. Consulta la referencia de eventos del cliente para ver una lista de eventos disponibles.

Nombre de píxel 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');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

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

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

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

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

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});