Crear código do píxel personalizado

Precaución

Os píxeles personalizados son unha función avanzada que require coñecementos de JavaScript. O cumprimento coas leis e consentimentos aplicables, así como coa seguridade do código, a resolución de problemas e as actualizacións son a túa responsabilidade. Os píxeles están suxeitos aos Termos de servizo de Shopify.

Shopify non ofrece soporte para engadir e usar píxeles personalizados. Se necesitas axuda para engadir ou usar un píxel personalizado, podes contratar un Partner de Shopify.

Esta páxina inclúe instrucións para crear o código do píxel personalizado para un píxel de terceiros, para que poidas rastrexar eventos de clientes específicos. Despois de crear o código para o teu píxel personalizado, podes engadir o píxel á túa tenda de Shopify.

Nota

Antes de crear un píxel personalizado, debes revisar as aplicacións dispoñibles para obter unha maior estabilidade, seguridade e rendemento. Non obstante, se non hai unha aplicación que cumpra coas túas necesidades, podes crear un píxel personalizado.

Preparación para crear un píxel personalizado

Antes de crear un píxel personalizado, revisa a seguinte información para asegurarte de que entendes como configurar o teu píxel:

• Riscos asociados aos píxeles.
• Limitacións da contorna de probas dos píxeles de Shopify.
• Usar a API da contorna de probas dos píxeles de Shopify.
• Esquema de seguimento de eventos de clientes.

Cando engades un píxel personalizado, especificas a seguinte información:

• O píxel de JavaScript de terceiros.
• Os eventos de comportamento que queres rastrexar.
• A configuración de consentimento para a privacidade do cliente.

Crear o código para un píxel personalizado

Fai medrar o teu negocio

Este é un tutorial avanzado e non ten soporte de Shopify. Se precisas axuda para engadir un píxel personalizado, podes contratar un Partner de Shopify.

A creación do código para un píxel personalizado inclúe os seguintes pasos:

1. Preparar o SDK de JavaScript de terceiros.
2. Configurar o píxel para rastrexar eventos de clientes.
3. Configurar a configuración de consentimento para a privacidade do cliente para o teu píxel.

Preparación do SDK de JavaScript de terceiros

O servizo de terceiros co que traballas proporciónache o código que se integra co píxel. Un píxel adoita ter 2 compoñentes: un SDK de JavaScript e o código de seguimento. É necesario eliminar calquera HTML no código do servizo de terceiros, xa que a contorna de probas do píxel de Shopify só admite JavaScript.

Aquí tes un exemplo dun píxel de Meta. Os píxeles difiren lixeiramente dependendo do provedor externo.

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

Despois de eliminar o HTML do código de Meta, quédache o SDK do píxel de Meta e o código para inicializalo. Tamén se eliminou o código de seguimento do evento PageView, porque se engadirá no seguinte 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);

O SDK do píxel de Meta non transmite automaticamente os datos desde un píxel personalizado de Shopify. Para transmitir datos, tes que subscribirte aos eventos.

Pode que atopes píxeles que se cargan mediante script src=. O HTML non é compatible cos píxeles de Shopify, polo que terás que substituír script src= polo seu equivalente en JavaScript.

Aquí tes un exemplo de píxel de Google Analytics que se carga mediante 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>

A porción script src= pódese substituír polo seu equivalente en JavaScript. Asegúrate sempre de que o teu atributo src coincida coa 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');

O SDK do píxel de Google non transmite automaticamente os datos desde un píxel personalizado de Shopify. Para transmitir datos, tes que subscribirte aos eventos.

Rastrexar eventos de clientes

Despois de cargar e inicializar o SDK do píxel, debes pasarlle os eventos para facer o seguimento. Para iso, tes que subscribirte aos eventos e, a continuación, pasar os datos dos eventos ao SDK do píxel para que os procese o servizo de terceiros.

Subscribirse a eventos estándar

Shopify ofrece un conxunto estándar de eventos, o que facilita garantir que o teu píxel estea a recoller os datos que necesita.

Podes subscribirte a eventos coa Shopify Pixels Extension API. Terás que colocar o código do píxel de terceiros no evento ao que te subscribes.

Este é un exemplo do evento PageView para o píxel de Meta. Ten en conta que fbq("track") forma parte do código de Meta, e cada empresa terá a súa propia versión, polo que deberás consultar a súa documentación.

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

Algúns eventos teñen metadatos que podes pasar ao píxel. Aquí tes un exemplo de como pasar algúns detalles de produto ao 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,
  });
});

Subscribirse a eventos de clientes personalizados

Se queres rastrexar eventos de clientes adicionais, como cando alguén fai clic nun botón, podes engadir eventos de clientes personalizados. Podes subscribirte aos eventos personalizados do mesmo xeito ca aos eventos estándar. Declara o nome do evento ao que te queres subscribir e pásalle a información ao píxel do provedor do servizo de terceiros.

Este é un exemplo de como podería aparecer un evento personalizado publicado nos ficheiros Liquid do teu tema:

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

Este é un exemplo de como poderías configurar o píxel para que se subscriba a ese evento personalizado:

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

Para obter máis información sobre os eventos personalizados, consulta a documentación para desenvolvedores de Shopify.

Configuración do consentimento e da venda de datos

Nota

Es responsable de cumprir as leis de privacidade e debes consultar a túa asesoría xurídica para determinar como poden afectar o teu negocio as leis da túa rexión e da rexión onde vendes. Para vender produtos na plataforma de Shopify, debes cumprir as leis da xurisdición da túa empresa e dos teus clientes, os termos de servizo de Shopify, a política de uso aceptable de Shopify e calquera outra política aplicable. Obtén máis información sobre a privacidade do cliente.

Nos mercados configurados para requirir o consentimento, como o Espazo Económico Europeo (EEE) e o Reino Unido, os píxeles web só se executan cando os visitantes do sitio web conceden os permisos necesarios na configuración do píxel.

De forma predeterminada, os novos píxeles personalizados requiren os permisos de Márketing e Análise. Podes personalizar os permisos obrigatorios na sección Privacidade do cliente > Permiso dos detalles do píxel personalizado.

Do mesmo xeito, os píxeles configurados como venda de datos non se executarán para os clientes que rexeitaron a venda ou o uso compartido dos seus datos, a menos que o píxel sexa compatible co uso de datos limitado. De forma predeterminada, os novos píxeles personalizados clasifícanse como venda de datos. Podes personalizar se os datos recollidos se clasifican como venda de datos na sección Privacidade do cliente > Venda de datos dos detalles do teu píxel personalizado.

Os desenvolvedores de píxeles personalizados poden obter máis información sobre como recompilar e rexistrar o consentimento.

É posible que cada píxel teña un nome diferente para cada propósito. Deberías consultar a documentación do píxel de terceiros para comprender a súa correspondencia coas definicións de Shopify.

Por exemplo, así é como os propósitos de Márketing e Análise se asocian ao modo de consentimento de Google:

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

Exemplo de píxel personalizado

Abaixo móstrase un exemplo do código para un píxel de Meta. O código do píxel varía dependendo do provedor de servizos de terceiros e dos eventos que queres rastrexar. Consulta a referencia de eventos de clientes para ver unha lista dos eventos dispoñibles.

Exemplo de 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');

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