Meta-Pixel

Fortgeschritten

Tipps für alternative Implementierungen unter Verwendung des Pixels mit einseitigen Web-Apps und dem Tracking von Conversions mit Button-Klicks und Seiten-Scrolling.

Datenschutz-Grundverordnung

Falls du in Ländern tätig bist, in denen die Datenschutz-Grundverordnung (DGSVO) gilt, findest du entsprechende Informationen zu deren Einhaltung in unserem DGSVO-Dokument.

Das Pixel mit einem IMG-Tag installieren

Du kannst zwar das IMG-Tag zum Installieren von Pixels verwenden, wir empfehlen dir jedoch, im Implementierungsleitfaden nach Alternativen zu suchen.

Falls du das Pixel mit einer einfachen Implementierung installieren musst, kannst du es mit einem <img>-Tag installieren. Füge hierzu den nachstehenden Code zwischen einem öffnenden und einem schließenden <noscript>-Tag in den Header oder den Text deiner Webseite ein und ersetze {pixel-id} durch die ID deines Pixels und {standard-event} durch ein Standard-Event.

<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"/>

Pixel, die mit einem <img>-Tag installiert wurden, unterstützen auch Parameter, die du in deinen Abfrage-String übernehmen kannst. Beispiel:

<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"/>

Einschränkungen

  • Sie können nicht bei jedem Laden einer Seite mehrmals ausgelöst werden.
  • Sie können keine standardmäßigen oder benutzerdefinierten Ereignisse tracken, die durch UI-Interaktionen ausgelöst werden (z. B. einen Button-Klick).
  • Es gilt die HTTP-GET-Einschränkung beim Senden von benutzerdefinierten Daten oder langen URLs.
  • Können nicht asynchron geladen werden.

Beispiel für eine IMG-Tag-Installation

Unten ist ein Beispiel für die IMG-Tag-Installation mit dem Meta-Pixel auf Schlüsselseiten einer fiktiven Website mit einer fiktiven Pixel-ID (12345) und benutzerdefinierten Parametern (z. B. cd[currency]=USD) aufgeführt.

Auf der Produktseite verfolgt ein Pixel ein PageView-Event und ein anderes ein ViewContent-Event.

<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"/>

Auf der Einkaufswagen-Seite verfolgt ein Pixel ein PageView-Event und ein anderes ein AddToCard-Event mit eigenen Daten:

<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"/>

Auf der Kaufseite verfolgt ein Pixel ein PageView-Event und ein anderes ein Purchase-Event mit eigenen Daten über den Kauf:

<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"/>

Messung aggregierter Events mit IMG-Pixel für iOS ab Version 14.5

Die Messung aggregierter Events ist ein Meta-Protokoll, mit dem Web Events und App Events von Personen gemessen werden können, die Geräte mit dem Betriebssystem iOS 14.5 oder höher nutzen. Statistische Modellierung wird unterstützt und kann ein vollständigeres Bild der Ergebnisse liefern, wenn Daten ganz oder teilweise fehlen.

Wir empfehlen dir dringend, bei der Verwendung des IMG-Tags den Abschnitt Das Pixel mit einem IMG-Tag installieren in diesem Dokument zu lesen oder das IMG-Tag gar nicht zu verwenden und stattdessen unseren Implementierungsleitfaden zu befolgen.

Fehlende IMG-Pixeldaten

Runtime-JavaScript

Falls du das IMG-Pixel mit Runtime-JavaScript einrichtest, um eine JavaScript-Image-Klasse zu erstellen, ohne diese Image-Klasse an die DOM-Struktur der Website anzufügen, beispielsweise mit JavaScript-Bibliotheken von Drittanbietern zum Senden des IMG-Pixels, musst du den folgenden Code hinzufügen. Andernfalls erhält Meta deine IMG-Pixeldaten nicht.

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

Sandbox-Attribut

Wenn du dein Pixel-IMG innerhalb eines iframe mit dem Attribut sandbox platzierst, musst du den Wert allow-scripts hinzufügen, da Facebook sonst nicht deine IMG-Pixeldaten erhält.

