Was ist JSON? Eine Einführung für Marketeers

Technik
Verfasst von Christian Feichtner

JSON ist die Abkürzung für JavaScript Object Notation. Es ist ein für Menschen und Maschinen einfach zu lesendes Datenformat, dem du im Web regelmäßig begegnen wirst - selbst wenn du nicht programmierst.

Etwa bei Suchmaschinenoptimierung für strukturierte Daten oder im Google Tag Manager als Datenformat für den DataLayer.

In diesem JSON-Tutorial erfährst du, wie das JSON-Format aufgebaut ist, sodass du es lesen und inhaltlich verstehen kannst. Ganz ohne Programmierkenntnisse.

Inhaltsverzeichnis

Daten im JSON-Format werden in der sogenannten Objekt-Notation angegeben. Das bedeutet: JSON-Daten beginnen und enden stets mit einer geschwungenen Klammer, wie im folgenden Beispiel:

{
    "url": "https://basedonanalytics.com/blog/was-ist-json"
}

In einem JSON-Objekt werden Daten durch sogenannte Schlüssel-Wert-Paare angegeben, bei denen der Schlüssel durch einen Doppelpunkt vom Wert getrennt ist.

Der Text links vom Doppelpunkt ist der Schlüssel und er lautet im obigen Beispiel url. Rechts siehst du den Wert des Schlüssels, nämlich eine URL meiner Website.

Gemäß der Spezifikation muss der Schlüssel in Anführungszeichen angegeben sein, da er Leerzeichen enthalten kann. In der Programmierung werden die Anführungszeichen des Schlüssels auch gerne einmal vergessen, da es in den meisten Fällen auch ohne Anführungszeichen funktioniert.

Üblicherweise enthält der Schlüssel aber keine Leerzeichen, sondern wird in der sogenannten camelCase Schreibweise angegeben, wie im folgenden Beispiel

{
    "meineUrl": "https://basedonanalytics.com/blog/was-ist-json"
}

In der camelCase Schreibweise beginnt der Schlüssel mit einem Kleinbuchstaben. Würde nach einem Wort wie “meine” ein Leerzeichen folgen, wird stattdessen ein Großbuchstabe verwendet. So wird aus dem Schlüssel *“meine URL” *dann etwa der Schlüssel “meineUrl” (ohne Leerzeichen).

Aus Gründen der Lesbarkeit steht üblicherweise jedes* *Schlüssel-Wert-Paar in einem JSON-Objekt 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 einzigen Zeile angeben könntest, sind die Schlüssel-Wert-Paare stets durch einen Beistrich voneinander getrennt. Die letzte Zeile vor einer schließenden, geschwungenen Klammer ist allerdings eine Ausnahme: Es wird kein Beistrich mehr angegeben, wie du in diesem Beispiel siehst:

{
    "url": "https://basedonanalytics.com/blog/was-ist-json",
    "title": "Was ist JSON?"
}

Beim Schlüssel title ist kein Beistrich am Ende der Zeile angegeben.

Datentypen in JSON

Ob du für den Wert eines Schlüssels ein Anführungszeichen verwenden wird, hängt vom Datentyp des Werts ab. Die von JSON unterstützten Datentypen sehen wir uns in den folgenden Kapiteln an.

Zeichenketten (String)

Den häufigsten Datentyp in einem JSON-Objekt hast du schon kennengelernt: Es ist die Zeichenkette (String), die stets in doppelten Anführungszeichen angegeben werden muss.

{
    "url": "https://basedonanalytics.com/blog/was-ist-json"
}

Zeichenketten in einem JSON-Objekt können Leerzeichen und Sonderzeichen enthalten, wie etwa einfache Anführungszeichen oder sogar ganze HTML-Tags.

Entwickler können sogar doppelte Anführungszeichen innerhalb einer Zeichenkette in einem JSON-Objekt verwenden. Dann muss allerdings jedem doppelten Anführungszeichen in einer Zeichenkette ein Backslash vorangestellt werden. Dieser Backslash ist das sogenannte Escape-Zeichen, das du vielleicht aus meinem Tutorial für reguläre Ausdrücke kennst.

Damit legen Entwickler fest, dass das doppelte Anführungszeichen ein Teil der Zeichenkette und nicht deren Anfang oder Ende ist.

Im Google Tag Assistant (Vorschaumodus 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 teilt 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 Zeichenkette der nächsten Zeile.

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.

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 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 aktuell 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 für den 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.

Info: Es gibt in JSON keinen eigenen Datentyp für ein Datum. Ein Datum wird in JSON in einer Zeichenkette (also in Anführungszeichen) 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 (Schlüssel name) und den Beruf (Schlüssel role).

Ein JSON-Objekt als Wert eines Schlüssels ist in geschwungenen Klammern enthalten und enthält ebenso Schlüssel-Wert Paare.

Arrays (Listen)

Ein *Array *ist eine Liste von Werten in einem von JSON unterstützten Datentyp. In diesem Beispiel enthält der Schlüssel tags eine Liste (Array) 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"]
}

