Pixel di Meta

Avanzate

Suggerimenti per implementazioni alternative, utilizzo del pixel con app web a pagina singola e monitoraggio delle conversioni con clic sui pulsanti e scorrimento della pagina.

Regolamento generale sulla protezione dei dati

Se svolgi attività in Paesi soggetti al Regolamento generale sulla protezione dei dati (GDPR), fai riferimento al nostro documento GDPR per scoprire come diventare conforme.

Installazione del pixel usando un tag IMG

Anche se puoi usare il tag IMG per installare i pixel, ti suggeriamo di fare riferimento alla nostra guida di implementazione per delle alternative.

Se devi installare il pixel utilizzando un'implementazione leggera, puoi installarlo con un tag <img>. Per eseguire questa azione, aggiungi il codice seguente tra un tag <noscript> di apertura e chiusura all'interno dell'intestazione o del corpo del sito web e sostituisci {pixel-id} con l'ID del pixel e {standard-event} con un Evento standard.

<img src="https://www.facebook.com/tr?id=&#123;pixel-id&#125;&amp;ev=&#123;standard-event&#125;" height="1" width="1" style="display:none"/>

I pixel installati usando un tag <img> supportano anche i parametri , che puoi includere nella stringa di query. Ad esempio:

<img src="https://www.facebook.com/tr?id=12345
  &amp;ev=ViewContent
  &amp;cd[content_name]=ABC%20Leather%20Sandal
  &amp;cd[content_category]=Shoes
  &amp;cd[content_type]=product
  &amp;cd[content_ids]=1234
  &amp;cd[value]=0.50
  &amp;cd[currency]=USD" height="1" width="1" style="display:none"/>

Limitazioni

  • Non può essere attivato più volte a ogni caricamento della pagina
  • Non può monitorare eventi standard o personalizzati attivati ​​dalle interazioni con l'interfaccia utente (ad esempio, un clic su un pulsante)
  • Soggetto ai limiti HTTP GET nell'invio di dati personalizzati o URL lunghi
  • Non può essere caricato in modo asincrono

Esempio di installazione del tag IMG

Di seguito è riportato un esempio di installazione del tag IMG del pixel di Meta tra le pagine principali di un sito web fittizio utilizzando un ID del pixel fittizio (12345) e parametri personalizzati (ad esempio cd[currency]=USD).

Sulla pagina del prodotto, un pixel per monitorare un evento PageView e un altro per monitorare un evento ViewContent:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=ViewContent"/>

Nella pagina di aggiunta al carrello, un pixel per monitorare un evento PageView e un altro per monitorare un evento AddToCard, con dati personalizzati:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=AddToCart&cd[currency]=USD&cd[value]=0.00"/>

Nella pagina degli acquisti, un pixel per monitorare un evento PageView e un altro per monitorare un evento Purchase, con dati sull'acquisto:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=Purchase&cd[currency]=USD&cd[value]=0.00"/>

Pixel IMG Misurazione aggregata degli eventi per iOS versione 14.5 e successive

La misurazione aggregata degli eventi di Meta è un protocollo che consente la misurazione degli eventi web e nell'app delle persone che usano dispositivi con iOS 14.5 o versioni successive. La modellazione statistica può essere utilizzata ed è progettata per fornire una visualizzazione più completa dei risultati quando i dati sono mancanti o parziali.

Ti consigliamo di seguire la sezione Installazione del pixel usando un tag IMG di questo documento quando usi il tag IMG del pixel o di rinunciare a utilizzare il tag IMG e seguire invece la nostra Guida all'implementazione.

Dati del pixel IMG mancanti

Runtime JavaScript

Se configuri il tuo pixel IMG Pixel utilizzando Runtime JavaScript per generare una classe JavaScript Image senza aggiungere tale classe Image all'albero DOM del sito web, ad esempio utilizzando librerie JavaScript di terzi per inviare il pixel IMG, devi aggiungere il codice seguente, altrimenti Meta non riceverà i dati del pixel IMG.

var nativeBridge = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.receiveImgPixel;
if (nativeBridge) {
    const postObj = {
        id: {pixel-id},
        ev: {standard-event},
        cd: {stringified-custom-data},
        dpo: {data-processing-options},          // Optional CCPA param
        dpoco: {data-processing-option-country}, // Optional CCPA param
        dpost: {data-processing-option-state},   // Optional CCPA param
    };
    nativeBridge.postMessage(JSON.stringify(postObj));
}

Attributo Sandbox

Se inserisci il pixel IMG all'interno di un iframe che ha l'attributo sandbox, devi aggiungere il valore allow-scripts, altrimenti Facebook non riceverà i dati del pixel IMG.

Abilitazione di AEM per scenari di reindirizzamento automatico