Aktivieren von AEM für Szenarien mit automatischer Weiterleitung

Wir haben die AEM-Funktionalität erweitert, um Conversions von allen mit Werbetreibenden verknüpften Webseiten zu berücksichtigen, auf denen die optimierten Pixel-Events eines Werbetreibenden ausgelöst werden (z. B. in den speziellen Szenarien, in denen Werbetreibende URL-Verkürzungen oder geobasierte Weiterleitungen verwenden, mehrere Geschäftszweige haben oder ihre Werbung über Agenturen schalten). Wenn eines dieser Szenarien auf dich zutrifft und du AEM aktivieren möchtest, empfehlen wir dir, wie folgt vorzugehen:

  • Verwende dasselbe Meta-Pixel (d. h. dasselbe Paar aus Pixel-ID und Pixel-Event-Name) für alle relevanten Domains, von denen du Conversions erhalten möchtest.
  • Stelle sicher, dass die AEM-Events, von denen du Conversions erhalten möchtest, in diesen Domains priorisiert werden.

Tracking von Button-Klicks

Wenn ein*e Besucher*in auf einen Button klickt, erkennt der JavaScript-Code des Meta Pixels automatisch die relevanten Formularfelder und leitet diese an Meta weiter.

Angenommen, du hast eine E-Commerce-Webseite und der Button „In den Einkaufswagen“ navigiert nicht zu einer neuen Seite. Es bietet sich an, ein Event zu aktivieren, wenn der Button angeklickt wird.

In diesem Beispiel aktivieren wir ein ViewContent-Standardereignis beim Laden der Seite. Wenn jemand auf den Button „In den Einkaufswagen“ klickt, aktivieren wir ein AddToCart-Standardereignis.

Hierzu lädst du zuerst den Code des Meta-Pixels, der beim Laden der Seite ausgelöst werden soll:

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

Dann lässt du AddToCart entweder beim Laden einer neuen Seite oder beim Klicken auf den Button „In den Einkaufswagen“ feuern. Es gibt verschiedene Möglichkeiten, Schaltflächenklicks zu verarbeiten. In diesem Beispiel fügen wir einem Button einen eventListener hinzu.

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

Du hast zahlreiche Möglichkeiten, wie du Klick-Events verarbeiten kannst. Du musst aber sicherstellen, dass nach dem Klicken immer die fbq-Funktion aufgerufen wird.

Je nachdem, wie du das Pixel implementiert hat, zeigt der Pixel Helper möglicherweise vor dem Klicken auf den Button einen Fehler an. Du kannst überprüfen, ob dein Pixel ordnungsgemäß auslöst, indem du auf den Button klickst. Der Helper-Fehler sollte dann geschlossen werden.

Auslösen von Events basierend auf Sichtbarkeit

In diesem Beispiel stellen wir uns vor, dass du einen Blog hast und die Leser verfolgen möchtest, die einen Artikel ganz lesen. Ein*e Leser*in macht dabei nichts anderes, als bis zum Ende der Seite zu scrollen.

Hier siehst du den HTML-Beispielcode für eine Seite, auf der das Pixel geladen wird:

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

Wenn das h1-Element mit id=fb-fire-pixel auftaucht, sollten wir das Lead-Standardereignis feuern. Um zu überprüfen, ob ein Element auf dem Bildschirm sichtbar ist, fügen wir der Seite den folgenden Code hinzu:

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

Anschließend müssen wir definieren, wie das Pixel feuern soll, wenn das Element auf dem Bildschirm sichtbar ist:

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

Auslösen von Events basierend auf der Seitenlänge oder einem Prozentsatz

In diesem Beispiel möchtest du Leser verfolgen, die eine bestimmte Länge oder einen bestimmten Prozentsatz der Seite lesen. Ein Leser macht dabei nichts anderes, als über die gewünschte Länge oder den gewünschten Prozentsatz der Seite zu scrollen.

