Crear código de píxel personalizado

Advertencia

Los píxeles personalizados son una función avanzada que requiere conocimientos de JavaScript. Cumplir las leyes aplicables, gestionar los consentimientos, garantizar la seguridad del código, resolver problemas y realizar 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 agregar o usar un píxel personalizado, puedes hire a Shopify Partner.

Esta página incluye instrucciones para crear el código de un píxel personalizado de terceros, para que puedas hacer seguimiento de eventos específicos del cliente. Después de crear el código del píxel personalizado, puedes add the pixel to your Shopify store.

Nota

Antes de crear un píxel personalizado, deberías review available apps para mejorar la estabilidad, la seguridad y el rendimiento. Sin embargo, si no hay ninguna app que se ajuste a tus necesidades, puedes crear un píxel personalizado.

Preparativos para crear un píxel personalizado

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

• Risks associated with pixels.
• Limitations of Shopify's pixels sandbox.
• Using the Shopify pixels sandbox API.
• Customer event tracking schema.

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

• El píxel de JavaScript de un tercero.
• Los eventos de comportamiento a los que quieres hacer seguimiento.
• La configuración de consentimiento de privacidad del cliente.

Crear el código de un píxel personalizado

Haz crecer tu negocio

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

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

1. Prepare the third-party Javascript SDK.
2. Configura el píxel para track customer events.
3. Configura consent settings for customer privacy para el píxel.

Preparar el SDK de JavaScript de terceros

El servicio de terceros con el que trabajas te proporciona el código que se integra con el píxel. Un píxel suele tener dos componentes: un SDK de JavaScript y el código de seguimiento. Debes eliminar cualquier HTML del código del servicio de terceros, ya que el entorno sandbox de píxeles de Shopify solo admite JavaScript.

Aquí tienes un ejemplo de un píxel de Meta. Los píxeles variarán ligeramente de un tercero a 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 se quitó el código de seguimiento del evento PageView, porque se agregará 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);

El SDK del píxel de Meta no transmite datos automáticamente desde un píxel personalizado de Shopify. Para transmitir datos, debes subscribe to events.

Es posible que encuentres píxeles que se cargan con script src=. Los píxeles de Shopify no admiten HTML, así que debes reemplazar script src= por el equivalente en JavaScript.

Este es un ejemplo de píxel de Google Analytics que se carga con script src=:

<!-- 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 script src= se puede reemplazar por el equivalente en JavaScript. Asegúrate siempre de que el atributo src coincida con la versión en 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');

El SDK del píxel de Google no transmite datos automáticamente desde un píxel personalizado de Shopify. Para transmitir datos, debes suscribirte a eventos.

Haz seguimiento de los eventos del cliente

Después de cargar e inicializar el SDK del píxel, debes pasarle los eventos para hacer su seguimiento. Para ello, suscríbete a los eventos y luego envía los datos del evento al SDK del píxel para que el servicio externo los procese.

Suscríbete a eventos estándar

Shopify ofrece un conjunto estándar de eventos que facilita garantizar que el píxel recopile los datos que necesita.

Puedes suscribirte a eventos con la Shopify Pixels Extension API. Debes incluir el código del píxel externo junto con el evento al que te suscribes.

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

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

Algunos eventos incluyen metadatos que puedes pasar al píxel. Este es un ejemplo de cómo enviar información del producto al evento ViewContent de Meta:

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

Suscríbete a eventos personalizados del cliente

Si quieres hacer seguimiento de eventos adicionales del cliente, como cuando alguien hace clic en un botón, puedes agregar eventos personalizados del cliente. Puedes suscribirte a los eventos personalizados del mismo modo que a los estándar. Declara el nombre del evento al que quieres suscribirte y pasa la información al píxel del proveedor de servicios externo.

Este es un ejemplo de cómo podría verse un evento personalizado publicado en los archivos .liquid del tema:

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

Este es un ejemplo de cómo podrías configurar el 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 obtener más información sobre los eventos personalizados, consulta la Shopify Developer Documentation.

Configurar el consentimiento y la venta de datos

Nota

Eres responsable de cumplir con la normativa de privacidad, y debes consultar a tu asesoría legal para determinar cómo las leyes de tu región y de las regiones donde vendes pueden afectar tu negocio. Para vender productos en la plataforma de Shopify, debes cumplir las leyes de la jurisdicción de tu negocio y de tus clientes, los Shopify Terms of Service, la Shopify Acceptable Use Policy y cualquier otra política aplicable. Más información sobre la privacidad del cliente.

En los Mercados configurados para requerir consentimiento, como el Espacio Económico Europeo (EEE) y el Reino Unido, los píxeles web solo se ejecutan cuando las personas visitantes del sitio web han otorgado los permisos requeridos en la configuración del píxel.

De forma predeterminada, los píxeles personalizados nuevos requieren los permisos de marketing y de informes y estadísticas. Puedes personalizar qué permisos se requieren en la sección Privacidad del cliente > Permisos de los detalles del píxel personalizado.

Del mismo modo, los píxeles configurados como venta de datos no se ejecutarán para clientes que hayan rechazado la venta o el uso compartido de datos, a menos que el píxel admita el uso limitado de datos. De forma predeterminada, los píxeles personalizados nuevos califican como venta de datos. Puedes personalizar si los datos recopilados califican como venta de datos en la sección Privacidad del cliente > Venta de datos de los detalles del píxel personalizado.

Quienes desarrollan píxeles personalizados pueden obtener más información sobre cómo recopilar y registrar el consentimiento.

Cada píxel puede usar un nombre distinto para cada finalidad. Consulta la documentación del píxel del proveedor externo para entender cómo se corresponde con las definiciones de Shopify.

Por ejemplo, así se corresponden las finalidades de marketing y de informes y estadísticas con el Consent Mode 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 de un píxel de Meta. El código del píxel varía según el proveedor de servicios externo y los eventos de los que quieras hacer seguimiento. Consulta la referencia de eventos del cliente para ver la lista de eventos disponibles.

Ejemplo de píxel personalizado de Meta

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