Abbiamo esteso la funzionalità di AEM per prendere in considerazione le conversioni provenienti da tutte le pagine web associate all'inserzionista in cui vengono attivati gli eventi del pixel ottimizzati di un inserzionista (come negli scenari specifici in cui gli inserzionisti possono affidarsi a URL abbreviati o reindirizzamenti basati sulla geografia, possono avere più linee di business o possono dipendere sulle agenzie per pubblicare la loro pubblicità). Se rientri in uno di questi scenari e desideri abilitare AEM, ti consigliamo di eseguire le seguenti azioni:

  • Utilizza lo stesso pixel di Meta (ad esempio, la stessa coppia di ID del pixel e nome evento del pixel) nei domini pertinenti da cui si desidera ottenere conversioni.
  • Assicurati che gli eventi AEM da cui desideri ottenere le conversioni abbiano la priorità in questi domini.

Monitoraggio dei clic sui pulsanti

Quando un visitatore clicca su un pulsante, il codice JavaScript del pixel di Meta rileva e trasmette automaticamente a Meta i campi pertinenti del modulo.

Immagina di avere un sito web di e-commerce in cui il pulsante "Aggiungi al carrello" non apre una nuova pagina. In uno scenario del genere, sarebbe utile attivare un evento per i clic sul pulsante.

In questo esempio, attiveremo un evento ViewContent standard al caricamento della pagina. Quando un utente clicca sul pulsante "Aggiungi al carrello", verrà attivato l'evento AddToCart standard.

A tale scopo, carica innanzitutto il codice del pixel di Meta da attivare al caricamento della pagina:

<!-- Facebook Pixel Code --> <script> fbq('track', 'ViewContent', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 0.50, currency: 'USD' }); </script> <!-- End Facebook Pixel Code -->

Successivamente, attiva AddToCart al caricamento di una nuova pagina o al clic su un pulsante Aggiungi al carrello. Esistono diversi modi per gestire i clic sui pulsanti. Di seguito è riportato un esempio relativo all'aggiunta di un eventListener a un pulsante.

<!-- Somewhere there is a button that performs Add to Cart --> <button id="addToCartButton">Add To Cart</button> <!-- Add Pixel Events to the button's click handler --> <script type="text/javascript"> var button = document.getElementById('addToCartButton'); button.addEventListener( 'click', function() { fbq('track', 'AddToCart', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 4.99, currency: 'USD' }); }, false ); </script>

Esistono molti modi per gestire gli eventi relativi ai clic; assicurati solo di chiamare sempre la funzione fbq dopo il clic.

A seconda di come hai implementato il pixel, Pixel Helper potrebbe mostrare un errore prima del clic sul pulsante. Puoi verificare che il pixel sia stato attivato correttamente cliccando sul pulsante, ignorando in tal modo l'errore dello strumento di assistenza.

Attivazione degli eventi in base alla visibilità

Per questo esempio, supponi di avere un blog e di voler monitorare gli utenti che leggono l'intero contenuto di un articolo. L'unica azione che può eseguire l'utente consiste nello scorrere la pagina fino alla fine.

Di seguito è riportato il codice HTML di esempio di una pagina in cui viene caricato il pixel:

<!DOCTYPE html> <html> <head> <!-- Facebook 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', '<FB_PIXEL_ID>'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> </head> <body> <h1>Scroll Page until the Lead event is fired</h1> <div style="height: 120vh; width: 100vw; background-color: #00f;"></div> <h1 id="fb-fire-pixel">Lead event will fire when this phrase enters the screen</h1> <div style="height: 120vh; width: 100vw; background-color: #000;"></div> </body> </html>

Quando viene visualizzato l'elemento h1 con id=fb-fire-pixel, è necessario attivare l'evento Lead standard. Per verificare se un elemento è visibile sullo schermo, aggiungiamo alla pagina il seguente codice:

// This code should be loaded together with Meta Pixel

var executeWhenElementIsVisible = function(dom_element, callback) {

  if (!(dom_element instanceof HTMLElement)) {
    console.error('dom_element must be a valid HTMLElement');
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function isOnViewport(elem) {
    var rect = elem.getBoundingClientRect();
    var docElem = document.documentElement;
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
      rect.right <= (window.innerWidth || docElem.clientWidth)
    );
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && isOnViewport(dom_element)) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  window.addEventListener('scroll', executeCallback, false);
};

Successivamente, è necessario definire la modalità di attivazione del pixel quando l'elemento è visibile sullo schermo:

// Get the element that should be visible to trigger the pixel fire
var element = document.getElementById('fb-fire-pixel');

// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, function() {
  fbq('track', 'Lead');
});

Attivazione degli eventi in base alla lunghezza o alla percentuale della pagina

