Einrichten von Yandex.Metrica-Zielen in Caldera Forms

Es ist an der Zeit, Ziele für Yandex.Metrica für das ziemlich bekannte Caldera Forms-Plugin einzurichten. Leider gibt es keine integrierten Methoden, und ich musste einen Umweg finden. Es hat nicht sofort geklappt, aber ich habe mein Ziel erreicht und konnte das Tracking von reachGoal für Caldera Forms einrichten. Tatsächlich ist die Aufgabe nicht allzu kompliziert.

Vorbereitung

Zunächst müssen Sie eine benutzerdefinierte .js-Datei erstellen. Es ist nicht ratsam, dies über functions.php zu integrieren. Es ist besser, all dies in einer separaten JavaScript-Dateizu halten und dort neue Ziele einzufügen. Ich warne Sie sofort davor, einen dynamischen Ansatz zu wählen, der es ermöglicht, für jede Form kein separates Ereignis zu erstellen – das ist mir nicht gelungen.

Die einzige Möglichkeit besteht darin, alle Formulareinsendungen an ein Ziel zu binden, was jedoch bei weitem nicht für alle geeignet ist. Also, entschuldigen Sie, Sie müssen für jedes Formular eigenen Code erstellen.

Wir werden die Aufgabe schrittweise angehen. Zuerst erstellen wir eine leere .js-Datei. Nennen Sie es myscriptass.js. Ich weiß, das ist nicht lustig. Es ist ratsam, dies im Rahmen eines Child-Themas zu tun. Dort erstellen Sie einen Ordner “assets” und dann in diesem Verzeichnis einen weiteren Ordner – “js“. Großartig. Legen Sie das Skript dort ab. Jetzt schließen Sie es an. Fügen Sie dazu den folgenden Code in die functions.php des Child-Themas ein:

add_action('wp_enqueue_scripts', 'child_theme_scripts');
function child_theme_scripts() {
    wp_enqueue_script('myscriptass', get_stylesheet_directory_uri() . '/assets/js/myscriptass.js', array( 'jquery' ), true);
}

Gemacht? Gut gemacht! Jetzt sollte die Datei über das Head angeschlossen werden. Wenn dies nicht passiert ist, kann das Problem in den Minifizierungsplugins liegen. Sie können JS mit anderen zusammenführen und dabei Fehler machen, was durchaus dazu führen kann, dass der Code nicht funktioniert. Übrigens, wenn bereits eine .js-Datei vorhanden ist, können Sie Ihren benutzerdefinierten Code dort einfügen, aber beachten Sie, dass Ihr benutzerdefinierter Code beim Aktualisieren oder aus anderen Gründen gelöscht werden kann. Daher ist es einfacher, ihn separat zu machen. Übrigens, wenn Sie sich entscheiden, es im Rahmen des Hauptthemas zu machen, ersetzen Sie die dritte Zeile durch diese:

wp_enqueue_script('myscriptass', get_template_directory_uri() . '/assets/js/myscriptass.js', array( 'jquery' ), true);

Diese Option ist für das Einbinden von Skripten im Elternthema vorgesehen. Die obige Option gilt nur für das Kindthema.

Verbindung des Metrikziels mit Caldera Forms

Wenn die Vorbereitung erfolgreich abgeschlossen wurde, ist es Zeit, zum Wesentlichen zurückzukehren. Jetzt erstellen wir das Ereignis “reachGoal” auf zwei Arten. Eine wird auf das Klicken der Schaltfläche “Senden” reagieren, die andere auf das Ereignis des Formularversands.

Mir persönlich gefällt die zweite Option besser. Aber die erste ermöglicht es, zu sehen, wie oft die Schaltfläche geklickt wurde, und dies mit der Anzahl der eingegangenen Formulare zu vergleichen. Das Ziel wird erreicht, selbst wenn der Inhalt nicht gesendet wurde. Daher, wenn es mehr erreichte Ziele gibt als E-Mails im Posteingang, gibt es einen zusätzlichen Grund, die Korrektheit des Mail-Servers zu überprüfen.

