Pixel und Tags(Was ein unsichtbares Bild über eure Besucher verrät)

Willkommen beim Marketing Techie Podcast, dem Podcast über die Technik hinter dem Online-Marketing. Verständlich erklärt, auch für Non-Techies. Mit Emilian Buza von trace5.co. In der heutigen Folge: Pixel und Tags. Was sie unbemerkt über deine Besucher weitererzählen.

1996 erscheint ein Buch mit dem Titel „Creating Killer Web Sites“. Der Autor heißt David Siegel. Und er beschäftigt sich mit einem Problem, das damals viele Webdesigner kennen: Texte und Bilder auf einer Webseite genau dorthin zu bekommen, wo man sie haben möchte, ist erstaunlich schwierig.

HTML, die Sprache, mit der man den Aufbau einer Webseite beschreibt, bietet dafür damals nur begrenzte Möglichkeiten. Ein größerer Abstand hier, eine Einrückung da – selbst solche Kleinigkeiten brauchen manchmal einen Trick.

Siegel macht einen solchen Trick bekannt. Dafür braucht er ein Bild. Ein winziges Bild, genau einen Bildpunkt groß. Einen Pixel. Und dieser Pixel ist durchsichtig.

Das Bild setzt er dort ein, wo er Platz braucht. In HTML legt er fest, wie breit und hoch es dargestellt werden soll. Braucht er einen größeren Abstand, lässt er das Bild größer anzeigen. Man sieht es weiterhin nicht, aber es nimmt Platz ein und schiebt dadurch andere Inhalte zur Seite.

Webdesigner nennen solche Bilder Spacer-GIFs: unsichtbare Abstandshalter im Bildformat GIF.

Doch irgendwann begann sich auch die Werbebranche für dieses unscheinbare Pixel zu interessieren.

Ein unsichtbares Bild kann nämlich auch einen ganz anderen Zweck erfüllen, als Bilder zu verrücken.

Es kann einem Unternehmen verraten, dass du gerade eine bestimmte Webseite geöffnet hast …

Um zu verstehen, wie das funktioniert, begleiten wir einen einzigen Seitenaufruf.

Nehmen wir an, Du öffnest die Kursseite von TRACE FIVE. Dein Browser – also das Programm, mit dem du im Internet surfst – lädt die HTML-Datei dieser Seite. Darin steht, welche Texte und Bilder zur Seite gehören.

Die Bilder selbst sind normalerweise eigene Dateien. In der HTML-Datei steht jeweils ihre Internetadresse. Der Browser findet dort also sinngemäß die Angabe: „Hier gehört ein Bild hin. Unter dieser Adresse kannst du es abholen.“

Nun fordert dein Browser das Bild an. Der Computer, der es bereitstellt, schickt es zurück. Diesen Computer nennt man Server. Bis hierhin ist das ein gewöhnlicher Teil des Seitenaufbaus.

Jetzt nehmen wir an, ich hätte auf meiner Kursseite zusätzlich ein durchsichtiges Bild eingebaut. Dieses Bild liegt aber auf dem Server eines Werbeunternehmens. In meiner HTML-Datei steht deshalb für dieses Bild eine Adresse des Werbeunternehmens. Dein Browser folgt dieser Adresse und fordert das Bild dort an.

Du hast nur meine Kursseite geöffnet. Trotzdem ist jetzt auch beim Werbeunternehmen eine Anfrage von deinem Browser angekommen. Du musstest dafür nichts anklicken.

In die Bildadresse könnte ich außerdem eine Angabe aufnehmen, die für „TRACE5-Kursseite“ steht. Damit kann das Unternehmen die Anfrage dieser Seite zuordnen.

Sein Server kann nun festhalten: Gerade wurde das Bild für die TRACE5-Kursseite angefordert. Er sieht außerdem die IP-Adresse, über die die Anfrage ankommt – die Netzwerkadresse für die Rückantwort. Dein Browser schickt üblicherweise auch Angaben mit, welcher Browser er ist.

Damit lässt sich ein Seitenbesuch erfassen. Wer du persönlich bist, weiß das Unternehmen allein dadurch noch nicht.

Auf deinem Bildschirm bleibt das Bild unsichtbar. Aber die Anfrage ist beim Unternehmen angekommen. Und genau darauf kommt es an: Schon das Anfordern des Bildes liefert Informationen. Das ist das Grundprinzip eines Tracking-Pixels.

1999 beschreibt der Computersicherheitsexperte Richard M. Smith solche Bilder als „Web Bugs“. „Bug“ meint hier eine Wanze, wie ein verstecktes Abhörgerät. Die Werbebranche bevorzugt die unverfänglicher klingende Bezeichnung „Clear GIF“: durchsichtiges GIF.

