Was ist JSON? Eine Einführung für Marketeers
JSON ist ein Datenformat, dem du bei deiner Suchmaschinenoptimierung oder im Google Tag Manager früher oder später begegnen wirst: Beispielsweise bei SEO, beim Einbetten von strukturierten Daten - den Rich-Results - oder beim E-Commerce Tracking für Google Analytics im Google Tag Manager.
In diesem Beitrag erfährst du, wie das JSON Format aufgebaut ist, sodass du es lesen, inhaltlich verstehen und damit arbeiten kannst.
Inhaltsverzeichnis
Was ist JSON?
JSON ist die Abkürzung für JavaScript Object Notation. Das ist ein Datenformat, das im Internet zum Datenaustausch zwischen zwei Anwendungen verwendet wird. Zwei typische Anwendungsfälle für JSON sind:
- Strukturierte Metadaten für SEO: Einbetten von Metadaten für Suchmaschinen in einer Webseite wie FAQs, die Suchmaschinen als Rich-Results in den Suchergebnissen anzeigen können.
- Daten am DataLayer im Google Tag Manager: Beispielsweise für das E-Commerce-Tracking mit Google Analytics.
Auch wenn Daten im JSON Format auf den ersten Blick kryptisch aussehen, kannst du sie mit ein wenig Übung lesen.
Das JSON Objekt
Daten im JSON Format werden in der sogenannten Objekt-Notation angegeben. Ein JSON Objekt beginnt und endet stets mit einer geschwungenen Klammer:
{
“url”: “https://basedonanalytics.com/blog/was-ist-json”
}
Die Daten innerhalb eines JSON Objekts werden durch Schlüssel:Wert-Paare angegeben, bei denen der Schlüssel durch einen Doppelpunkt vom Wert getrennt ist.
Schlüssel und Werte in JSON
Sehen wir uns noch einmal das JSON Objekt aus dem vorherigen Kapitel an:
{
“url”: “https://basedonanalytics.com/blog/was-ist-json”
}
In diesem JSON ist url der Schlüssel für den Wert https://basedonanalytics.com/blog/was-ist-json.
Aus Gründen der Lesbarkeit steht üblicherweise jedes Schlüssel:Wert-Paar in einer eigenen Zeile und wird um zwei Leerzeichen oder einen Tab-Stopp gegenüber den geschwungenen Klammern eingerückt. Da du Schlüssel:Wert-Paare theoretisch auch in einer langen Zeile angeben könntest, sind die einzelnen Zeilen der Schlüssel:Wert-Paare durch einen Beistrich voneinander getrennt. Die letzte Zeile ist allerdings eine Ausnahme: Es wird kein Beistrich verwendet, wie du in diesem Beispiel siehst:
{
“url”: “https://basedonanalytics.com/blog/was-ist-json”,
“articleRating”: 0.8
}
Der Schlüssel in einem JSON ist eine Zeichenkette. Daher muss er in doppelten Anführungszeichen eingeschlossen sein und er darf Leerzeichen enthalten. Somit ist dieses JSON zwar korrekt - aber ungewöhnlich:
{
"meine url": "https://basedonanalytics.com/blog/was-ist-json"
}
Ungewöhnlich ist dieses JSON deshalb, da üblicherweise keine Leerzeichen in Schlüsseln verwendet werden, sondern die camelCase Schreibweise. Bei dieser Schreibweise werden keine Leerzeichen verwendet und jedes Wort wird in Großbuchstaben geschrieben, mit Ausnahme des ersten Worts.
Mit camelCase würde das obige JSON so aussehen:
{
"meineUrl": "https://basedonanalytics.com/blog/was-ist-json"
}
Für die Daten in einem JSON Objekt gibt es verschiedene Datentypen
Datentypen in JSON
Zeichenketten
Den häufigsten Datentyp in einem JSON hast du schon kennengelernt: Es ist die Zeichenkette, die in doppelten Anführungszeichen angegeben ist.
{
"meineUrl": "https://basedonanalytics.com/blog/was-ist-json"
}
In obigem Beispiel ist der Wert des Schlüssels meineUrl die Zeichenkette https://basedonanalytics.com/blog/was-ist-json.
In manchen Fällen funktionieren für Zeichenketten einfache Anführungszeichen - allerdings entspricht das nicht der JSON Spezifikation und kann zu Problemen führen.
Zeichenketten können Leerzeichen und Sonderzeichen enthalten, wie einfache Anführungszeichen oder ganze HTML Tags.
Entwickler können doppelte Anführungszeichen innerhalb einer Zeichenkette verwenden. Dann muss jedem doppelten Anführungszeichen in einer Zeichenkette ein \ (Backslash) vorangestellt werden. Dieser Backslash ist das sogenannte Escape Zeichen. Es sagt aus, dass das doppelte Anführungszeichen ein Teil der Zeichenkette und nicht deren Anfang oder Ende ist.
Im Google Tag Assistant des Tag-Managers siehst du im Register DataLayer manchmal JSON Daten, die so aussehen:
{
“text”: “Das ist ein sehr langer Text, der manchmal ” +
“über mehrere Zeilen gehen kann. Daher werden” +
“Zeichenketten mit einem ∖“+∖” verknüpft”
}
Der Tag Assistant teilte lange Zeichenketten zur besseren Darstellung und Lesbarkeit über mehrere Zeilen auf. Das “+” am Ende der Zeile ist eine Verknüpfung der Zeichenkette einer Zeile mit der nächsten Zeile. Außerdem siehst du in obigem Beispiel ein doppeltes Anführungszeichen mit einem vorangestellten Escape-Symbol als Teil der Zeichenkette.
Zahlen
Zahlen werden in JSON ohne Anführungszeichen angegeben. Als Dezimalzeichen wird stets ein Punkt verwendet - auch in Europa.
{
"url": "https://basedonanalytics.com/blog/was-ist-json",
"articleRating": 0.8
}
Der Schlüssel articleRating enthält in diesem Beispiel den Wert 0.8. Eine Zahl kann zusätzlich ein positives oder negatives Vorzeichen und einen Exponenten enthalten.
Achtung: Wird eine Zahl in Anführungszeichen eingeschlossen, wird die Zahl als Zeichenkette interpretiert.
Boolesche Werte (wahr oder falsch)
Ein weiterer Datentyp ist der Boolesche Wert. Er kann entweder den true (wahr) oder false (falsch) lauten:
{
“url”: “https://basedonanalytics.com/blog/was-ist-json”,
“articleRating”: 0.8,
“isLive” : true
}
Im Schlüssel isLive wird in obigem JSON gespeichert, ob die unter dem Schlüssel url angegebene URL live ist oder nicht.
Die Werte true oder false dürfen ebenfalls nicht in Anführungszeichen eingeschlossen werden. Sonst werden sie als Zeichenketten interpretiert und nicht als wahr oder falsch.
Der Null-Wert
Findest du in einem JSON den Wert null, ist das ein Hinweis darauf, dass für den angegebenen Schlüssel keine Daten vorhanden sind:
{
“url”: “https://basedonanalytics.com/blog/was-ist-json”,
“articleRating”: 0.8,
“isLive” : true,
“lastRating”: null
}
Im Schlüssel lastRating sollte das Datum angegeben sein, an dem die im Schlüssel url angegebene Seite zuletzt bewertet wurde. Da es dafür kein Datum gibt, wird für diesen Schlüssel der Wert null übergeben.
Es gibt in JSON keinen eigenen Datentyp für ein Datum. Ein Datum wird in JSON in einer Zeichenkette in einem für Programmiersprachen lesbaren Format - beispielsweise im ISO-Datumsformat - angegeben.
Objekte
Zusätzlich zu den einfachen Datentypen wie Zeichenkette, Zahl, Boolesche Werte oder dem Null-Wert, kann ein Schlüssel ein weiteres JSON Objekt enthalten:
{
“url”: “https://basedonanalytics.com/blog/was-ist-json”,
“articleRating”: 0.8,
“isLive” : true,
“author” : {
“name”: “Max Mustermensch”,
“role”: “seo-analyst”
}
}
In obigem Beispiel enthält der Schlüssel author ein weiteres JSON Objekt mit Informationen über den Autor: nämlich den Namen und den Beruf. Ein solches Objekt als Wert eines Schlüssels ist in geschwungenen Klammern eingeschlossen und enthält ebenso Schlüssel:Wert Paare.
Arrays (Listen)
Ein Array ist eine Liste von Werten in einem von JSON unterstützen Datentyp. In diesem Beispiel enthält der Schlüssel tags eine Liste mit fünf Elementen des Datentyps Zeichenkette.
{
“url”: “https://basedonanalytics.com/blog/was-ist-json”,
“articleRating”: 0.8,
“isLive” : true,
“lastRating”: null,
“tags”: [“json”,“seo”,“web analytics”,“tag manager”]
}
Das Array ist in eckigen Klammern angegeben und die einzelnen Elemente sind durch einen Beistrich voneinander getrennt.
Arrays können aber nicht nur eine Liste einfacher Datentypen enthalten, sondern auch eine Liste von weiteren Objekten:
{
“url”: “https://basedonanalytics.com/blog/was-ist-json”,
“articleRating”: 0.8,
“isLive” : true,
“tags”: [“json”,“seo”,“web analytics”,“tag manager”],
“author” : [{
“name”: “Max Mustermann”,
“role”: “seo-analyst”
},{
“name”: “Maxine Musterfrau”,
“role”: “web-analyst”
}]
}
Wie du anhand der eckigen Klammern beim Schlüssel author siehst, ist als Wert für diesen Schlüssel ein Array angegeben. Das Array enthält wiederum zwei JSON Objekte, die durch Beistrich voneinander getrennt sind. Jedes Objekt im Array enthält die beiden Schlüssel name und role.
Anwendungsbeispiele für JSON
JSON+LD Rich Results für die Suchmaschinenoptimierung
Mit einem JSON+LD Objekt kannst in einzelnen Seiten zusätzliche Daten für Suchmaschinen angeben, die einerseits für die Indexierung verwendet werden und andererseits auch in den Suchergebnissen angezeigt werden können.
Das LD in JSON+LD steht für linked Data. Das bezeichnet ein bestimmtes Vokabular für die Schlüssel in einem JSON Objekt: Die Schlüssel müssen also definierte Namen haben.
Hier siehst du ein Beispiel für ein FAQ JSON+LD Objekt.
{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [{
“@type”: “Question”,
“name”: “Wofür steht die Abkürzung JSON?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “JSON ist die Abkürzung für Javascript Object Notation.”
}
},{
“@type”: “Question”,
“name”: “Was sind Rich Results in SEO?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Rich Results sind zusätzliche Daten und Informationen über eine Webseite, die von Suchmaschinen verwendet werden.”
}
}]
}
Die ersten beiden Zeilen in diesem JSON sind einfache Schlüssel:Wert-Paare. An dritter Stelle steht der Schlüssel mainEntity, für den ein Array angegeben ist. Das erkennst du anhand der eckigen Klammern.
Das Array enthält zwei JSON Objekte, jeweils mit den Schlüsseln @type, name und acceptedAnswer. Der Schlüssel acceptedAnswer enthält wider ein weiteres JSON Objekt mit den Schlüsseln @type und text.
So ein JSON+LD Objekt für FAQs kannst du nun innerhalb eines
Tags auf deiner Webseite einbauen. Suchmaschinen können es bei der Indexierung lesen und zeigen es vielleicht in den Suchergebnissen an.
Für WordPress gibt es zahlreiche Plug-ins, mit denen du JSON+LD Daten erzeugen kannst. Falls du JSON+LD Daten händisch erzeugen möchtest, kannst du dazu das den kostenlosen Schema-Generator von technicalseo.com verwenden.
Eine Liste der von Google unterstützten Rich-Results und wie das JSON+LD für diese Rich-Results aufgebaut sein muss, findest du in der Dokumentation der Such-Galerie bei Google.
Auslesen von Werten eines JSON Objekts im Google Tag Manager
Beim E-Commerce Tracking für Google Analytics mit dem Google Tag Manager werden E-Commerce Ereignisse und die dazugehörigen Daten von deinem Online-Shop als JSON Objekte an den DataLayer und damit an den Google Tag Manager geschickt. Hier ist ein Beispiel eines E-Commerce JSON aus meinem Google Tag Manager Kurs auf Udemy:
ecommerce: {
transaction_id: 123456789,
value: 33.32,
tax: 6.66,
shipping: 0,
currency: “EUR”,
coupon: “JETZTSPAREN50”
items: [
{
item_id: “BOA0001”,
item_name: “Diabolische Tote Bag”,
item_brand: “Diabolic”,
item_category: “Taschen”,
item_category2: “Diabolische Taschen”,
price: 39.98,
discount: 19.99,
coupon: “JEZTSPAREN50”,
quantity: 1
},{
item_id: “PILLOW0001”,
item_name: “Diabolische Polster”,
item_brand: “Diabolic”,
item_category: “Wohnzimmer”,
item_category2: “Polster”,
price: 39.98,
discount: 19.99,
coupon: “JEZTSPAREN50”,
quantity: 1
}
]
}
Zerlegen wir dieses E-Commerce JSON Objekt, um es besser zu verstehen. Hier hat das JSON Objekt einen Namen, der vor der geöffneten, geschwungenen, Klammer angegeben ist: Es heisst ecommerce.
Dann finden wir einige Schlüssel:Wert-Paare mit Daten über den gesamten Einkauf wie die Transaktions-ID (transaction_id), den Gesamtnettobetrag (value) oder die Versandkosten (shipping).
Danach folgt der Schlüssel items, der ein Array enthält. Das siehst du anhand der eckigen Klammern für diesen Schlüssel.
Innerhalb des Arrays sind zwei JSON Objekte angeben, wie du anhand der geschwungenen Klammern siehst, die durch einen Beistrich voneinander getrennt sind. Jedes dieser beiden JSON Objekte enthält Schlüssel:Wert-Paare über jedes einzelne Produkt, dass jemand gekauft hat; z.B. die Artikelnummer (item_id), die Produktbezeichnung (item_name) oder den Bruttopreis eines Produkts vor Abzug von Rabatten (price).
Für das E-Commerce-Tracking mit dem Google Tag Manager müssen wir die einzelnen Werte der Schlüssel aus dem DataLayer auslesen und mit einem Ereignis-Tag an Google Analytics 4 schicken. Zum Auslesen der Werte eines JSON Objekts am DataLayer verwenden wir eine Datenschicht-Variable.
In dieser Datenschicht Variable benötigen wir den vollständig qualifizierten Namen des Schlüssels, dessen Wert wir auslesen möchten. Nehmen wir an, wir möchten den Wert des Schlüssels value auslesen. Der vollständig qualifizierte Name setzt sich aus dem Namen des Objekts (ecommerce) und dem Schlüssel (value) zusammen, die durch einen Punkt getrennt sind:
ecommerce.value
Möchten wir hingegen den Namen des ersten Produkts aus dem JSON auslesen, müssen wir dessen Position im Array des Schlüssel items angeben. Dazu geben wir die Indexnummer in eckigen Klammern an:
ecommerce.items[0].item_name
Nun können wir die Datenschicht-Variable einem Ereignisparameter eines GA4 Ereignis-Tags zuweisen. Für ein vollständiges E-Commerce-Tracking solltest du alle Werte des E-Commerce Objekts mit einer Datenschicht-Variablen auslesen und mit den Parameternamen laut E-Commerce Event Dokumentation an Google Analytics 4 senden.
Zusammenfassung
Daten im JSON Format sehen auf den ersten Blick vielleicht etwas kryptisch aus, lassen sich mit ein wenig Übung einfach lesen. Deshalb solltest du dir diese zwei Punkte besonders gut merken:
- Daten im JSON Format sind immer als Schlüssel:Wert-Paare angegeben.
- Die Werte eines Schlüssels können ein Array enthalten, das als Elemente wiederum JSON Objekte enthält.
Damit kannst du jedes JSON lesen, dass dir im Internet unterkommen wird.