Also, lassen Sie uns zur Sache kommen. Zuerst binden wir es durch Klicken ein. Fügen Sie den folgenden Code in die erstellte Skriptdatei ein:

jQuery(document).on('ready', function() { //если данная строка есть в файле, не добавляем
jQuery('#fld_7547452_1').on('click', function ( ) {
  ym(XXXXXXXX, 'reachGoal', 'target_name'); return true;
    });
});
}); //если первая строка есть, не добавляем

Funktioniert es? Erstaunlich! Hervorragend! Dieser Code kann auf jede Schaltfläche “Senden” reagieren. Jetzt gehen wir zur Erklärung über. Die erste Zeile lädt das Framework. Nichts Besonderes. Die zweite Zeile startet die Funktion beim Klicken auf das Formular mit der angegebenen ID. Wo Sie es finden können, sehen Sie auf dem Screenshot.

Dann kommt die Yandex.Metrica-Funktion, wobei:

• “XXXXXXXX” ist die Zählernummer;
• “reachGoal” ist der Ereignistyp (nicht ändern);
• “target_name” ist der von Ihnen festgelegte Name des Ziels, genauer gesagt, seine ID.

Die Klammern schließen einfach die Funktion ab. Großartig, das Ziel ist verbunden. Wenn Sie ein Ziel für mehrere Schaltflächen gleichzeitig verbinden möchten, können Sie ihnen einen separaten eindeutigen Klassenname zuweisen und die Reaktion darauf konfigurieren. Wenn Sie jedoch ein Ziel gleichzeitig für alle Schaltflächen verbinden möchten, verwenden Sie anstelle von:

jQuery('#fld_7547452_1').on('click', function ( ) {

Diesen Code:

jQuery('.btn').on('click', function ( ) {

Außerdem haben die Schaltflächen andere Klassen wie z.B. .btn-default, wenn Sie nichts geändert haben. Es ist sicherer, diese zu verwenden oder den Schaltflächen eigene Klassen zuzuweisen.

Nun, gehen wir nun zur Konfiguration des Auslösens des Metrikereignisses beim Senden des Feedback-Formulars über. Der Code wird folgendermaßen aussehen:

jQuery('#CF5c1ce66585385_1').on('cf.form.submit', function ( ) { /*если не будет работать, тогда вместо cf.form.submit вставляйте просто 'submit'*/
  ym(XXXXXXXX, 'reachGoal', 'target_name'); return true;
    });
});

Wenn Sie möchten, dass dies für alle Formulare gleichzeitig aktiviert wird, ersetzen Sie die erste Zeile durch:

jQuery('.caldera_forms_form').on('cf.form.submit', function ( ) { /* если не будет работать, тогда вместо cf.form.submit вставляйте просто 'submit'*/
/*.caldera_forms_form можно заменить на document*/

Alles ist dasselbe, nur die ID und die Methode zum Starten der Funktion sind unterschiedlich. Es wird “cf.form.submit” verwendet, ein spezieller Hook, der die Funktion nur beim Senden des Feedback-Formulars ausführt. Es basiert auf dem AJAX-Ereignis. Nun ja, ich werde nicht auf Einzelheiten eingehen, die Informationen sind in der offiziellen Dokumentation des Plugins verfügbar. Allerdings haben sie es wohl vergessen, die Methoden zur Verbindung von Metrica mit Caldera Forms dort zu beschreiben. Aber das ist nicht überraschend, alles ist auf das ausländische Publikum ausgerichtet.

Übrigens, wenn das Auslösen beim Senden der Nachricht fehlt, ersetzen Sie cf.form.submit durch einfach submit. Stellen Sie sicher, dass Sie den Punkt nicht versehentlich kopieren.

Also, zuerst finden wir die Formular-ID. Schauen Sie sich den Screenshot an.

Ersetzen Sie die angegebene ID durch Ihre eigene. Fertig. Sie sind großartig. Jetzt können Sie die Absendevorgänge verfolgen. Noch einmal, wenn Sie alle Hürden mit einem Schlag nehmen möchten, verwenden Sie die Formenklasse .caldera_forms_form anstelle der ID.

Wie Sie sehen, ist alles ziemlich einfach. Achten Sie auf die Konversionen!