Wenn du dich also schon mal gefragt hast, warum das Tracking von Meta ausgerechnet „Pixel“ heißt: Genau daher kommt der Name.

Nur – der heutige Meta-Pixel funktioniert ein ganzes Stück anders. Und wie, das schauen wir uns heute an. Anhand einer einzigen Frage: Woher weiß Meta eigentlich, dass jemand in deinem Shop etwas gekauft hat? Fangen wir mit der Situation an.

Du hast einen Onlineshop. Und du schaltest Anzeigen bei Meta, also auf Facebook und Instagram. Dafür bezahlst du. Und natürlich willst du wissen, ob sich das lohnt. Hat jemand wegen deiner Anzeige gekauft? Und wenn ja, was und für wie viel?

Meta will das übrigens auch wissen. Denn je mehr Meta darüber erfährt, wer nach einer Anzeige tatsächlich kauft, desto gezielter kann es deine Anzeigen an ähnliche Leute ausspielen.

Jetzt kommt das Problem. Gekauft wird nicht bei Meta. Gekauft wird in deinem Shop.

Und an deinem Shop sind zwei Dinge beteiligt. Das eine ist der Browser deines Besuchers. Also das Programm auf seinem Computer oder Handy, mit dem er sich deinen Shop anschaut – Chrome, Safari, Firefox und so weiter.

Das andere ist dein Shop-Server. Das ist der Computer, auf dem dein Shop läuft und auf dem die Bestellungen gespeichert werden. Und jetzt die Frage: Wo ist Meta in diesem Bild?

Nirgends. Meta betreibt deinen Shop nicht. Meta sieht deinen Server nicht. Und Meta sitzt auch nicht im Browser deines Besuchers und schaut ihm über die Schulter.

Wenn Meta von einem Kauf erfahren soll, muss ihm das also irgendjemand mitteilen. Und genau darum geht es heute: Wer teilt es Meta mit? Wann? Und was genau?

Damit wir dabei nicht durcheinanderkommen, bleiben wir die ganze Folge bei einem einzigen Beispiel: Jemand kauft in deinem Shop ein rotes T-Shirt für 25 Euro.

Eine Sache brauchen wir vorher noch. Wenn jemand eine Seite deines Shops öffnet, fragt sein Browser bei deinem Server an: „Gib mir diese Seite.“ Der Server antwortet und schickt Dateien zurück. Zwei davon sind für uns heute wichtig.

Das eine ist HTML. Da steht drin, was auf der Seite zu sehen ist: Texte, Bilder, Buttons. Das andere ist JavaScript. JavaScript ist Programmcode. Also Anweisungen, die der Browser ausführt, während die Seite offen ist. Zum Beispiel: „Wenn jemand auf diesen Button klickt, mach dies und das.“

Mehr brauchst du für den Anfang nicht. Wenn du das genauer verstehen willst, ist das genau das Thema meines Kurses „Was passiert im Browser?“. Für heute reicht: Anfrage vom Browser, Antwort vom Server. Und JavaScript sind Anweisungen, die der Browser ausführt.

Gut. Dann gehen wir den Kauf einmal durch. Und zwar erst mal ganz ohne Meta.

Dein Besucher legt das rote T-Shirt in den Warenkorb, geht zur Kasse und klickt auf „Kaufen“.

Was passiert jetzt? Der Browser schickt eine Anfrage an deinen Shop-Server. Sinngemäß: „Mein Nutzer möchte dieses rote T-Shirt bestellen. Einmal. Hier sind seine Angaben.“

Der Server prüft das. Gibt es das T-Shirt noch? Stimmt der Preis? Ist die Zahlung durchgegangen? Wenn alles passt, speichert er die Bestellung. Und dann antwortet er dem Browser: „Bestellung erfolgreich. Ein rotes T-Shirt, 25 Euro.“

Der Browser zeigt deinem Besucher daraufhin die Bestellbestätigung an. „Danke für deine Bestellung“ und so weiter.

Halten wir kurz fest, wo wir sind. Die Bestellung ist in deinem Shop gespeichert. Dein Besucher sieht die Bestätigung. Und Meta? Weiß von alldem genau gar nichts. Bisher waren nur der Browser und dein Server beteiligt. Damit sich das ändert, brauchst du den Meta-Pixel.

Wenn du bei Meta das sogenannte Conversion Tracking einrichtest, gibt dir Meta ein kurzes Stück Code. Das baust du in deinen Shop ein. Oder du lässt es von einem Shop-Plugin einbauen – dazu gleich mehr.

