Henry: Google Tag Assistant - Frage zu Quellcode

Hallo,

ich habe eine Frage zu folgendem Online-Shop:

www.grueneperlen.com

Das Google Chrome AdOn „Google Tag Assistant“ zeigt mir auf der Startseite von www.grueneperlen.com, dass ein Remarketing Tag gefunden wurde. Klicke ich im Google Tag Assistant auf die Detailansicht des Remarketing Tags und anschließend auf „Code Snippet“ so wird mir folgender Code angezeigt, der angeblich im Quellcode enthalten sein soll:

<img height="1" width="1" style="border-style:none;" alt="" src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/0/?label=null&amp;guid=ON&amp;script=0&amp;ord=1782652733381837.5">

Leider bleibt meine Suche im Quellcode der Startseite (STRG + U) allerdings erfolglos, sprich ich finde den Codeschnipsel nicht im Quellcode.

Meine Frage:

Warum findet der Tag Assistant den Code obwohl ich diesen durch eine händische Suche im Quellcode nicht finden kann?

  1. Hallo Henry,

    Warum findet der Tag Assistant den Code obwohl ich diesen durch eine händische Suche im Quellcode nicht finden kann?

    Wie hast du dir den Quelltext angesehen? Entwicklerwerkzeug oder Quelltextansicht?

    Gruß, Jürgen

  2. Tach!

    Warum findet der Tag Assistant den Code obwohl ich diesen durch eine händische Suche im Quellcode nicht finden kann?

    Eine Webseite wird geladen, vom Browser interpretiert und ein DOM (Document Object Model) aufgebaut. Anhand des DOM wird die Darstellung erstellt. Dann kommt unter Umständen noch Javascript ins Spiel, das Änderungen vornehmen möchte, um bestimmte Dinge zu erreichen, die mit HTML (und CSS) allein nicht umsetzbar sind. Es kann dazu in das DOM eingreifen und dort Elemente hinzufügen, ändern oder entfernen. Daraufhin passt sich die Darstellung auf dem Bildschirm an. Der ursprüngliche Quellcode bleibt aber so erhalten wie er war. Die Änderungen werden nicht vom DOM in die Quelle zurückgeschrieben. Das ergibt nämlich keinen Sinn, weil der Browser längst dazu übergegangen ist, mit dem DOM zu arbeiten und den Quellcode nicht mehr benötigt.

    Es ist aber möglich, das gesamte DOM oder Teile daraus in den Code zurückzurechnen, wie er sein müsste, um daraus den aktuellen Zustand erzeugen zu können. Sozusagen der Original-Code und darein eingearbeitet die Änderungen von Javascript. Das ist in deinem Fall passiert. Der Tag Assistent hat aus dem DOM etwas zurückgerechnet, was nachträglich eingefügt wurde. Du kannst das in seiner vollen Schönheit also nicht im Quellcode finden, aber du kannst eventuell signifikate Wörter im Quellcode oder hinzugeladenen Dateien finden. Wenn du dann da in der Näche umherschaust, wirst du vielleicht auch den Code finden, der die DOM-Manipulation vorgenommen hat.

    Es kann aber auch ein wenig anders sein. Wenn kein Javascript Änderungen vorgenommen hat, so ist es zuminst immer noch möglich, dass im DOM die Attribute eines Elements anders angeordnet sind als in der Quelle. Das kannd er Browser durchaus machen, wenn er denkt, dass eine andere Reihenfolge für ihn von Vorteil ist. Das Zurückrechnen vom DOM in HTML-Code würde dann auch eine andere Reihenfolge der Attribute ergeben. Ein direkter Textvergleich scheitert dannn natürlich auch.

    Eine weitere Ursachen kann sein, dass einfache Anführungszeichen zu doppelten rückübersetzt wurden und umgekehrt. Auch das ergibt dann unterschiedliche Texte. Die Anführungszeichen sind nur zur korrekten Interpretation des Quellcodes notwendig. Im DOM jedoch werden die Werte anderes verwaltet. Zeichen zur Begrenzung sind da nicht notwendig und deshalb sind die ursprünglichen Anführungszeichen wegen Nichtmehrnotwendigkeit verlorengegeangen.

    dedlfix.

    1. Es ist aber möglich, das gesamte DOM oder Teile daraus in den Code zurückzurechnen, wie er sein müsste, um daraus den aktuellen Zustand erzeugen zu können. Sozusagen der Original-Code und darein eingearbeitet die Änderungen von Javascript. Das ist in deinem Fall passiert. Der Tag Assistent hat aus dem DOM etwas zurückgerechnet, was nachträglich eingefügt wurde. Du kannst das in seiner vollen Schönheit also nicht im Quellcode finden, aber du kannst eventuell signifikate Wörter im Quellcode oder hinzugeladenen Dateien finden. Wenn du dann da in der Näche umherschaust, wirst du vielleicht auch den Code finden, der die DOM-Manipulation vorgenommen hat.

      Erstmal vielen Dank für Deine tolle Erklärung.

      Demnach wurde der Remarketing-Code erst nachträglich, nachdem der Quellcode in das DOM umgewandelt wurde, per JavaScript in das DOM hinzugefügt.

      Nun kenne ich mich leider nicht mit JavaScript aus, möchte aber, den Remarketing-Code, der über das JavaScript in den Quellcode hinzugefügt wird, entfernen.

      Wie gehe ich denn konkret vor um die JavaScript Funktion zu finden, die dafür verantwortlich ist, dass der Remarketing-Code in das DOM hinzugefügt wird?

      Helfen mir hier die Chrome Developer Tools oder Firebug?

    2. Nach der Antwort vermute ich, dass ich den Code-Schnipsel im Quellcode nicht finden kann, weil dieser erst nachträglich per JavaScript in das DOM geladen wird. Um den Code-Schnipsel allerdings entfernen zu können muss ich ja irgendwie herausfinden, welche JavaScript Funktion dafür verantwortlich ist, dass dieser Code-Schnipsel in das DOM hinzugefügt wird.

      Hierzu hätte ich zwei Fragen:

      1.) Könnt ihr mir verraten, wie ich herausfinden kann, welche JavaScript Funktion dafür verantwortlich ist, dass der Code-Schnipsel in das DOM integriert wird? Helfen mir mir vielleicht die Browser Extensions Firebug und/oder die Chrome Entwicklertools?

      2.) Gibt es eine Möglichkeit sich den Quellcode so anzuschauen, wie er aussieht, nachdem die JavaScript Funktionen den Code entsprechend modifiziert haben? Schau ich mir den Code mit Hilfe von STRG+U an so sehe ich ihn ja nur so wie er ausschaut, bevor die JavaScript-Funktionen den Code modifiziert haben.

      1. Hallo Henry,

        1.) Könnt ihr mir verraten, wie ich herausfinden kann, welche JavaScript Funktion dafür verantwortlich ist, dass der Code-Schnipsel in das DOM integriert wird? Helfen mir mir vielleicht die Browser Extensions Firebug und/oder die Chrome Entwicklertools?

        Wer hat die Seite erstellt? Wer hat das Script eingebaut?

        2.) Gibt es eine Möglichkeit sich den Quellcode so anzuschauen, wie er aussieht, nachdem die JavaScript Funktionen den Code entsprechend modifiziert haben? Schau ich mir den Code mit Hilfe von STRG+U an so sehe ich ihn ja nur so wie er ausschaut, bevor die JavaScript-Funktionen den Code modifiziert haben.

        Im FF: Alles auswählen (Strg A) und dann rechte Maustaste -> Auswahl-Quelltext anzeigen. Oder eben die Entwicklertools.

        Gruß, Jürgen

        1. Im FF: Alles auswählen (Strg A) und dann rechte Maustaste -> Auswahl-Quelltext anzeigen. Oder eben die Entwicklertools.

          Hier bin ich etwas verwirrt. So bekomme ich doch nur den Quelltext angezeigt BEVOR die JavaScript-Funktionen den Code modifiziert haben?

          Verstehe ich hier etwas falsch, ich bräuchte den Quellcode ja, NACHDEM dieser von von den JavaScript Funktionen modifiziert wurde.

          1. Hallo Henry,

            Im FF: Alles auswählen (Strg A) und dann rechte Maustaste -> Auswahl-Quelltext anzeigen. Oder eben die Entwicklertools.

            Hier bin ich etwas verwirrt. So bekomme ich doch nur den Quelltext angezeigt BEVOR die JavaScript-Funktionen den Code modifiziert haben?

            Verstehe ich hier etwas falsch, ich bräuchte den Quellcode ja, NACHDEM dieser von von den JavaScript Funktionen modifiziert wurde.

            du solltest mal den Quelltext (Strg u) und den Auswahlquelltext vergleichen.

            Gruß, Jürgen

            1. Hallo Henry,

              Im FF: Alles auswählen (Strg A) und dann rechte Maustaste -> Auswahl-Quelltext anzeigen. Oder eben die Entwicklertools.

              Hier bin ich etwas verwirrt. So bekomme ich doch nur den Quelltext angezeigt BEVOR die JavaScript-Funktionen den Code modifiziert haben?

              Verstehe ich hier etwas falsch, ich bräuchte den Quellcode ja, NACHDEM dieser von von den JavaScript Funktionen modifiziert wurde.

              du solltest mal den Quelltext (Strg u) und den Auswahlquelltext vergleichen.

              Ich stehe total auf dem Schlauch und weiß nicht weiß du meinst.

              Zum einen habe ich die Möglichkeit den Quellcode direkt durch die Tastenkombination STRG+U anzuzeigen, zum anderen indem ich die ganze Seite mit STRG+A markiere und dann auf "Aswahlquelltext anzeigen" klicke. Bei beidem wird mir aber doch der gleiche Quelltext angezeigt, sprich der Quelltext noch BEVOR er durch JavaScript manipuliert wurde. Ich möchte den Quelltext aber so sehen wie er im DOM aussieht, sprich nachdem dieser von JavaScript manipuliert wurde. Hier hilft mir Dein Tipp mit STRG+A und anschließend "Auswahlquelltext anzeigen" doch nicht weiter.

              Kannst du mir etwas genauer erklären, was du hier genau meinst?

              1. Hallo Henry,

                Zum einen habe ich die Möglichkeit den Quellcode direkt durch die Tastenkombination STRG+U anzuzeigen, zum anderen indem ich die ganze Seite mit STRG+A markiere und dann auf "Aswahlquelltext anzeigen" klicke. Bei beidem wird mir aber doch der gleiche Quelltext angezeigt,

                nein. Hast du die beiden Ansichten verglichen? Such mal nach den script-Tags

                Gruß, Jürgen