In diesem ersten Beispiel verfolgen wir, in welcher Länge der*die Besucher*in deinen Blogartikel gelesen hat. Hier lösen wir das Lead-Pixel aus, wenn der*die Besucher*in bis zu 500 px der Seitenlänge gelesen hat.

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

Im zweiten Beispiel verfolgen wir, zu welchem Prozentsatz der*die Besucher*in den Artikel gelesen hat. Hier lösen wir das Lead-Pixel aus, wenn der*die Besucher*in 75 % der Seite gelesen hat.

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

Verzögertes Auslösen des Pixels

Angenommen, du möchtest Nutzer deiner Webseite ein paar Sekunden vor dem Auslösen des Pixel-Events verfolgen. Hierzu verwendest du die setTimeout-Funktion.

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

Du kannst hiermit Seitenaufrufe von aktiven Benutzern verfolgen, die nicht schnell von einer Seite zur nächsten springen, sondern den Inhalt auch wirklich lesen.

Auslösen von Events basierend auf den pro Sitzung gelesenen Artikeln

Wenn du wissen möchtest, wer eine bestimmte Anzahl von Artikeln auf deiner Webseite gelesen hat, kannst du einen Sitzungszähler verwenden und den Meta-Pixel-Code dann laden, wenn dieses Event eintritt.

Eine Sitzung ist eine Gruppe von Benutzerhandlungen auf deiner Webseite, die in einem bestimmten Zeitrahmen pro Websiteanforderung auftreten. Du kannst die Anzahl der Seitenaufrufe so lange erhöhen, wie in dem angegebenen Zeitraum Nutzeraktivitäten auftreten.

Wenn du zum Beispiel die Variable sessionCountViews pro site_request verwendest, kannst du den Meta-Pixel-Code basierend auf der Anzahl der Seitenaufrufe hinzufügen, die du gezählt hast.

Beispielzählung für nur den sechsten aufgerufenen Artikel

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

Selektives Event-Tracking mit mehreren Pixeln

Wenn eine Seite mehrere Pixel enthält und du für jedes Pixel selektiv Events auslösen möchtest, sollten die Funktionen trackSingle und trackSingleCustom verwendet werden.

Wenn die Funktion track auf Seiten eingesetzt wird, auf denen mehrere Pixel initialisiert sind (entweder durch Verwendung mehrerer Basiscodes oder auch durch Kombination innerhalb von einem Basiscode), könnten zu viele Events ausgelöst werden oder dies kann zu unerwartetem Verhalten führen. Sie sollte daher nur in bestimmten Situationen angewendet werden.

Beispiel, bei dem wir ein PageView-Event für beide initialisierten Pixel sowie selektiv ein Standard-Event (Purchase) für ein Pixel und ein personalisiertes Event für ein zweites Pixel auslösen.

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

Tracking von Events für einzelne Pixel

In einigen ungewöhnlichen Fällen möchtest du möglicherweise Events nur an eines der Pixel senden, die auf deiner Webseite installiert sind, um zum Beispiel den Sendeumfang der Daten einzuschränken. Diese Methoden verfolgen das Auslösen eines einzelnen Pixels. Sie werden wie folgt aufgerufen:

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

Automatische Konfiguration

Das Meta-Pixel sendet Button-Klick-Daten und Seiten-Metadaten (wie z. B. entsprechend der Opengraph- oder Schema.org-Formate strukturierte Daten) von deiner Webseite, um deine Anzeigenauslieferung und -messung zu verbessern und dein Pixel-Setup zu automatisieren. Um das Meta-Pixel so zu konfigurieren, dass diese zusätzlichen Informationen nicht gesendet werden, füge im Meta-Pixel-Basiscode fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID') über dem init-Aufruf hinzu.

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

Inhaltssicherheitsrichtlinie

Wenn deine Webseite über eine Inhaltssicherheitsrichtlinie verfügt, solltest du zulassen, dass JavaScript von https://connect.facebook.net geladen werden kann. Hinweis: Das Pixel lädt Skripts aus zwei Pfaden: /en_US/fbevents.js und /signals/config/{pixelID}?v={version}.