Was macht dieser Code? Er sorgt dafür, dass der Browser bei jeder Seite deines Shops zusätzlich noch etwas lädt. Nämlich ein JavaScript von Meta. Das kommt nicht von deinem Server, sondern direkt von einem Server von Meta. Ab jetzt läuft also im Browser deines Besuchers auch Programmcode von Meta.

Dieses Meta-JavaScript ist das, was wir heute meinen, wenn wir vom Meta-Pixel sprechen. Mit dem winzigen Bild von 1996 hat es nur noch den Namen gemeinsam.

In dem Code steht außerdem deine Pixel-ID. Das ist eine Nummer, an der Meta erkennt, zu welchem Werbekonto die Meldungen gehören. Sonst wüsste Meta ja nicht, wessen Kauf das ist.

Und schon ohne dass jemand etwas kauft, meldet dieser Code eine Sache an Meta: den Seitenaufruf. Jedes Mal, wenn eine Seite deines Shops geladen wird, geht sinngemäß raus: „Diese Seite wurde aufgerufen. Gehört zur Pixel-ID soundso.“ Dafür muss dein Besucher nichts anklicken.

Aber Moment. Ein Seitenaufruf ist noch kein Kauf. Und das Meta-JavaScript weiß von sich aus überhaupt nicht, ob gerade gekauft wurde. Geschweige denn, was und für wie viel. Diese Informationen hat ja nur dein Shop.

Und genau hier kommt ein zweites JavaScript ins Spiel. Nämlich das von deinem Shop selbst.

Jedes Shopsystem – Shopify, WooCommerce, Shopware und so weiter – bringt eigenes JavaScript mit. Das musst du nicht extra installieren, das gehört zum Shop. Es kümmert sich zum Beispiel um den Warenkorb oder um die Kasse. Und es weiß, wann eine Bestellung erfolgreich war und was darin steckt.

Wie genau ein Shop das intern löst, ist von System zu System verschieden. Für unser Beispiel nehmen wir einen typischen Ablauf: Wenn der Server die Bestellung bestätigt hat, sorgt der Shop-Code dafür, dass die Bestätigung angezeigt wird.

Und an genau dieser Stelle ist eine zusätzliche Anweisung eingebaut: „Ruf jetzt das Meta-JavaScript auf und gib ihm die Kaufdaten mit. Ein Kauf. Rotes T-Shirt. 25 Euro.“

Diese Anweisung baut entweder ein Entwickler ein. Oder – das ist der häufigere Fall – ein Plugin für deinen Shop erledigt das. Du verbindest im Plugin dein Meta-Konto oder trägst deine Pixel-ID ein, und das Plugin kümmert sich darum, dass bei einem erfolgreichen Kauf die richtigen Daten übergeben werden.

Das Meta-JavaScript bekommt also die Kaufdaten in die Hand gedrückt. Es muss sie nicht erst irgendwo auf der Seite suchen. Daraus baut es eine Meldung für Meta zusammen.

Und jetzt passiert etwas, das dich vielleicht überrascht: Das Meta-JavaScript schickt die Meldung nicht selbst ab. Es sagt dem Browser: „Schick das an den Meta-Server.“

Warum? Weil JavaScript nur die Anweisungen sind. Die Internetverbindung hat der Browser. Er ist das Programm, das die Anweisungen ausführt und die Anfragen tatsächlich verschickt. Das gilt übrigens für jede Anfrage, die irgendein JavaScript auf einer Seite auslöst.

Also schickt der Browser die Meldung an Meta. Sinngemäß: „In diesem Shop wurde gekauft. Pixel-ID soundso. Rotes T-Shirt, 25 Euro.“ Und damit ist die Information bei Meta angekommen.

Dein Besucher merkt davon nichts. Er wird nicht zu Facebook weitergeleitet, er bleibt in deinem Shop und sieht seine Bestellbestätigung. Die Meldung an Meta geht im Hintergrund raus.

Lass uns die Kette einmal in einem Satz zusammenfassen: Der Server bestätigt den Kauf. Der Shop-Code übergibt die Kaufdaten an den Meta-Code. Der Meta-Code baut daraus eine Meldung. Und der Browser schickt sie an Meta. Das sind vier Stationen. Merk sie dir. Wir kommen am Ende darauf zurück.

Vielleicht denkst du jetzt: „Das ist aber ganz schön umständlich. Der Server weiß doch als Erster, dass gekauft wurde. Warum schickt nicht einfach der Shop-Server die Meldung direkt an Meta?“

