Grundlegendes zu JavaScript

[Karl Heinz]

Hallo,

ich habe eine Frage zu meiner Wordpress Webseite www.sem-united.eu.

Für das Kontaktformular verwende ich das Wordpress Plugin Contact-Form 7.

Um Kontaktanfragen mit Hilfe von Google-Analytics zu tracken habe ich folgende Code-Zeile im Backend des Plugins hinterlegt:

Im Google-Tag-Manager habe ich das entsprechende Event eingerichtet. Das Tracking hat bisher prima funktioniert, Kontaktanfragen wurden mir in Google-Analytcis angezeigt.

Seit einiger Zeit funktioniert dass Tracking leider nicht mehr, weil „on_sent_ok“ Deprecated ist. Hier erklärt:

https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

Man muss die bisherige Lösung wohl durch eine DOM-Lösung ersetzten. Ich habe deshalb den Code aus dem verlinkten Artikel leicht modifiziert (weil ich mit dem Google Tag-Manager arbeitete, das Beispiel sich aber NICHT auf den Google-Tag-Manager bezieht) in die function.php eingefügt.

Die Modizierung zur Anpassung an den Google-Tag-Manager ist wie folgt:

Die Zeile:

ga( 'send', 'event', 'Contact Form', 'submit' );

habe ich durch die Zeile

dataLayer.push({'event': 'gtm4wp.contactForm7Submitted'});

ersetzt, weil ich mit dem Google Tag-Manager arbeiten möchte.

Der Code in der function.php sieht dann so aus:

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    dataLayer.push({'event': 'gtm4wp.contactForm7Submitted'});
}, false );
</script>
<?php
}

Dazu zwei Fragen:

1. Ist das syntaktisch überhaupt korrekt, ich habe leider wenig mit JavaScript am Hut?

2. Wie kann ich überprüfen, ob der JS-Code nach dem Absenden des Kontaktformulars auch korrekt ausgeführt wird? Ich habe das getestet, indem ich das Kontakt-Formular abgeschickt habe und gleichzeitig geprüft habe, ob unter den FF Entwicklertools im Menüpunkt Netzwerkanalyse / JS eine JS-Code ausgeführt wird. Dies ist leider nicht der Fall.

Viele Grüße

[Felix Riesterer]

Lieber Karl,

meiner Wordpress Webseite www.sem-united.eu.

aha... mit Werbung zu tun.

Für das Kontaktformular verwende ich das Wordpress Plugin Contact-Form 7.

Dagegen ist zunächst nichts einzuwenden.

Um Kontaktanfragen mit Hilfe von Google-Analytics zu tracken

Wiebitte? Was geht Google das an, wenn ich über Dein Kontaktformular eine Anfrage sende? Sieht Google vielleicht gleich auch noch den Inhalt meiner Anfrage? Wozu? Und: Werde ich von Dir auf diesen Umstand ausdrücklich aufmerksam gemacht? Scheint mir nicht der Fall zu sein!

Im Google-Tag-Manager habe ich das entsprechende Event eingerichtet.

Das entsprechende Event nennt sich wie genau?

dataLayer.push({'event': 'gtm4wp.contactForm7Submitted'});

Da wird dem Array dataLayer ein neues Objekt als Element hinzugefügt. Was auch immer der Wert für den Schlüssel "event" bedeuten mag. Ist das etwa der Name des Events?

document.addEventListener( 'wpcf7mailsent', function( event ) {
    dataLayer.push({'event': 'gtm4wp.contactForm7Submitted'});
}, false );

Da wird auf ein Event mit dem Namen "wpcf7mailsent" gelauscht. Dieser Event-Name erscheint in Deinem Posting zum ersten Mal. Bei Eintreten des Events tut Deine Funktion nichts anderes, als dass Sie dem Array dataLayer schon wieder das gleiche Objekt hinzufügt, wie oben bereits besprochen. Warum soll sie das?

1. Ist das syntaktisch überhaupt korrekt, ich habe leider wenig mit JavaScript am Hut?

Ja, das ist es. Zur Erklärung:

Die Methode addEventListener nimmt drei Argumente entgegen. Das erste ist der Name des Events, bei dem Du wahrscheinlich keine Ahnung hast, auf welches Event Du eigentlich lauschen möchtest (siehe meine Nachfragen oben). Das zweite Argument ist die Funktion, die Du im Ereignisfalle ausführen willst. Die kann man als Funktionsliteral (ausgeschriebenen Funktionscode) direkt notieren, anstatt einer Funktion einen Namen zu geben, um sie dann per Name aufrufen zu lassen:

