Crear un codi de píxel personalitzat

Precaució

Els píxels personalitzats són una funció avançada que requereix coneixements de JavaScript. El compliment de les lleis aplicables, els consentiments, la seguretat del codi, la resolució de problemes i les actualitzacions són responsabilitat teva. Els píxels estan subjectes a les condicions del servei de Shopify.

Shopify no ofereix suport per afegir i utilitzar píxels personalitzats. Si necessites ajuda per afegir o utilitzar un píxel personalitzat, pots contractar un Partner de Shopify.

Aquesta pàgina inclou instruccions per crear un codi de píxel personalitzat per a un píxel de tercers, de manera que puguis fer el seguiment d'accions del client específiques. Un cop creat el codi per al teu píxel personalitzat, pots afegir el píxel a la botiga de Shopify.

Nota

Abans de crear un píxel personalitzat, hauries de revisar les aplicacions disponibles per millorar-ne l'estabilitat, la seguretat i el rendiment. Tot i això, si no hi ha cap aplicació que s'adapti a les teves necessitats, pots crear un píxel personalitzat.

Preparació per crear un píxel personalitzat

Abans de crear un píxel personalitzat, revisa la informació següent per assegurar-te d'entendre com es configura el teu píxel:

• Riscos associats als píxels.
• Limitacions de l'entorn de proves de píxels de Shopify.
• Ús de l'API de l'entorn de proves de píxels de Shopify.
• Esquema de seguiment d'accions del client.

Quan afegeixes un píxel personalitzat, especifiques la informació següent:

• El píxel de JavaScript de tercers.
• Les accions de comportament de les quals vols fer el seguiment.
• La configuració del consentiment de la privadesa dels clients.

Crear el codi per a un píxel personalitzat

Fes créixer el teu negoci

Aquesta és una guia pràctica avançada i Shopify no hi ofereix suport. Si necessites ajuda per afegir un píxel personalitzat, pots contractar un Partner de Shopify.

La creació del codi per a un píxel personalitzat implica els passos següents:

1. Prepara l'SDK de JavaScript de tercers.
2. Configura el teu píxel per fer el seguiment d'accions del client.
3. Estableix la configuració de consentiment de la privadesa dels clients per al teu píxel.

Preparació de l'SDK de JavaScript de tercers

El servei de tercers amb què treballes et proporciona el codi que s'integra amb el píxel. Normalment, un píxel té 2 components: un SDK de JavaScript i el codi de seguiment. Cal eliminar qualsevol codi HTML del servei de tercers, ja que l'entorn de proves del píxel de Shopify només admet JavaScript.

Aquest és un exemple d'un píxel de Meta. Els píxels són lleugerament diferents segons cada proveïdor de tercers.

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

Després d'eliminar l'HTML del codi de Meta, et quedarà l'SDK del píxel de Meta i el codi per inicialitzar-lo. El codi de seguiment de l'acció PageView també s'ha eliminat, ja que s'afegirà en el pas següent.

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

L'SDK del píxel de Meta no transmet dades automàticament des d'un píxel personalitzat de Shopify. Per transmetre dades, has de subscriure't a les accions.

És possible que trobis píxels que es carreguen mitjançant script src=. L'HTML no s'admet als píxels de Shopify; per tant, hauràs de substituir script src= per l'equivalent en JavaScript.

Aquest és un exemple d'un píxel de Google Analytics que es carrega mitjançant 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 part de script src= es pot substituir per l'equivalent en JavaScript. Assegura't sempre que el teu atribut src coincideixi amb la versió 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');

L'SDK del píxel de Google no transmet dades automàticament des d'un píxel personalitzat de Shopify. Per transmetre dades, has de subscriure't a les accions.

Fer el seguiment d'accions del client

Després de carregar i inicialitzar l'SDK del píxel, has de transmetre-hi les accions per fer-ne el seguiment. Això es fa subscrivint-te a les accions i, a continuació, transmetent les dades de l'acció a l'SDK del píxel perquè el servei de tercers les processi.

Subscriure's a les accions estàndard

Shopify ofereix un conjunt d'accions estàndard, que facilita la tasca d'assegurar-te que el teu píxel recopili les dades que necessita.

Et pots subscriure a les accions utilitzant la Shopify Pixels Extension API. Hauràs de col·locar el codi del píxel de tercers amb l'acció a la qual et subscrius.

Aquest és un exemple de l'acció PageView per al píxel de Meta. Tingues en compte que fbq("track") forma part del codi de Meta, i que cada empresa tindrà la seva pròpia versió, per a la qual hauràs de consultar la seva documentació.

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

Algunes accions tenen metadades que pots transmetre al teu píxel. Aquest és un exemple de com transmetre alguns detalls de productes a l'acció 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,
  });
});

Subscriure's a accions del client personalitzades

Si vols fer el seguiment d'accions del client addicionals, com ara quan algú fa clic en un botó, pots afegir accions del client personalitzades. Les accions personalitzades es poden subscriure de la mateixa manera que les accions estàndard. Declara el nom de l'acció a la qual vols subscriure't i transmet la informació al píxel del proveïdor de serveis externs.

Aquest és un exemple de com podria aparèixer una acció personalitzada publicada als fitxers Liquid del teu tema:

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

Aquest és un exemple de com podries configurar el teu píxel per subscriure's a aquesta acció personalitzada:

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

Per obtenir més informació sobre les accions personalitzades, consulta la documentació per a desenvolupadors de Shopify.

Configuració del consentiment i de la venda de dades

Nota

Ets responsable de complir la normativa de privadesa i has de consultar el teu propi assessorament legal per determinar com poden afectar el teu negoci les lleis de la teva regió i de la regió on vens. Per vendre productes mitjançant la plataforma de Shopify, has de complir les lleis de la jurisdicció del teu negoci i dels teus clients, les condicions del servei de Shopify, la política d'ús acceptable de Shopify i qualsevol altra política aplicable. Obtén més informació sobre la privadesa dels clients.

En els mercats configurats per requerir consentiment, com ara l'Espai Econòmic Europeu (EEE) i el Regne Unit, els píxels web només s'executen quan els visitants del lloc web han proporcionat els permisos requerits a la configuració del píxel.

Per defecte, els nous píxels personalitzats requereixen els permisos Màrqueting i Estadístiques. Pots personalitzar quins permisos es requereixen a la secció Privadesa dels clients > Permisos dels detalls del teu píxel personalitzat.

De la mateixa manera, els píxels configurats com a venda de dades no s'executaran per als clients que hagin rebutjat la venda o l'ús compartit de dades, tret que el píxel admeti un ús limitat de dades. Per defecte, els nous píxels personalitzats es consideren venda de dades. Pots personalitzar si les dades recopilades es consideren venda de dades a la secció Privadesa dels clients > Venda de dades dels detalls del teu píxel personalitzat.

Els desenvolupadors de píxels personalitzats poden obtenir més informació sobre com recopilar i registrar el consentiment.

Cada píxel pot tenir un nom diferent per a cada propòsit. Has de consultar la documentació del píxel de tercers per entendre com es correspon amb les definicions de Shopify.

Per exemple, a continuació es mostra com es corresponen els propòsits de Màrqueting i Estadístiques amb el mode de consentiment de Google:

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

Exemple de píxel personalitzat

A continuació, es mostra un exemple del codi d'un píxel de Meta. El codi del píxel varia segons el proveïdor de serveis extern i les accions de les quals vulguis fer el seguiment. Consulta la referència d'accions del client per veure una llista de les accions disponibles.

Exemple de píxel de Meta personalitzat

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