Gute Frage. Und die Antwort ist: Das geht. Meta bietet dafür eine eigene Schnittstelle an, die Conversions API. Dabei meldet dein Server den Kauf direkt an Meta, ganz ohne den Browser deines Besuchers.

Warum gibt es dann überhaupt den Weg über den Browser? Zum einen, weil der Pixel viel einfacher einzurichten ist. Code-Schnipsel rein oder Plugin installieren, fertig. Für die Server-Variante muss auf deinem Server etwas eingerichtet werden, und das ist mehr Aufwand.

Zum anderen hat der Browser deines Besuchers Informationen dabei, die Meta braucht, um den Kauf einer Anzeige zuzuordnen. Was das für Informationen sind, schauen wir uns gleich an. Der Server müsste sie erst einsammeln und mitschicken.

Viele Shops nutzen heute deshalb beide Wege gleichzeitig. Dann muss allerdings sauber eingerichtet sein, dass Meta denselben Kauf nicht doppelt zählt. Aber das ist ein Thema für eine eigene Folge. Für heute bleiben wir beim Weg über den Browser. Und noch ein zweiter Einwand, der naheliegt: „Warum meldet man den Kauf nicht einfach schon, wenn jemand auf ‚Kaufen‘ klickt? Das wäre doch viel früher.“

Das wäre technisch möglich. Aber dann misst du etwas anderes. Ein Klick auf „Kaufen“ heißt nur: Jemand wollte kaufen. Danach kann noch einiges schiefgehen. Die Karte wird abgelehnt. Das T-Shirt ist in Größe M gerade ausverkauft. Der Besucher bricht bei PayPal ab.

Dann hättest du Meta einen Kauf gemeldet, den es nie gab. Und Meta würde deine Anzeigen auf Leute optimieren, die gar nicht kaufen. Deshalb ist es so wichtig, dass die Meldung erst rausgeht, nachdem der Server die Bestellung bestätigt hat. Schauen wir uns jetzt an, was eigentlich genau in dieser Meldung an Meta steht.

Zuerst: dass etwas passiert ist. In unserem Fall ein Kauf. So etwas nennt man beim Tracking ein Ereignis. Ein Ereignis heißt einfach: Eine bestimmte Sache ist passiert. Eine Seite wurde aufgerufen. Etwas wurde in den Warenkorb gelegt. Es wurde gekauft.

Dann die Angaben zum Kauf. Der Wert: 25. Die Währung: Euro. Die Menge: eins. Und die Artikelnummer.

Warum die Artikelnummer? Weil „rotes T-Shirt“ für deinen Shop nicht eindeutig ist. Es gibt das T-Shirt in S, M und L, vielleicht in verschiedenen Schnitten. Deshalb übergibt der Shop zum Beispiel die Nummer TS-ROT-M.

Wenn dieselbe Nummer auch in deinem Produktkatalog bei Meta hinterlegt ist, weiß Meta genau, welches Produkt gekauft wurde.

Und natürlich steht in der Meldung deine Pixel-ID, damit Meta weiß, zu welchem Konto sie gehört.

Meta weiß jetzt also: In deinem Shop wurde ein rotes T-Shirt in Größe M für 25 Euro gekauft.

Aber eigentlich wolltest du ja etwas anderes wissen. Nämlich: Hatte dieser Kauf etwas mit deiner Anzeige zu tun?

Dafür braucht Meta eine Verbindung zwischen zwei Momenten. Dem Moment, in dem jemand auf deine Anzeige geklickt hat. Und dem Moment, in dem jemand gekauft hat. Und zwar dieselbe Person. Die wichtigste Verbindung entsteht beim Klick auf die Anzeige.

Nehmen wir an, deine Anzeige verlinkt auf deinshop.de. Wenn jemand darauf klickt, hängt Meta an diese Adresse etwas an. Im Browser steht dann zum Beispiel: deinshop.de/?fbclid= und danach eine lange Zeichenfolge.

Dieses fbclid steht für Facebook Click ID. Den ausgeschriebenen Namen musst du dir nicht merken. Wichtig ist: Diese Zeichenfolge bezeichnet genau diesen einen Klick auf genau diese Anzeige. Dein Besucher landet trotzdem ganz normal in deinem Shop. Das Anhängsel stört nicht.

Jetzt kauft dein Besucher aber vielleicht nicht sofort. Er schaut sich um, klickt auf drei andere Seiten und kauft erst nach zehn Minuten. Oder zwei Tage später. Dann steht die Click ID längst nicht mehr in der Adresse. Woher soll Meta sie dann noch haben?