function tuWas () { return true; }
myElement.addEventListener("click", tuWas);
myOtherElement.addEventListener("click", function () { return true; });

2. Wie kann ich überprüfen, ob der JS-Code nach dem Absenden des Kontaktformulars auch korrekt ausgeführt wird?

Baue irgendwo in Deinem auszuführenden Code eine sogenannte Debug-Ausgabe ein. Lesetipp: JavaScript/Tutorials/Debuggen für Anfänger

Liebe Grüße,

Felix Riesterer.

[Karl Heinz]

@@Felix,

Um Kontaktanfragen mit Hilfe von Google-Analytics zu tracken

Werde ich von Dir auf diesen Umstand ausdrücklich aufmerksam gemacht? Scheint mir nicht der Fall zu sein!

Im Kontaktformular wird auf die Datenschutzerklärung verlinkt. Dort steht das Analytics genutzt wird. Das sollte doch eigentlich ausreichen oder?

Wenn nein, auch nicht so schlimm, ich werde das Tracking sowieso entfernen. Hat eine Zeit lang eine tolle Hilfe geleistet um herauszufinden über welche Kanäle (AdWords, Organic, Links, Direkteingabe der URL usw.) Kontaktanfragen kamen. Mir geht es aktuell eher um das technische Verständnis als um die Notwendigkeit dieser Funktionalität.

Im Google-Tag-Manager habe ich das entsprechende Event eingerichtet.

Das entsprechende Event nennt sich wie genau?

Ich hatte das nach folgender Anleitung eingerichtet, das hat auch funktioniert solange der Kram von Contact Form 7 nicht deprecated war.

https://support.google.com/tagmanager/answer/6106716?hl=de

Hier noch ein Screenshot von der relevanten Einstellung im Backend vom Google-Tag-Manager:

dataLayer.push({'event': 'gtm4wp.contactForm7Submitted'});

Da wird dem Array dataLayer ein neues Objekt als Element hinzugefügt. Was auch immer der Wert für den Schlüssel "event" bedeuten mag. Ist das etwa der Name des Events?

Der Name kann im Prinzip beliebig gewählt werden, den Namen im Quellcode muss man dann halt auch im Backend vom Google-Tag-Manager verwenden. Das habe ich getan, siehe hierzu nachfolgender Screenshot:

document.addEventListener( 'wpcf7mailsent', function( event ) {
    dataLayer.push({'event': 'gtm4wp.contactForm7Submitted'});
}, false );

Da wird auf ein Event mit dem Namen "wpcf7mailsent" gelauscht. Dieser Event-Name erscheint in Deinem Posting zum ersten Mal. Bei Eintreten des Events tut Deine Funktion nichts anderes, als dass Sie dem Array dataLayer schon wieder das gleiche Objekt hinzufügt, wie oben bereits besprochen. Warum soll sie das?

Der Google-Tag-Manager braucht die Information im Data-Layer.

2. Wie kann ich überprüfen, ob der JS-Code nach dem Absenden des Kontaktformulars auch korrekt ausgeführt wird?

Baue irgendwo in Deinem auszuführenden Code eine sogenannte Debug-Ausgabe ein. Lesetipp: JavaScript/Tutorials/Debuggen für Anfänger

Danke, das werde ich morgen testen.

[Felix Riesterer]

Lieber Karl,

document.addEventListener( 'wpcf7mailsent', function( event ) {
    dataLayer.push({'event': 'gtm4wp.contactForm7Submitted'});
}, false );

Da wird auf ein Event mit dem Namen "wpcf7mailsent" gelauscht.

ich hätte jetzt eher vermutet, dass da folgendes steht:

document.addEventListener(
  "gtm4wp.contactForm7Submitted",
  function (event) {
    // Code für den Ereignisfall
    console.log("Ereignis gtm4wp.contactForm7Submitted erkannt");
  }
);

Liebe Grüße,

Felix Riesterer.

[pl]

hi

Dazu zwei Fragen:

1. Ist das syntaktisch überhaupt korrekt, ich habe leider wenig mit JavaScript am Hut?

Das ist schlecht. Wie willst Du dann eine Datenschutzerklärung abgeben wenn Du selbst nicht weißt welche Daten Deine eigene Anwendung wohin sendet!?

Finde heraus was an GGAnalytics gesendet werden soll, nur so kannst Du das Problem lösen. Also einen Ersatz für ein deprecated Feature finden und vor Allem eine wasserdichte Datenschutzerklärung.

MfG