Per questo esempio, supponi di voler monitorare gli utenti che leggono fino a un certo punto o una determinata percentuale della pagina. L'unica azione che può eseguire l'utente è scorrere fino a un punto o una percentuale della pagina.

Nel primo esempio, monitoriamo la lunghezza della pagina letta dall'utente. Nell'esempio, il pixel di contatto viene attivato quando l'utente raggiunge una lunghezza della pagina pari a 500 pixel.

var executeWhenReachedPageLength = function(length, callback) {
  if (typeof length !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof length,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getCurrentScrolledLengthPosition() > length) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getWindowLength() >= length) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPageLength(10, function() {
  fbq('track', 'Lead');
});

Nel secondo esempio si monitorerà la percentuale della pagina letta dall'utente. In questo esempio, il pixel di contatto viene attivato quando l'utente raggiunge il 75% della pagina.

var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }

  var scrollableLength = getScrollableLength();

  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPagePercentage(75, function() {
  fbq('track', 'Lead');
});

Attivazioni ritardate del pixel

Supponi di voler monitorare gli utenti che interagiscono con il tuo sito web alcuni secondi prima di attivare un evento del pixel. Puoi eseguire tale operazione usando la funzione setTimeout.

// Delay pixel fire by 3 seconds
var seconds = 3;
setTimeout(function() {
  fbq('track', 'Lead');
}, seconds * 1000);

Questa funzione permette di monitorare le visite "impegnate", in cui gli utenti non abbandonano subito la pagina e ne leggono effettivamente il contenuto.

Attivazione degli eventi in base agli articoli visualizzati per ciascuna sessione

Per individuare gli utenti che hanno visualizzato un determinato numero di articoli del tuo sito, puoi attivare un contatore di sessioni e caricare il codice del pixel di Meta che rileva tale condizione.

Sappiamo che una sessione è costituita da una serie di interazioni tra utente e sito web in un determinato lasso di tempo, come richiesto dal sito. Puoi aumentare il numero di visualizzazioni della pagina man mano che rilevi le attività degli utenti in un determinato lasso di tempo.

Supponi di disporre della variabile sessionCountViews per site_request: puoi aggiungere il codice del pixel di Meta in base al numero di visualizzazioni della pagina contate.

Di seguito è riportato un esempio che mostra il conteggio solo per il 6° articolo visualizzato:

if (site_request.sessionCountViews == 6) {
  fbq('track', "ViewContent", {
    sessionCountViews: site_request.sessionCountViews,
  });
}

Monitoraggio selettivo degli eventi con più pixel

Se sulla stessa pagina sono presenti più pixel e desideri attivare gli eventi in modo selettivo su ogni pixel unico, devi utilizzare le funzioni trackSingle e trackSingleCustom.

L'uso della funzione track su Pagine nelle quali sono stati inizializzati più pixel (usando codici di base multipli o persino combinandola all'interno di un codice di base) potrebbe produrre un'attivazione eccessiva o un comportamento imprevisto e deve essere applicato solo in situazioni specifiche.

Un esempio è rappresentato da una situazione in cui viene attivato un evento PageView su entrambi i pixel inizializzati e viene attivato selettivamente un evento standard (Purchase) su un pixel e un evento personalizzato su un secondo pixel.

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels

// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
      value: 4,
      currency: 'GBP',
});

// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
  //optional parameters
});

Monitoraggio degli eventi per singoli pixel

In casi insoliti, potresti voler inviare eventi a uno solo dei pixel installati sul sito web (ad esempio, per limitare i dati inviati a uno dei pixel del sito web). Questi metodi monitorano le attivazioni del pixel per un singolo pixel. Vengono chiamati nel modo seguente:

fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);

Configurazione automatica

Il pixel di Meta invierà metadati relativi alle pagine e ai clic sui pulsanti (ad esempio, dati strutturati secondo i formati Opengraph o Schema.org) dal sito web al fine di migliorare la pubblicazione e la misurazione delle inserzioni e di automatizzare la configurazione del pixel. Per configurare il pixel di Meta affinché non invii tali informazioni aggiuntive, nel codice base del pixel di Meta aggiungi fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID') sopra alla chiamata init.

<!-- Facebook 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'); 
// Line to enable Manual Only mode.
fbq('set', 'autoConfig', false, 'FB_PIXEL_ID'); 
//Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID'); 
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Normativa sulla sicurezza dei contenuti

Se il sito web ha una Normativa sulla sicurezza dei contenuti, devi consentire il caricamento di JavaScript da https://connect.facebook.net. Nota: il pixel carica gli script da due percorsi, ovvero /en_US/fbevents.js e /signals/config/{pixelID}?v={version}.