Ein Array ist stets 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 JSON-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 in geschwungenen Klammern, die durch Beistrich voneinander getrennt sind. Jedes Objekt im Array enthält die beiden Schlüssel name und role.

Nicht unterstützte Datentypen

Datum

Wie oben erwähnt, gibt es in JSON keinen eigenen Datentyp für ein Datum. Es wird daher in einem JSON-Objekt typischerweise als Zeichenkette (String) angegeben und damit in Anführungszeichen eingeschlossen.

Üblicherweise wird das Datum in einem JSON Objekt in der ISO 8601 Schreibweise angegeben, also in dieser Form: 2024-01-24T18:00:00-02:00.

Der erste Teil (vor dem T) ist das Datum im Format Jahr (4 Ziffern), Monat (2 Ziffern) und Tag (2 Ziffern).

Danach folgt das Trennzeichen für die Uhrzeit - ein “T”. Fehlt das “T”, wurde keine Uhrzeit angegeben.

Die Uhrzeit enthält typischerweise Stunden und Minuten mit jeweils zwei Ziffern. Die Sekunden können optional angegeben werden.

Der letzte Teil der Uhrzeit in einem JSON-Objekt kann die Zeitzone sein, die dann mit einem plus oder minus angegeben ist. Ist eine Zeitzone vorhanden, handelt es sich bei der davor angegebenen Zeit um die UTC-Zeit (Coordinated Universal Time), die typischerweise der Greenwich Zeit entspricht.

Fehlt eine Zeitzone, ist mit der angegebenen Uhrzeit typischerweise die lokale Zeit gemeint - wobei das ein wenig schwierig zu interpretieren sein kann. Denn mit lokaler Zeit kann entweder die Zeit auf einem Server in den USA gemeint sein oder auch die Zeit auf deinem Rechner.

Anwendungsbeispiele für JSON

JSON+LD Rich Results für die Suchmaschinenoptimierung

Die Abkürzung LD in JSON+LD steht für Linked Data. Das bezeichnet ein bestimmtes Vokabular für die Schlüssel in einem JSON-Objekt. Das bedeutet, dass für die Schlüssel in einem JSON-Objekt nur vordefinierte Namen verwendet werden können

Mit einem JSON+LD Objekt kannst du in einzelnen Seiten Daten für Suchmaschinen angeben, die einerseits für die Indexierung verwendet und andererseits auch in den Suchergebnissen als Rich Results angezeigt werden können.

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 <b>J</b>ava<b>s</b>cript <b>O</b>bject <b>N</b>otation."
    }
  },{
    "@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+LD Objekt 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 ein weiteres JSON-Objekt mit den Schlüsseln @type und text.

So ein JSON+LD Objekt für FAQs kannst du nun innerhalb eines <script> ... </script> 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 4 mit dem Google Tag Manager werden E-Commerce-Ereignisse und die dazugehörigen Produkt-Daten von deinem Online-Shop als JSON-Objekte an den DataLayer und damit an den Google Tag Manager gesendet.

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 heißt ecommerce.

Dann finden wir einige Schlüssel-Wert-Paare mit Daten über den gesamten Einkauf wie die Transaktions-ID (transaction_id), den Gesamtnettobetrag (value) und 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 angegeben, wie du anhand der geschwungenen Klammern siehst. Die beiden JSON-Objekte sind durch einen Beistrich voneinander getrennt. Jedes dieser beiden JSON Objekte enthält Schlüssel-Wert-Paare über jedes einzelne Produkt, das jemand gekauft hat; z.B. die Artikelnummer (item_id), die Produktbezeichnung (item_name) oder den Bruttopreis eines Produkts vor Abzug von Rabatten (price).

Möchtest du etwa den Gesamtwert des Einkaufs auslesen, um ihn in einem Conversion-Tag für Pinterest oder Google ADs zu verwenden, können wir ihn mit einer Datenschichtvariablen auslesen.

In dieser Datenschichtvariablen 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 Namen des Schlüssel (value) zusammen, die durch einen Punkt getrennt sind:

ecommerce.value

Ein Video-Beispiel dafür ist in meinem Tag Manager Kurs auf Udemy enthalten.

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 mit 0 beginnende Indexnummer in eckigen Klammern an:

ecommerce.items[1].item_name

Nun können wir die Datenschicht-Variable einem Conversion-Tag zuweisen und damit den Gesamtwert des Einkaufs 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 drei 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 enthalten kann
  • Um den Wert eines JSON-Objekts im Tag Manager auszulesen, muss der vollständige Name des Schlüssels angegeben werden, der sich aus Objektname und Schlüsselnamen zusammensetzt, die durch einen Punkt voneinander getrennt sind

Nun kannst du jedes JSON lesen, das dir im Internet unterkommen wird.

Christian Feichtner

Ich stehe dir mit Rat und Tat zur Seite, um SEO & die Web-Analyse zu entmystifizieren, sodass du SEO & die Web-Analyse selbst in die Hand nehmen kannst.

Zurück

Ereignisse in Google Analytics 4: Was du darüber wissen musst
Weiter

Search Insights Bericht: Was sie darüber wissen sollten