breadcrumb Pfade auslesen mit Javascript

[madmaxy]

Hallo zusammen,

Ich möchte den Breadcrumb-Pfad auf folgender Seite https://www.ktr.com/de/de/produkte/schwi...elbremsen/ extrahieren, um die Informationen über Google Tag Manager an Analytics zu senden.

Die breadcrumb Struktur sieht wie folgt aus:

Home [0]> Produkte [1] > Bremssysteme [2] > breadcrumb text

ich habe es mit folgendem Code versucht:

Code:

function() {
var breadcrumbs = Array.prototype.slice.call(document.querySelectorAll('div .c-breadcrumb li .c-breadcrumb__item a .c-breadcrumb__link')).map(function (e) {
            return e.innerText
        });
    breadcrumbs.shift();
    return breadcrumbs;
}

für die Ausgabe der Information nutze ich folgenden Code:

Code:

function(){
  return ({{breadcrumbs}})[0]
}

Leider erhalte ich keine Daten.

Danke vorweg für alle Infos

[AndreasB]

Sieht so aus, als ob dein Selector nicht stimmt.

da die Klasse .c-breadcrumb__item auf dem li sitzt, darf es dazwischen kein Leerzeichen geben.

Code:

li.c-breadcrumb__item

Das gleiche gilt für den Anchor a und die Klasse .c-breadcrumb__link


3 zusätzliche Tips:
1. Schreibe deine Selektoren so kurz wie möglich und verlängere sie nur, wenn du Nodes in deiner Selektion hast, die du nicht willst.
2. Lasse die HTML Elemente in deinen Selektoren weg und verwende nur Klassen und ids, dadurch hast du weniger komplexe Selektoren.
3. Um QuerySlectors zu testen, kannst du einfach diesen in CSS schreiben und die dann schauen, ob und welche Elemente selektieret werden.

[madmaxy]

Danke Andreas,
hat funktioniert!

Danke auch für die 3 Tipps! Kannst du mir bitte kurz den 3. Punkt erläutern

[AndreasB]

Gerne!

Ich meinte, du kannst den Selector, den du als string der document.querySelectorAll Methode übergeben möchtest als CSS Selector schreiben und überprüfen, was selektiert wird.

Jetzt merke ich gerade, dass du ja eine Fremde Seite vor dir hast. Da wäre es wohl das Beste den Selektor in der Developer Konsole zu testen.
Ich würde in deinem Fall mit dem tiefsten Element anfangen document.querySelectorAll('.c-link__label') und wenn das Ergebnis zu viel ist, den nächst höheren verwenden document.querySelectorAll('.c-breadcrumb__link') und immer so weiter nach oben wandern.
in der Konsole siehst du dann auch gleich, welche Elemente du dadurch selektierst und somit ob dein Selector passt.

Der CSS Ansatz wäre ein visueller, indem man mit 

Code:

.c-link__label {
    outline: 1px solid magenta !important;
}

oder ähnlichem startet und dann schaut, welche Elemente die outline haben.
Je nachdem wieviele Elemente man selektiert ist einer der beiden Ansätze meinst effektiver.

[madmaxy]

Danke Andreas für deine Hilfe und Zeit!!!!

[patta]

Ihr könnt euch ebenfalls in den Entwicklertools > Elemente mit einem Rechtsklick auf ein Element unter Kopieren > selector kopieren einen passenden in den Zwischenspeicher holen.