Dafür gibt es Cookies. Ein Cookie ist ein kleines Stück Daten, das der Browser für eine bestimmte Website speichert und später wieder zur Verfügung stellt.

Der Meta-Pixel speichert nun die Click ID beim ersten Besuch in so einem Cookie. Und wenn später gekauft wird, nimmt er sie von dort und schickt sie mit der Kaufmeldung mit.

Am Ende bekommt Meta also sinngemäß: „Hier ist ein Kauf. Und der gehört zu diesem Klick auf diese Anzeige.“ Und erst damit kann Meta dir in deiner Auswertung zeigen: Diese Anzeige hat zu einem Kauf geführt.

Zusätzlich bekommt Meta mit jeder Anfrage noch technische Angaben mit, zum Beispiel die IP-Adresse und welcher Browser benutzt wurde. Das schickt der Browser bei jeder Anfrage automatisch mit.

Aber eine IP-Adresse ist kein verlässliches Erkennungsmerkmal für eine Person. Eine ganze Familie oder ein ganzes Büro kann dieselbe IP-Adresse benutzen.

Und jetzt kommt ein wichtiger Punkt. Diese Zuordnung klappt nicht immer.

Wenn dein Besucher dem Tracking im Cookie-Banner nicht zugestimmt hat, darf der Meta-Pixel gar nicht erst laufen. Dann geht keine Meldung raus.

Wenn er einen Werbeblocker benutzt, wird der Meta-Code oft gar nicht erst geladen, oder die Meldung wird unterwegs blockiert. Und wenn Cookies gelöscht oder vom Browser eingeschränkt wurden, kommt die Meldung zwar an, aber die Click ID fehlt.

In all diesen Fällen ist der Kauf in deinem Shop trotzdem passiert. Die Bestellung ist gespeichert, das Geld ist da. Nur Meta weiß nichts davon, oder kann den Kauf keiner Anzeige zuordnen.

Deshalb weichen die Zahlen bei Meta fast immer von den Zahlen in deinem Shop ab.

Und noch etwas: Selbst wenn Meta einen Kauf einer Anzeige zuordnet, heißt das nicht automatisch, dass die Anzeige der Grund für den Kauf war. Es heißt nur: Diese Person hat vorher auf die Anzeige geklickt. Vielleicht hätte sie auch ohne gekauft. Was machst du jetzt mit diesem Wissen?

Erinnerst du dich an die vier Stationen? Der Server bestätigt den Kauf. Der Shop-Code übergibt die Kaufdaten an den Meta-Code. Der Meta-Code baut daraus eine Meldung. Und der Browser schickt sie an Meta.

An jeder dieser Stationen kann etwas fehlen, falsch eingestellt sein oder blockiert werden. Und genau deshalb kannst du jetzt viel bessere Fragen stellen als vorher.

Wenn deine Agentur sagt: „Der Meta-Pixel ist eingebaut“, dann kannst du nachfragen: „Gut. Aber was meldet er? Nur Seitenaufrufe? Oder auch Käufe? Und woher bekommt er die Kaufdaten?“

Wenn jemand sagt: „Wir messen Käufe“, kannst du fragen: „Wird die Meldung erst nach der bestätigten Bestellung geschickt? Oder schon beim Klick auf Kaufen?“

Und wenn ein Testkauf gemacht wird, kannst du prüfen lassen: Kommt der richtige Wert an? Stimmt die Währung? Werden die richtigen Artikelnummern übertragen? Und wird derselbe Kauf vielleicht doppelt gemeldet?

Dafür brauchst du keine Liste von Fachbegriffen. Du brauchst nur den Ablauf, den wir gerade durchgegangen sind.

Und wenn du diese Meldungen einmal mit eigenen Augen sehen willst: Genau darum geht es in meinem Kurs „Was passiert im Browser?“. Da schauen wir gemeinsam in die Entwicklertools deines Browsers. Du siehst, welche Anfragen dein Browser abschickt, wohin sie gehen und was drinsteht. Den Link findest du in den Shownotes.

Zum Schluss noch einmal zurück zum Anfang. Zum winzigen, durchsichtigen Bild von 1996.

Damals hat schon die Anfrage nach einem unsichtbaren Bild verraten, dass jemand eine Seite angeschaut hat. Heute macht das ein ganzes Programm, das im Browser deines Besuchers läuft und Kaufdaten weiterreicht.

Das Prinzip ist aber dasselbe geblieben: Der Browser schickt eine Anfrage an einen fremden Server. Und schon diese Anfrage trägt die Information. Nur der Name ist geblieben. Pixel. Und das war's dann für heute auch schon. Mach's gut und bis zur nächsten Folge!